PDA

View Full Version : Ext.Component: How to load both html and config to a panel?



ragecf
31 Dec 2013, 1:13 AM
Hi,

I have a panel with toolbar and loader.

A html page will be auto loaded to this panel from back end.
At the same time, I want get some config from back end, such as enable/disable toolbar flag.

How to load the html page and get config from back end at the same time?

Thanks.




Ext.create('Ext.panel.Panel', {
width: 400,
height: 400,
tbar: [
{ xtype: 'button', text: 'Button 1' }
],
loader: {
autoLoad: true,
scripts: true,
renderer: 'html',
scope: this,
url: 'xxx.php',
success: function(response) {
// how to get the config, such as disableToolbar flag?
this.tbar.disable(disableToolbar);
}
}
});


And what is the format of PHP return data?

scottmartin
2 Jan 2014, 5:54 PM
Have a look at the following:



<?php

echo '{
"success": true,
"data": [
{
"toolbar": false
}
]
}';

?>




Ext.onReady(function () {
Ext.widget('panel', {
width: 600,
// height: 400,
title: 'Panel with Component Loader',

tbar: [
{ xtype: 'button', text: 'Button 1' }
],

html: 'This is my panel',

loader: {
url: 'success.php',
renderer: function (loader, response, active) {
var text = response.responseText, // the response
info = Ext.decode(text); // convert to object

loader.getTarget().down('toolbar').setDisabled(!info.data.toolbar);
return true;
},
scripts: true,
autoLoad: true
},
renderTo: Ext.getBody()
});
});