向网格添加工具栏 - Extjs

Question

I have the following grid here:

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

    initComponent: function () {
        this.columns = [{
            header: 'Name',
            dataIndex: 'name',
            flex: 4
        }, {
            header: 'User ID',
            dataIndex: 'user_id',
            flex: 1
        }, {
            header: 'Address',
            dataIndex: 'address',
            flex: 3
        }, {
            header: 'Age',
            dataIndex: 'agee',
            flex: 5
        }];

        this.callParent(arguments);
    }
});

这个表格底部能否添加工具栏，或者只能添加到面板上？

另外，如何在工具栏中放置普通文本而不是按钮？

- Clay Banks

Answer 1

是的，网格面板继承了Ext.grid.Panel，您应该能够添加：

dockedItems: [{
    xtype: 'toolbar',
    dock: 'top',
    items: [{
        xtype: 'button',
        text: 'Left Button'
    }, {
        xtype: 'tbfill'
    }, {
        xtype: 'button',
        text: 'Right Button'
    }]
}]

- BigBadOwl

---

嘿，谢谢，那个很好用。我会查看文档的。 - Clay Banks

在工具栏的按钮配置之间添加一个 { xtype: 'tbfill' }。 - BigBadOwl

非常好！谢谢您先生。 - Clay Banks

那个最后的问题是范围蔓延！我认为它值得一个新问题。 - Chris Farmer

在这种情况下，我会使用分页工具栏。http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.toolbar.Paging - BigBadOwl

Answer 2

你也可以使用'bbar[...]'添加按钮，这相当于

dockedItems: [{
    xtype: 'toolbar',
    dock: 'bottom',
    items: [
        { xtype: 'button', text: 'Button 1' }
    ]
}]

这样可以让您在网格面板底部添加按钮，所有其他按钮属性都可以使用。

示例代码如下：

 bbar: [
      { xtype: 'button', text: 'Button 1' },
      { xtype: 'button', text: 'Button 2' }
    ]

更多细节请参考文档：http://docs.sencha.com/extjs/6.0/6.0.1-classic/#!/api/Ext.panel.Panel-cfg-bbar

- Motilal

Answer 3

任何使用 Docked 布局的组件都可以具有停靠工具栏。由于 Ext.grid.Panel 扩展自 Ext.panel.Panel，您可以将其停靠在面板上。请参见 bbar 配置：http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.panel.Panel-cfg-bbar 通过将以下内容添加到工具栏的 items 中，可以向其添加文本项：

{ xtype: 'tbtext', text: 'My Text' }

这里有相关文档：http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.toolbar.TextItem

- kevhender