ExtJS 3.4 кнопка добавления внизу сетки - PullRequest
1 голос
/ 28 марта 2012

Я новичок в 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 Ответ

3 голосов
/ 28 марта 2012

Вы имеете в виду что-то вроде нижнего бара?

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'
           }
         ]
        })
...