如何在EXTJS中添加工具欄到網格4

Question

所以，我在添加一個帶按鈕的簡單工具欄到我的網格時遇到問題。起初，我創建一個這樣的網格：

Ext.define('MyApp.view.user.List', { 
extend: 'Ext.grid.Panel', 
alias: 'widget.userlist', 
title: 'All Users', 
store: 'Users', 
initComponent: function() { 

    this.columns = [ 
     {header: 'login', dataIndex: 'login', flex: 1}, 
     {header: 'password', dataIndex: 'password', flex: 1}, 
     {header: 'name', dataIndex: 'name', flex: 1}, 
     {header: 'email', dataIndex: 'email', flex: 1}, 
     {header: 'phone', dataIndex: 'phone', flex: 1} 
    ]; 

    this.callParent(arguments); 
} 
}); 

它工作正常，我得到了我的網格。但現在我需要添加帶有按鈕的工具欄，它將使用網格條目執行CRUD操作。所以我加了這段代碼：

... 
store: 'Users', 

    items: [{ 
     xtype: 'toolbar', 
     items: [{ 
       text: 'Добавить', 
       action: 'create' 
      }, 
      { 
       text: 'Редактировать', 
       action: 'update' 
      }, 
      { 
       text: 'Удалить', 
       action: 'destroy' 
      } 
     ] 
    } 

], 
... 

但是，這似乎沒有改變任何東西。我仍然可以在瀏覽器中看到純粹的網格，所以問題是我做錯了什麼？

這種觀點的整個代碼現在看起來像這樣：

Ext.define('MyApp.view.user.List', { 
extend: 'Ext.grid.Panel', 
alias: 'widget.userlist', 
title: 'All Users', 
store: 'Users', 
items: [{ 
     xtype: 'toolbar', 
     items: [{ 
       text: 'Добавить', 
       action: 'create' 
      }, 
      { 
       text: 'Редактировать', 
       action: 'update' 
      }, 
      { 
       text: 'Удалить', 
       action: 'destroy' 
      } 
     ] 
    } 

], 
initComponent: function() { 

    this.columns = [ 
     {header: 'login', dataIndex: 'login', flex: 1}, 
     {header: 'password', dataIndex: 'password', flex: 1}, 
     {header: 'name', dataIndex: 'name', flex: 1}, 
     {header: 'email', dataIndex: 'email', flex: 1}, 
     {header: 'phone', dataIndex: 'phone', flex: 1} 
    ]; 

    this.callParent(arguments); 
} 

}）;

我需要更改/添加才能使其工作？

Answer 1

你需要指定內只initComponent工具欄上的配置。請參閱以下內容。

this.dockedItems = [{ 
xtype: 'toolbar', 
dock: 'top', 
items: [{ 
    text: 'Добавить', 
    action: 'create' 
}, { 
    text: 'Редактировать', 
    action: 'update' 
}, { 
    text: 'Удалить', 
    action: 'destroy' 
}] 
} 

];

看看這可以幫助你。

Answer 2

改變你的定義：

Ext.define('MyApp.view.user.List', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.userlist', 
    title: 'All Users', 
    store: 'Users', 
    tbar: [{ 
     text: 'Добавить', 
     action: 'create' 
    }] 
    // ..... 
}); 

Answer 3

更好的方式來組織你的組件：

Ext.define('MyApp.view.user.List', { 
    extend: 'Ext.grid.Panel', 
    alias: 'widget.userlist', 
    title: 'All Users', 

    initComponent: function() { 
     var me = this; 

     var store = Ext.storeMgr.lookup('Users'); 

     Ext.applyIf(me, { 
     store: store, 
     columns: [ 
      {header: 'login', dataIndex: 'login', flex: 1}, 
      {header: 'password', dataIndex: 'password', flex: 1}, 
      {header: 'name', dataIndex: 'name', flex: 1}, 
      {header: 'email', dataIndex: 'email', flex: 1}, 
      {header: 'phone', dataIndex: 'phone', flex: 1} 
     ], 
     dockedItems: [{ 
      xtype: 'tbar', 
      dock: 'top', 
      items: [ 
       { 
        text: 'Добавить', 
        action: 'create' 
       }, 
       { 
        text: 'Редактировать', 
        action: 'update' 
       }, 
       { 
        text: 'Удалить', 
        action: 'destroy' 
       }] 
     }] 

     }); 

     me.callParent(arguments); 

     // could be something like this to load the store 
     me.on('afterrender', function() { 
      me.getStore().loadPage(1); 
     } , me); 
    } 
});