PDA

View Full Version : Why is the event I fire in my grid panel action column handler not heard by grid.



xjscrafter
23 Jan 2014, 8:19 PM
As seen in the code snippet below, I have an ExtJS 4 grid panel with an action column and two items, icons. The icon handlers have the grid fire a custom event.

But the event is never heard in the controller?


items : [{
xtype : 'gridpanel',
itemId : 'settinggrid',
store: 'myStore',
columns : [{
xtype : 'gridcolumn',
width : 200,
dataIndex : 'name',
text : 'Name'
}, {
xtype : 'actioncolumn',
text : 'Action',
align: 'center',
items: [{
icon: './images/atlas/editIcon.png',
handler: function(grid, rowIndex, colIndex, item, event, record, row) {
grid.fireEvent('myIconClick', item, record, 'edit');
}
},
{
icon: './images/atlas/refreshIcon.png',
handler: function(grid, rowIndex, colIndex, item, event, record, row) {
grid.fireEvent('myIconClick', item, record, 'refresh');
}
}
]
}]
}]


Ext.define('SettingController', {
extend : 'Ext.app.Controller',


models : [ 'MyModel' ],
stores : [ 'MyStore' ],
views : [ 'SettingsTabs' ],


init : function() {
var me = this;
me.control({
"settingstabs":
"settingstabs #settinggrid" :
{
'vCenterIconClick': me.onVcenterIconClicked,
}
});
},

onVcenterIconClicked: function() {
alert("clicked");
}
}

evant
23 Jan 2014, 8:37 PM
That's a syntax error, it should throw an error in the console.

xjscrafter
23 Jan 2014, 8:40 PM
Where is the syntax error? Its just a code snippet. Functionally should it work? Is there something I'm doing wrong here? Thanks for your help Evan!

evant
23 Jan 2014, 8:58 PM
me.control({
"settingstabs":
"settingstabs #settinggrid" :
{
'vCenterIconClick': me.onVcenterIconClicked,
}
});


That's invalid. Your controller should be throwing a syntax error.

xjscrafter
23 Jan 2014, 9:04 PM
I have this, should it work?


me.control(
{
"settingstabs #settinggrid" :
{
'vCenterIconClick': me.onVcenterIconClicked
}
}
);

xjscrafter
23 Jan 2014, 9:17 PM
This works:


me.control(
{
"settingstabs #settinggrid actioncolumn": {
'vCenterIconClick': me.onVcenterIconClicked
}
});


handler: function(grid, rowIndex, colIndex, item, event, record, row) {
this.fireEvent('vCenterIconClick', item, record, 'edit');
}

In this case "this" is the action column.