Add button to grid in ExtJs

Question

Hi everyone,

I'm very new with Extjs. Does any one know how to add button to each row of grid in Extjs? Please give me some example.

Thanks

Answer 1

you should use a custom renderer but I advice you to use a toolbar button instead more clean.

If you wanna have more reference here come the documentation of the ColumnModel class.

anyway it would give something like that

var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
            {header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
            {header: 'Change', width: 75, sortable: true, renderer: change, dataIndex: 'change'},
            {header: '% Change', width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
            {header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'},
            {header: 'action', width: 85, sortable: false, renderer: function(val){ return '<input type="button" value="toto" id="'+val+'"/>'; }, dataIndex: 'somefieldofyourstore'}


        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height: 350,
        width: 600,
        title: 'Array Grid',
        // config options for stateful behavior
        stateful: true,
        stateId: 'grid'        
    });

this snippet is an extract of this sample.

For the toolbar way I advice you, just add a button to the toolbar of the GridPanel and hook the SelectionModel so you can disable the buttons when the user doesn't select any row.

Answer 2

Actualy Ext.Buttons in a row cell is as far as i can tell impossible with the current setup of Ext. Ofcourse it is actually possible to render the HTML of a button in the div of the cell but i actually think that would be a bad idea.

A better way is to implement Saki's rowactions plugin which makes it really easy to add buttons/actions to each row.

http://rowactions.extjs.eu/