PDA

View Full Version : create component from json



titzu
12 Aug 2009, 1:31 AM
hi,
how can I create a component from a json response?
for example



var fp = new Ext.FormPanel({.....});
and the config from {.....} needs to be loaded from a url.

Thanks in advance,
Titzu

Condor
12 Aug 2009, 1:37 AM
Try the LiteRemoteComponent plugin (http://extjs.com/forum/showthread.php?t=18023) user extension.

steffenk
12 Aug 2009, 1:41 AM
you can use a reader and an url in FormPanel:


var formPanel = new Ext.form.FormPanel({
id: "formPanel",
labelWidth: 60,
url: "loaderUrl",
defaultType: "textfield",
bodyStyle: "padding:10px",
reader: new Ext.data.JsonReader({
root: "data"
},
arrayWithFields),
items: arrayWithFields
});

Condor
12 Aug 2009, 1:46 AM
you can use a reader and an url in FormPanel

That will read the values for existing fields in the form from the server, but not the fields config itself.

For that you have to do a separate Ajax request, decode the result and add the config objects to the formpanel.
You can either do this in you own code or use the LiteRemoteComponent, as I suggested above.

titzu
12 Aug 2009, 1:48 AM
thanks LiteRemoteComponent plugin (http://extjs.com/forum/showthread.php?t=18023)is just what I was looking for

hendricd
12 Aug 2009, 2:58 AM
Just to add...

Ext includes (via ComponentManager) a helper method that will create an instance of Class mapped by an xtype:


var obj = Ext.create(
{
xtype: 'form',
items : [....]
}
);

someTabPanel.add(obj);
someTabPanel.doLayout();

This makes it easy to retrieve remote JSON or derive your own complex component config objects and apply them genericly within your layouts.

trasherdk
13 Aug 2009, 12:25 PM
Hi

This is what im using to build one level in a treepanel:

(the root node sends the request)



$response = "[{
id: 'users-" . md5(uniqid()) ."'
,text: 'Brugere'
,datatype:'users'
,loader: new Ext.tree.TreeLoader(
{
dataUrl:'php/loader.php'
,baseParams: {datatype:'users',task:'load'}
,baseAttrs: {datatype:'users'}
})
},{
id:'customers-" . md5(uniqid()) ."'
,text: 'Kunder'
,datatype:'customers'
,loader: new Ext.tree.TreeLoader(
{
dataUrl: 'php/loader.php'
,baseParams: {datatype:'customers', task:'load'}
,baseAttrs: {datatype:'customers'}
})
},{
id: 'worksheets-" . md5(uniqid()) ."'
,text: 'Værkstedskort'
,datatype:'worksheets'
,loader: new Ext.tree.TreeLoader(
{
dataUrl: 'php/loader.php'
,baseParams: {datatype:'worksheets', task:'load'}
,baseAttrs: {datatype:'worksheets'}
})
}]";


Enjoy

Mogens