Question

Basically my problem is splited into 2 parts. There are examples in the ExtJS 4 examples for extending a grid. but they are not working 🙁 I’m using ExtJS 4 in the new recommended mvc application pattern.

1. Add a first column into a grid with buttons for editing and deleting
2. The grid is the first tab of a tabpanel. If the edit button is pressed a new tab should be created and bound to the store.
3. A new button should open a tab with a empty form bound to a store

Has anyone experiences with this? Any working code examples? I appreciate your help! Thx!

Answer 1

I have found a way to add buttons (or more correctly images).

So you need add new column with xtype: ‘actioncolumn’, and describe each button (image) as item.

E.g.:

...
columns: [
            {
                text: 'Name',
                dataIndex: 'registrant_name',
                flex: 1
            }, {
                xtype: 'actioncolumn',
                width: 40,
                items: [{
                    icon: 'path_to_img',
                    handler: function(grid, rowIndex, colindex) {
                        alert('click!');
                    }
                }]
            }
        ],
...

Also link on doc page:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Action