PDA

View Full Version : Loadin form component at runtime depending on store data



rupamkhaitan
3 Apr 2013, 12:33 AM
Hi,

I am new with extjs and i have a requirement where depending on data i need to show the department.
Basically i know that there will be max 3 depts, but in some case i might get 1 or 2. So i made three different page for dept component.

So I need help on loading a form page depending on data, how should i design my json file?

Please find the screenshot attached for the demo 42868

slemmon
4 Apr 2013, 12:55 PM
So, in this scenario the Dept tab is a form panel and you'll have 1-3 form field components in the form depending on the JSON database reponse? Does it need to be form field components necessarily or could it be just HTML?

If it can be html you might set a tpl (http://docs.sencha.com/ext-js/4-2/#!/api/Ext.panel.Panel-cfg-tpl) on the Dept panel that describes the layout of the HTML and then use the update (http://docs.sencha.com/ext-js/4-2/#!/api/Ext.panel.Panel-method-update)() method of the panel to fill in the template (http://docs.sencha.com/ext-js/4-2/#!/api/Ext.panel.Panel-cfg-tpl) (tpl (http://docs.sencha.com/ext-js/4-2/#!/api/Ext.panel.Panel-cfg-tpl)) on the panel. By doing that you'll just pass the JSON data directly to the form's update (http://docs.sencha.com/ext-js/4-2/#!/api/Ext.panel.Panel-method-update)() method.

Here's a simple tpl/update() example:


var data = [{
department: 'Sales'
, user: 'Michael'
, count: 2
}, {
department: 'Marketing'
, user: 'Holly'
, count: 3
}];


var resultsPanel = Ext.create('Ext.panel.Panel', {
title: 'Results',
width: 600,
height: 400,
renderTo: Ext.getBody(),
tpl: new Ext.XTemplate(
'<tpl for=".">'
, '<h2>{department}</h2>'
, '<table style="width:100%;"><tr>'
, '<td>User: {user}</td>'
, '<td>Count: {count}</td>'
, '</tr></table>'
, '</tpl>'
)
, tbar: [{
text: 'Add Data'
, handler: function (btn) {
btn.up('panel').update(data);
}
}]
});