如何在EXTJS 4中为网格添加工具栏

How to add a toolbar to grid in EXTJS 4

本文关键字：网格 添加 工具栏 EXTJS      更新时间：2023-09-26

所以，我有一个简单的工具栏与按钮添加到我的网格问题。首先，我创建一个像这样的网格:

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

});

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

你只需要在initComponent内部指定工具栏配置。

this.dockedItems = [{
xtype: 'toolbar',
dock: 'top',
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',
    tbar: [{
        text: 'Добавить',
        action: 'create'
    }]
    // .....
});

构建组件的更好方法:

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);
   }
});
相关文章：