4

ここに次のグリッドがあります。

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

このグリッドの下部にツールバーを追加できますか、それともパネルにのみ追加できますか?

また、ボタンではなくツールバーに通常のテキストを配置するにはどうすればよいですか?

4

3 に答える 3

17

はい、グリッド パネルは継承Ext.grid.Panelします。追加できるはずです。

dockedItems: [{
    xtype: 'toolbar',
    dock: 'top',
    items: [{
        xtype: 'button',
        text: 'Left Button'
    }, {
        xtype: 'tbfill'
    }, {
        xtype: 'button',
        text: 'Right Button'
    }]
}]
于 2013-07-25T14:51:23.320 に答える
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

于 2015-11-04T06:29:22.340 に答える
2

ドッキング レイアウトのコンポーネントは、ツールバーをドッキングできます。Ext.grid.Panelextends なので、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

于 2013-07-25T14:51:26.437 に答える