How do I use the JSON Export

[Northie]

I've been using the trial version of the Ext Designer and have found it very useful as a starting place; and I've learned a lot from it.

There is one thing, however, that is confusing me

When I go to Export, I can view it as Javscript, where a base class is extended with my layout, or there is a pure json version.

Is there any way I can use the json version to generate the layout?

For example, I'm looking at getting PHP to output the JSON that will define the layout. Event handlers will come a bit later

[jarrednicholls]

You can certainly use the JSON output. Simply click "Copy to Clipboard" and you can paste it into your IDE as either an items configuration of another Container, or pass directly to Ext.ComponentMgr.create. Knowledge of the Ext JS API is helpful, and you should read the docs. Below are both usages:

var myPanel = new Ext.Panel({
    renderTo: Ext.getBody(),
    items: [
        // your JSON config
    ]
});

Preferred

var myCmp = Ext.ComponentMgr.create(/* your JSON config */);

[Northie]

Many Thanks,

That makes a lot of sense - I'll try it when I'm back in the office tomorrow

[jarrednicholls]

You're quite welcome. I will say though that, generally speaking, it's recommended (in large & complex projects) to instead create & use sub-classes that package up your configuration and behavior. You can define your own xtype's using Ext.reg() and can create a loadable JSON config from your PHP code that is a configuration of your custom xtype'ed sub-classes, rather than a verbose configuration of the Ext JS components. The biggest advantage besides good practice and reuseability/extensibility, is that your behavior & event handlers can be packaged inside of your sub-classes...which is not the case using straight JSON.

[cbourne]

Hi,

We are looking to do a similar thing to this from our Java Web app. Is there any more documentation or examples on doing this?

I've been looking for hours and this is all I managed to find. I would of expected the ExtJS docs to have provided a description (and examples) of using server created JSON to dynamically build forms.

Regards,

Carl

[gartenmann]

I tried your two Code examples combined with an ajax call:

success: function(response, opts) {
                  var decodedResponse = Ext.decode(response.responseText);
                  var myCmp = Ext.ComponentMgr.create(decodedResponse);
                  this.window.add(myCmp);
                  this.window.doLayout();
               }

While small examples like a form with two fields worked without problems, more complex examples didnt work. Is there a limitation how big a JSON structure can be? It always stops after "Ext.ComponentMgr.create".

[jarrednicholls]

Can you send an example of your JSON output? I'd be able to tell you what went wrong...

[gartenmann]

Thank you for your answer, I just found it myself (at home while taking a shower):
The ajax call and the JSON output were correct. In my JSON file is a grid and some comboboxes and i just forgot to set up the datastores first. Next time i'll go home and take a shower earlier.. saves hours of debugging ;-)

Now I can do "lazy loading" of entire forms in my Ext.window-based application. So it can grow without caring about long initial loading times.

Michael

[jarrednicholls]

Sounds most excellent...that's the beauty of xtypes :-) Good deal.