将工具栏添加到网格 - Extjs答案

【问题标题】：Adding a toolbar to a grid - Extjs将工具栏添加到网格 - Extjs
【发布时间】：2013-07-25 13:01:43
【问题描述】：

我这里有以下网格：

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

工具栏可以添加到该网格的底部还是只能添加到面板中？

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

【问题讨论】：

标签： extjs grid panel toolbar

【解决方案1】：

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

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

【讨论】：

嘿，谢谢，效果很好。我会检查文档。
如何在左右两侧放置工具栏按钮？
在工具栏中的按钮配置之间添加一个 { xtype: 'tbfill' }
非常好！谢谢楼主
当您使用它时，我怎样才能让我的网格大小的长度显示在此工具栏上？（网格中商店/行的长度）

【解决方案2】：

任何具有停靠布局的组件都可以停靠工具栏。由于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

【讨论】：

【解决方案3】：

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

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

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

示例代码在这里：

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

【讨论】：