ExtJS 3.4 在网格底部添加按钮

Posted 2023-02-26

【中文标题】ExtJS 3.4 在网格底部添加按钮

【英文标题】：ExtJS 3.4 add button at the bottom of a grid

【发布时间】：2012-03-28 09:59:30

【问题描述】：

我是 ExtJS 的新手，并尝试在网格底部添加一个按钮。此按钮将打开一个模式对话框以选择更多人。我不知道如何在网格之后添加这个按钮。我必须使用 GridPanel 以外的其他组件吗？

谁能帮帮我？

代码如下：

var selectedPersons = [
    [1, 'Persnr', 'Name', 'Vorname']
];

var store = new Ext.data.ArrayStore(
    fields: [
        name: 'PrsOid', type: 'int',
        name: 'PersonalNr',
        name: 'Nachname',
        name: 'Vorname'
    ]
);

store.loadData(selectedPersons);

var grid = new Ext.grid.GridPanel(
    store: store,
    columns: 
    [
        
            id       : 'PersonalNr',
            header   : 'PersonalNr', 
            width    : 100,
            sortable : true, 
            dataIndex: 'PersonalNr'
        ,
        
            header   : 'Nachname', 
            width    : 100,
            sortable : true, 
            dataIndex: 'Nachname'
        ,
        
            header   : 'Vorname', 
            width    : 100,
            sortable : true, 
            dataIndex: 'Vorname'
        
    ],
    stripeRows: true,
    autoExpandColumn: 'PersonalNr',
    height: 200,
    //width: 460,
    title: 'Personenauswahl',
    // config options for stateful behavior
    stateful: true,
    stateId: 'grid'
    );

    grid.render('gridSelectedPersons');

【参考方案1】：

你的意思是像底栏这样的东西吗？

var grid = new Ext.grid.GridPanel(
    store: store,
    columns: 
    [
       ....
    ],
    stripeRows: true,
    autoExpandColumn: 'PersonalNr',
    bbar: new Ext.Toolbar(
         renderTo: document.body,
         height: 30,
         items: [
           // begin using the right-justified button container
           '->',
           
             xtype:'button',
             text:'The button',
             //makes the button 24px high, there is also 'large' for this config
             scale: 'medium'
           
         ]
        )

【讨论】：

没错！！现在我有一些设计问题:) 1. 是否可以将按钮放置在右侧？ 2. 我的图标是 24 x 24 像素.. 目前它会在按钮内被切割.. 有没有可能阻止这种情况？ bbar: [ xtype: 'button', 图标: 'Absences/img/addPersons.png', 处理程序: function() showSelectPersonsPopup() ]