How to add a custom button on grid and pass row values?

Question

I would like to add a button to a grid so the user can see the time sheet entry values for a given task by passing in the values from the button's row. The grid loads just fine until I add the button to columnCfgs. When the button is there I get a "Uncaught TypeError: Object [object Object] has no method 'setSortState'" error.

    {text:'View Time',
        xtype: 'button',
        listeners: {
            click: Ext.bind(this._viewTimeEntryValues(projectId, taskId), this)
        }
    },

Full Grid Code:

this.grid = this.add({
    xtype: 'rallygrid',
    model: model,
    defaultSortToRank: true,
    showRowActionsColumn: false,
    columnCfgs: [
        {text:'View Time',
            xtype: 'button',
            listeners: {
                click: Ext.bind(this._viewTimeEntryValues(projectId, taskId), this)
            }
        },
        {text:'Id',             dataIndex:'FormattedID'},
        {text:'Name',           dataIndex:'Name'},
        {text:'Project',        dataIndex:'Project'}
    ],
    storeConfig: {
        context: {
            projectScopeUp: false,
            projectScopeDown: true
        },
        filters: this._activeFilters
    }
});

• How do you add a custom button to a grid?
• How do you pass values from the button's row?

Answer 1

I used a button in code in this github repo. Here is grid with a button:

var g = Ext.create('Rally.ui.grid.Grid', {
    id: 'g',
    store: store,
    enableRanking: true,
    columnCfgs: [
          {text: 'Formatted ID', dataIndex: 'FormattedID'},
          {text: 'Name', dataIndex: 'Name'},
          {text: 'State', dataIndex: 'State'},
          {text: 'Last Revision',
            renderer: function (v, m, r) {
                var id = Ext.id();
                Ext.defer(function () {
                    Ext.widget('button', {
                        renderTo: id,
                        text: 'see',
                        width: 50,
                        handler: function () {
                            that._getRevisionHistory(data, r.data);
                        }
                    });
                }, 50);
            return Ext.String.format('<div id="{0}"></div>', id);
            }

        }
   ],
   height: 400,
});