Question

I have a grid which show records from DB. I have the columns – one for the name of the record and in the second I want to put a button and add some logic after that. I have this for the grid:

Ext.create('Ext.grid.Panel', {
        id: 'id-procedures',
        title: 'Documents',
        store:'Procedures',
        columns: [{
            header: 'Title'  
            dataIndex: 'name', 
            width: 500
        },{
            header: 'Open',
            renderer: this._renderOpenProcedure,
            width:50
        }),

And then I try this for adding the buttons dynamically:

_renderOpenProcedure: function() {

    var button = Ext.create('Ext.Button', {
            text: 'Click me',
            renderTo: Ext.getBody(),
                handler: function() {
            alert('You clicked the button!')
                            }
                        });
            return  button;
    },

But what I get in the column is this:

[object Object]

How can this be done?

Answer 1

Take a look here: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Action

Don’t need to render buttons into cells, there is already special type of column for this.