如何在 EXTJS 4 中将工具栏添加到网格答案

【问题标题】：How to add a toolbar to grid in EXTJS 4如何在 EXTJS 4 中将工具栏添加到网格
【发布时间】：2014-03-26 04:16:29
【问题描述】：

所以，我在向网格添加带有按钮的简单工具栏时遇到了问题。起初我创建了一个这样的网格：

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

});

我需要更改/添加什么才能使其正常工作？

【问题讨论】：

标签： javascript extjs grid toolbar

【解决方案1】：

您只需要在 initComponent 中指定工具栏配置。请参阅以下内容。

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

];

看看这对你有没有帮助。

【讨论】：

【解决方案2】：

改变你的定义：

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

【讨论】：

【解决方案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);
   }
});

【讨论】：