将工具栏添加到网格并将其位置设置在 Ext.grid.GridPanel 的 tbar 上方

Posted 2023-02-26

【中文标题】将工具栏添加到网格并将其位置设置在 Ext.grid.GridPanel 的 tbar 上方

【英文标题】：Adding toolbar to grid and set its position above the tbar of Ext.grid.GridPanel

【发布时间】：2016-05-26 10:01:57

【问题描述】：

我有一个grid：

ProjectListReportGrid = Ext.extend(Ext.grid.GridPanel, 
    iconCls: 'silk-grid',
    id: 'consolidatedReportGrid',
    frame: false,
    title: 'Project Team Reports[Team Summary Report]',
    initComponent: function () 

        this.viewConfig = 
            forceFit: true
        ;

        this.tbar = this.buildBottomToolbar();
        ProjectListReportGrid.superclass.initComponent
            .call(this);
    ,
    buildBottomToolbar: function () 
        teamSummaryReportButton = new Ext.Button(
            iconCls: 'teamsummaryreport',
            handler: this.onAdd,
            scope: this,
            name: 'Summary'
        );
    
);

---

我在grid上方添加了一个新的toolbar，如下所示：

consolidatedReportGrid.add(new Ext.Toolbar(
    width: 1300,
    id: 'remove',
    buttonAlign: 'center',
    tabPosition: 'top',
    items: [myRadioGroup]
));

我想将其位置设置为顶部，但它低于 tbar 的 gridpanel。

【问题讨论】：

请验证您的 ExtJS 版本，您同时将问题标记为 ExtJS3 和 ExtJS5。

@sergey-novikov 它的 extjs 3

Ext 3 或更低版本不能动态添加停靠项。

【参考方案1】：

对于 ExtJS3

使用insert() 而不是add()，如下所示：

grid.getTopToolbar().insert(0, new Ext.Toolbar(
    items: [
        new Ext.Button(
            text: 'Added button'
        )
    ]
));

Working fiddle

ExtJS4+

使用addDocked() 而不是add()，像这样：

grid.addDocked(new Ext.Toolbar(
    items: [
        
            xtype: 'button',
            text: 'Test add docked'
        
    ]
), 0);

Working fiddle

【讨论】：

它不适用于 extjs 3 版本.. @SergeyNovikov

是的，对于 ExtJS3 它不应该工作。好吧，我不熟悉 ExtJS3，但我想您可以将工具栏添加到您的 tbar 配置中（如果网格已经呈现，则更新 lyout）。 @ShivakumarNH

你能给我一个示例代码吗..@SergeyNovikok

我检查了 ExtJS3 文档并创建了简单的小提琴，检查它。但现在我真的意识到我错了......你希望你的组件 above tbat，而不是它的项目的顶部。无论如何，检查我的小提琴，也许这个解决方案会让你满意。 @ShivakumarNH