如何在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

更改您的定義：

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

Answer 2

您只需要在initComponent內部指定工具欄配置。 請參閱以下內容。

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

];

看看這是否可以幫助您。

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);
   }
});