CODEWITHSUNDEEP
buttongridextjs3gridpanel
user886091
user886091

Reputation: 25

ExtJS 3.4 add button at the bottom of a grid

I'm new to ExtJS and try to add a button at the bottom of the grid. This button will open a modal dialog to select more persons. I don't know how to add this button after the grid. Do I have to use another component than GridPanel?

Can somebody help me?

The code looks like:

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

Upvotes: 1

Views: 5789

Answers (1)

nscrob
nscrob

Reputation: 4493

Do you mean something like a bottom bar ? 

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

Upvotes: 3

Related Questions