PDA

View Full Version : [MVC] How to get grid action column with component query on this.control()



rafaelrp
14 Jan 2014, 2:42 AM
Hello!

How can i get grid actioncolumn with this.control function in my controller?
i've created a fireEvent on the handler of the actioncolumn but i'm not sure if is the right way...

code:


this.control({
'view button[action=open]': {
click: this.open
},
'list': { // grid view
itemdblclick: this.editarGrupo
}
});


Thanks! ~o)~o)

Legolas
14 Jan 2014, 3:44 AM
Hi rafaelrp,

I use the UX Ext.ux.grid.column.ActionButtonColumn (https://github.com/lucianlature/Ext.plugin.extjs4.ActionButtonColumn) like below:
Grid


{
xtype:'actionbuttoncolumn'
,width: 60
,items: [{
iconCls: 'icon-edit'
,tooltip: 'Edit'
,action: 'edit'
}]
}

Controller


init: function() {
var me = this;


me.control({
'mygridalias actionbuttoncolumn[action=edit]': {
click: me.onClickActionBtnEdit
}
});
},

I saw this tip in this post "ExtJS 4: Problema com Grid ActionColumn + MVC (http://www.loiane.com/2012/03/extjs-4-problema-com-grid-actioncolumn-mvc/)".

rafaelrp
15 Jan 2014, 5:04 AM
but I believe that should be a way to get this actioncolumn with the component query, like the way we use to get the button 'button[action=save]'.

palakurthivishal
15 Jan 2014, 8:49 AM
Attaching event by component query : Ext.ComponentQuery.query('yourGridAlias actionColumn[seletor=value]').on('anyEvent', function(){ // your logic here }); Or by pre-attaching event on init : this.control({ 'yourGridAlias actionColumn[selector=value]' : { 'anyEvent' : function(){ //logic goes here } } }); I guess the second way is the one what you were in need of.

rafaelrp
15 Jan 2014, 5:02 PM
I've tried this code in init function but not worked

Controller:


'list actionColumn[action=delete]': {
click: this.delete
}


View:


{
xtype: 'actioncolumn',
action: 'delete',
width: 24,
items: [
{
icon: 'resources/imagens/16x16/delete.png'
}
]
}

rafaelrp
15 Jan 2014, 5:04 PM
Worked with lowercaseactioncolumn[action=delete]

rafaelrp
15 Jan 2014, 5:08 PM
Have another problem now, can i get the selected row record in this action?

palakurthivishal
15 Jan 2014, 11:01 PM
Hello rafaelrp,

My apologies for the incomplete solution, We generally place items inside actioncolumn, which are by default buttons, like this


{ xtype:'actioncolumn', width:50, // These items are by default buttons items:[{ icon:'extjs/examples/shared/icons/fam/cog_edit.png',// Use a URL in the icon config tooltip:'Edit', handler:function(grid, rowIndex, colIndex){var rec = grid.getStore().getAt(rowIndex); alert("Edit "+ rec.get('firstname'));}},{ icon:'extjs/examples/restful/images/delete.png', tooltip:'Delete', handler:function(grid, rowIndex, colIndex){var rec = grid.getStore().getAt(rowIndex); alert("Terminate "+ rec.get('firstname'));}}]}so when u want to query for the row which was clicked, query for the button like this which gives you the grid's rowIndex and columnIndex. Then you can perform actions accordingly on the grid.

Ext.ComponentQuery.query('yourGridAlias actioncolumn button[selector=value]').on('click', function(grid, rowIndex, colIndex){});