Не так давно начал ознакомление с замечательным Javascript Фреймворком ExtJS, главной отличительной особенностью которого является больше количество готовых UI компонентов. Компоненты по умолчанию все стилизованы, поэтому нет необходимости заниматься версткой и рисованием, только JavaScript программирование.

Теперь о задачи которая передо мной встала. Нужно было в компонент Ext.grid добавить в каждую строчку (создать колонку) кнопок при нажатии на которую происходит вызов окна с параметрами. Опционально можно сделать в этом поле любой объект, допустим кнопку которая удаляет текущую строку.

Создадим класс который расширит возможности Ext.grid.RowSelectionModel класса строк Ext.grid. Я назвал этот класс Ext.ux.grid.Goto

Ext.ns('Ext.ux.grid');

Ext.ux.grid.Goto = Ext.extend(Ext.grid.RowSelectionModel, {
width: 30,
sortable: false,
dataIndex: 0, // Нужно задать полю, потому как в родителе этот параметр не может быть пустым

menuDisabled: true,
fixed: true,
id: 'deleter',

initEvents: function(){
Ext.ux.grid.Goto.superclass.initEvents.call(this);
this.grid.on('cellclick', function(grid, rowIndex, columnIndex, e){
//Проверяем, что нажали именно на нашу ячейку Ext.grid
if(columnIndex==grid.getColumnModel().getIndexById('deleter')) {
var record = grid.getStore().getAt(rowIndex);
//Получаем параметры для вызова окна, это данные из текущей строки Ext.grid
var CampaignStepID = record.get('CampaignStepID');
var SourceID = record.get('SourceID');
var StepName = record.get('CampaignStepName');
//Вызываем функцию которая создаст окно с параметрами
getCampaignStepCard(CampaignStepID, SourceID, StepName, this.desktop);
}
});
},

//Этот метод позволяет нам нарисовать  в каждой ячейке нашей колонки, что мы хотим
renderer: function(v, p, record, rowIndex){
return '<div class="silk-goto" type="button" style="width: 16px; height: 16px;cursor:pointer;"></div>';
}
});

Далее нам необходимо прицепить к Ext.grid наш плагин.
Создаем новый объект

//Добавляем плагин который активирует кнопку перехода в гриде
var GotoButton = new Ext.ux.grid.Goto();

var CampaignListCm = new Ext.ux.grid.LockingColumnModel({
// specify any defaults for each column
columns:
[
{
id: 'id',
header: 'ID',
dataIndex: 'ID',
menuDisabled: false,
hideable: false,
hidden: true,
// use shorthand alias defined above
editor: new Ext.form.TextField({
allowBlank: false
})
},
{
id: 'SourceID',
header: 'SourceID',
dataIndex: 'SourceID',
menuDisabled: false,
hideable: false,
hidden: true,
// use shorthand alias defined above
editor: new Ext.form.TextField({
allowBlank: false
})
},
GotoButton //Наша дополнительная колонка
]
});

А в сам Ext.grid добавляем наш плагин как selModel

var grid = new Ext.grid.EditorGridPanel({
id: 'CampaignSourceID',
store: CampaignSourceList,
cm: CampaignListCm,
selModel: GotoButton,
stripeRows: true,
columnLines:true,
region: 'center'
});

Смотрим на полученный результат

Row in Grid