Here's my code, it's the basic modx tabs for the CP and it renders correctly. At the bottom are 2 ajax requests that are supposed to update the content in each tab and the first tab updates, but it seems like the ajax calls are made before the second tab exists, so it can't find that element to update.
Is there a way to add a callback on the Ext.apply or something along those lines so that it waits until the tabs are created before it does the ajax calls?
FoxyOrders.panel.Home = function(config) {
config = config || {};
Ext.apply(config,{
border: false
,baseCls: 'modx-formpanel'
,cls: 'container'
,items: [{
html: '<h2>Foxy Orders</h2>'
,border: false
,cls: 'modx-page-header'
},{
xtype: 'modx-tabs'
,defaults: { border: false ,autoHeight: true }
,border: true
,items: [{
title: 'Pending Orders'
,defaults: { autoHeight: true }
,items: [{
html: '<div id="pending_orders"><p>Loading Orders...</p></div>'
,border: false
,bodyCssClass: 'panel-desc'
}]
},{
title: 'Completed Orders'
,defaults: { autoHeight: true }
,items: [{
html: '<div id="completed_orders"><p>Loading Orders...</p></div>'
,border: false
,bodyCssClass: 'panel-desc'
}]
}]
}]
});
FoxyOrders.panel.Home.superclass.constructor.call(this,config);
};
Ext.extend(FoxyOrders.panel.Home,MODx.Panel);
Ext.reg('foxyorders-panel-home',FoxyOrders.panel.Home);
var pending_orders = function (response) {
pending_message = Ext.get('pending_orders');
pending_message.update(response.responseText);
}
var completed_orders = function (response) {
completed_message = Ext.get('completed_orders');
completed_message.update(response.responseText);
}
Ext.Ajax.request({
url: '/assets/components/foxyorders/pending.php',
success: pending_orders,
failure: function () { console.log('failure');}
});
Ext.Ajax.request({
url: '/assets/components/foxyorders/completed.php',
success: completed_orders,
failure: function () { console.log('failure');}
});