Hi there,
I've followed the CMP tutorial and i've got my database data coming into my grid nicely, I wanted to add some action buttons to my grid to trigger some other functions for each row, I managed to get the buttons on there fine, by checking the source of the "package management" grid.
However, for some reason my button actions do not register. I cannot for the life of me figure out why not, I checked the author of "Ext.ux.grid.rowactions" but that does not help either.
The attachment shows my rendered grid, the 2 buttons are there on the right for each row, "View, PDF"
My code is below:
MediContacts.grid.MediContacts = function(config) {
config = config || {};
this.action = new Ext.ux.grid.RowActions({
header:'Actions'
,actions: [{
iconIndex: 'iconactiona' // this is passed through with the data that populates the grid
,text: _('mediContacts.pdf') // this is from the lexicon
},{
iconIndex: 'iconactionb'
,iconCls: 'iconactionb'
,text: _('mediContacts.view')
}]
,widthSlope: 80
});
this.action.on({
action:function(grid, record, action, row, col) {
MODx.msg.alert('Event: action','You have clicked row: <b>'+row+'</b>, action: <b>'+action+'</b>', row, action);
//above is temporary to try and see if anything is returned, nothing is. "action" is always empty
}
});
var cols = [];
cols.push({
header: _('id')
,dataIndex: 'c_ID'
,sortable: true
,width: 30
});
cols.push({
header: _('mediContacts.firstname')
,dataIndex: 'c_firstname'
,sortable: true
,width: 100
});
cols.push({
header: _('mediContacts.lastname')
,dataIndex: 'c_lastname'
,sortable: true
,width: 100
});
cols.push({
header: _('mediContacts.email')
,dataIndex: 'c_email'
,sortable: true
,width: 350
});
cols.push(this.action);
Ext.applyIf(config,{
id: 'mediContacts-grid-mediContacts'
,url: MediContacts.config.connectorUrl
,baseParams: { action: 'mgr/mediContact/getList' }
,fields: ['c_ID','c_lastname', 'c_firstname','c_email']
,paging: true
,pageSize: 10
,remoteSort: true
,anchor: '97%'
,autoExpandColumn: 'c_email'
,columns: cols
,plugins:[this.action]
,tbar:[ "->",{
xtype: 'textfield'
,id: 'mediContacts-search-filter'
,emptyText: _('mediContacts.search...')
,listeners: {
'change': {fn:this.search,scope:this}
,'render': {fn: function(cmp) {
new Ext.KeyMap(cmp.getEl(), {
key: Ext.EventObject.ENTER
,fn: function() {
this.fireEvent('change',this);
this.blur();
return true;
}
,scope: cmp
});
},scope:this}
}
},{
xtype: "button",
id: "mediContacts-filter-clear",
text: _("mediContacts.clear_filter"),
listeners: {
click: {
fn: this.clearFilter,
scope: this
}
}
}]
});
MediContacts.grid.MediContacts.superclass.constructor.call(this,config)
};
Ext.extend(MediContacts.grid.MediContacts,MODx.grid.Grid,{
search: function(tf,nv,ov) {
var s = this.getStore();
s.baseParams.query = tf.getValue();
this.getBottomToolbar().changePage(1);
this.refresh();
},
clearFilter: function () {
var s = this.getStore();
s.baseParams = { action: 'mgr/mediContact/getList' };
Ext.getCmp("mediContacts-search-filter").reset();
this.getBottomToolbar().changePage(1);
this.refresh();
}
});
Ext.reg('mediContacts-grid-mediContacts',MediContacts.grid.MediContacts);
Any help is as always, very appreciated!
