I have been working through building a CMP over the past week or so. Basically I am using it to display and modify data in a custom DB table holding store locations.
I have a grid which works fine for listing, paging and inline updates of the displayed fields (a limited subset of the ones in my database table). I have a attached a tollbar to the grid with buttons to add a new record, edit a selected record from the grid and delete a selected record.
The issue i am seeing is in the delete record functionality. There were two ways I could have done this.
1. I could use the listener function for the delete button to pop up a confirmation dialog and then used an AJAX request to communicate directly with the processor.
2. I could use the listener function to spawn a new window and set a field in the new window to the id for posting to my processor.
As I was trying to get my head around how ExtJS windows work I chose the latter option. I instantiate my delete window object and use ExtJS’s setValue function to set the field value in the window, taking account of whether the window object already exists or not.
When I attempt to delete the first record, things go fine, the field value is successfully set but if I attempt to delete a second record without a page refresh, the value of the field in the Window object is not updated even though I can see via firebug that the new id is being sent to the setValue function.
I attach the relevant code below:
First the toolbar delete button code:
{text:'Delete Selected Shop Location'
,xtype: 'button'
,id: 'locations-delete'
,listeners: {'click': {fn: this.deleteIt, scope: this}}
}
function extending grid functions to return the id of the currently selected record:
,getSelectedId: function() {
var sels = this.getSelectionModel().getSelections();
if (sels.length <= 0)
{
Ext.Msg.alert('McCabe\'s Pharmacy','Click on a location to select it');
return false;
}
else
{
return sels[0].data.id;
}
}
Next the Listener function for the button:
deleteIt: function(btn,e) {
var id = this.getSelectedId();
if(id != false)
{
if (!this.deleteWindow) {
this.deleteWindow = MODx.load({
xtype: 'locations-window-delete'
,listeners: {
'success': {fn:function(r) {
this.refresh();
},scope:this}
}
});
Ext.getCmp('lid').setValue(id);
}
else
{
this.deleteWindow.reset();
Ext.getCmp('lid').setValue(id);
}
this.deleteWindow.show(e.target);
return true;
}
}
And finally the delete window object code:
Locations.window.Delete = function(config) {
config = config || {};
Ext.applyIf(config,{
title:'Delete Location',
url: Locations.config.connector_url
,baseParams:
{
action: 'delete'
,thread: config.thread
}
,blankValues:true
,width: 350
,fields:[{html: '<span style="padding:10px">Are you sure you want to delete this location?</span>'},{xtype:'hidden',id:'lid',name:'lid',value:''}]
})
Locations.window.Delete.superclass.constructor.call(this,config);
};
Ext.extend(Locations.window.Delete,MODx.Window);
Ext.reg('locations-window-delete',Locations.window.Delete);
This occurs consistently across IE, Chrome, FF and Opera on Windows and Chrome, FF and Opera on Ubuntu and to be honest, it is unclear to me if this is a bug in ModExt, ExtJS or my own code that I am too dumb to spot.
Finally, my relevant specs
Running ModX 2.0.4-pl2
ExtJS 3.2.1
Smarty 2.6.19
