How to get actioncolumn icon component? - extjs

Question

I'm searching two days and can't find how to get access to actioncolumn component (NOT html) on rowselect. I need to set event on icon click using Saki's component communication technique (source).
My column looks like:
I found a way how to show/hide buttons on change row selection (this code uses in GridPanel):
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
beforerowselect: function(grid, rowIndex, record) {
// 7 is the last cell index
var cell = grid.grid.getView().getCell( rowIndex, 7 );
//select icons in cell
var icons = Ext.DomQuery.select('.x-action-col-icon', cell);
//for each DOM element
Ext.each(icons, function(icon, index) {
currentIcon = Ext.get(icon);
//if not 1st button
if (index !== 0) {
//Delete class that hides. Class 'x-hidden' also works
currentIcon.removeClass('x-hide-display'); //show icon
}
});
},
rowdeselect: function(grid, rowIndex, record) {
// 7 is the last cell index
var cell = grid.grid.getView().getCell( rowIndex, 7 );
//select icons in cell
var icons = Ext.DomQuery.select('.x-action-col-icon', cell);
//for each DOM element
Ext.each(icons, function(icon, index) {
currentIcon = Ext.get(icon);
//if not 1st button
if (index !== 0) {
//Delete class that hides. Class 'x-hidden' also works
currentIcon.addClass('x-hide-display'); //show icon
}
});
}
}
});
Ok. Next. I want to show another window on click (set click event). But I don't know how to get access from Window/Viewport:
//get items
this.loanGrid = this.items.itemAt(0);
this.documentsGridWindow = this.items.itemAt(2);
//add events
this.loanGrid.on ({
scope: this,
afterrender: function() {
selModel = this.loanGrid.getSelectionModel();
selModel.on({
scope: this,
rowselect: function (grid, rowIndex, keepExisting, record) {
//HOW TO GET actioncolumn 2nd button here???
}
});
}
});
I also tried to set id to this icon on beforerowselect, but on rowselect this code Ext.getCmp('icon-id') returns undefined.
up() and down() functions not helps me too =(
HELP please! =)
p.s. Sad, but Ext.ComponentQuery works only from ExtJS 4.

Answer 1

So finally I re-wrote some parts of my application.
First we need to add some options to actioncolumn:
dataIndex: 'action',
id: 'action',
Grid row buttons show/hide now is independent of actioncolumn move:
/**
* buildSelectionModel
*/
buildSelectionModel: function() {
var sm = new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
scope: this,
rowselect: function(grid, rowIndex, record) {
this.toggleFirstButtonShowState(grid.grid, rowIndex);
},
rowdeselect: function(grid, rowIndex, record) {
this.toggleFirstButtonShowState(grid.grid, rowIndex);
}
}
});
return sm;
},
/**
* toggleFirstButtonShowState
*/
toggleFirstButtonShowState: function(grid, rowIndex) {
//'action' is data index of
var colIndex = this.getColumnIndexByDataIndex(grid, 'action');
console.log(colIndex);
// 7 is the last cell index
var cell = grid.getView().getCell( rowIndex, colIndex);
//select icons in cell
var icons = Ext.DomQuery.select('.x-action-col-icon', cell);
//for each DOM element
Ext.each(icons, function(icon, index) {
currentIcon = Ext.get(icon);
//if not 1st button
if (index !== 0) {
//Show/delete class that hides. Class 'x-hidden' also works
currentIcon.toggleClass('x-hide-display'); //show/hide icon
}
});
},
getColumnIndexByDataIndex: function(grid, dataIndex) {
//columns
gridColumns = grid.getColumnModel().columns;
for (var i = 0; i < gridColumns.length; i++) {
if (gridColumns[i].dataIndex == dataIndex) {
return i;
}
}
Viewport part:
//get selection model
selModel = this.loanGrid.getSelectionModel();
selModel.on({
scope: this,
rowselect: function (grid, rowIndex, keepExisting, record) {
//get second icon in actioncolumn
var icon = grid.grid.getColumnModel().getColumnById('action').items[1];
//save context
var self = this;
//add handler by direct set
icon.handler = function(grid, rowIndex, colIndex) {
//open documents window
self.documentsGridWindow.show();
};
}
});
All works as expected!