Once again, ExtJS has thrown me for yet another loop. It seems as though each time I begin to think I understand it..it likes to slap me in the face with a nice "haha" moment that wastes an entire day or two of debugging.
So the issue I'm facing is that no listeners appear to be firing when using a modx-combo-browser within a panel. If I place one in a
window, the listeners fire as expected...but not outside of a window.
Also of note is that this only seems to effect the xtype "modx-combo-browser". I tested this on just the "combo" xtype and the listeners functioned correctly.
Maybe I'm just missing something in my code?
jShop.panel.Category = function(config) {
config = config || {};
Ext.apply(config,{
url: jShop.config.connectorUrl
,baseParams: {
action: (jShop.record) ? 'mgr/category/update' : 'mgr/category/create'
,id: (jShop.record) ? jShop.record.id : 0
}
,layout: 'fit'
,id: 'jshop-panel-category'
,border: false
,defaults: {
autoHeight: true
,deferredRender: false
}
,deferredRender: false
,forceLayout: true
,baseCls: 'modx-formpanel'
,width: '98%'
,items: [{
xtype: 'modx-panel'
,width: '100%'
,items: [{
layout: 'form'
,cls: 'modx-panel'
,labelWidth: 175
,labelAlign: 'top'
,border: false
,bodyStyle: { background: 'transparent' ,padding: '10px' }
,defaults: {
width: '80%'
,border: false
,layout: 'form'
}
,items: [{
layout: 'column'
,border: false
,items: [{
columnWidth: .6
,border: false
,layout: 'form'
,items: [{
xtype: 'hidden'
,name: 'id'
},{
xtype: 'textfield'
,fieldLabel: _('js.name')
,name: 'name'
,anchor: '100%'
},{
xtype: 'textarea'
,fieldLabel: _('js.description')
,name: 'description'
,anchor: '100%'
}]
},{
columnWidth: .4
,border: false
,layout: 'form'
,items: [{
xtype: 'modx-combo-browser'
,fieldLabel: _('js.category_image')
,name: 'image'
,anchor: '100%'
,source: jShop.config.mediasourceId || 1
,id: 'supercatimg'
,hideSourceCombo: true
,listeners: {
'select': {fn:function(data) {
if (Ext.isEmpty(data.thumb)) {
alert('No data.thumb');
console.log(data);
} else {
alert('Yes data.thumb');
console.log(data);
}
},scope:this}
,'change': {fn:function(cb,nv) {
alert('We have changed');
console.log(nv);
this.fireEvent('select',{
relativeUrl: nv
,url: nv
});
},scope:this}
}
}]
}]
}]
}]
}],
listeners: {
'success': function (res) {
if (jShop.record) {
MODx.msg.status({title: _('save_successful'), delay: 3});
} else {
window.location.href = '?a='+MODx.request['a']+'&action=category&id='+res.result.object.id;
}
}
}
});
jShop.panel.Category.superclass.constructor.call(this,config);
};
Ext.extend(jShop.panel.Category,MODx.FormPanel);
Ext.reg('jshop-panel-category',jShop.panel.Category);
I've tried the following in the Firebug console...
Ext.getCmp('supercatimg').hasListener('select'); // returns true
Ext.getCmp('supercatimg').hasListener('change'); // returns true
Ext.getCmp('supercatimg').fireEvent('select'); // returns false
Ext.getCmp('supercatimg').fireEvent('change'); // returns true and successfully executes change code.
I'm probably just a moron and am missing something...? Any direction would be greatly appreciated!
