Application Design at bigger apps with ExtDesigner?

[Zerogiven]

Hi all :)

I tried to play a bit with the designer and i really like it. it's cool to make just the user interface with simple clicks :D

i already understood how the ref and autoref works that i can call them with this as reference.
for example i already did this:


MyFormPanel = Ext.extend(MyFormPanelUi, {
initComponent: function() {
MyFormPanel.superclass.initComponent.call(this);
this.mySubmit.on("click", this.onSubmitForm);
}
// ... and so on
});

that was easy... ;)
i've two files MyFormPanel.js and MyFormPanel.ui.js...


so now for example i made a bigger application with the Designer like
a Viewport
- with 1 Formpanel (north)
- with 1 Treepanel (west)
- with 1 Panel (center)

All of them have events and other components.

I also got from the designer 2 files, what is ok at the moment cause i did no logic code just the ui. But how does i have to "split" my files (components). I can't make for example 20 events just in the main MyFormPanel.js file.


without the designer i did it normally like this:

Ext.ns('MyViewPort');

MyViewPort = Ext.extend(Ext.Viewport, {
/* DOING VIEWPORT CONFIGS */
initComponent: function() {
/* SETTING THE ITEMS ... for example item: [ xtype: 'myformpanel' ] */

MyViewPort.superclass.initComponent.call(this);
}
});


MyViewPort.formPanel = Ext.extend(Ext.form.FormPanel, {
/* DOING FORMPANEL CONFIGS */
initComponent: function() {
MyViewPort.formPanel.superclass.initComponent.call(this);
}
});
Ext.reg('myformpanel', MyViewPort.formPanel);


I don't get it how i can make it without mixing ui with logic code...

greetz
Chris

P.S.: Thanks to jacob.andresen for the ExtBeer example... it helped me a lot understanding the ref/autoref function at first

[firefoxSafari]

Hi Chris :)

I think the interface will eventually improve, but there are ways now of working at a more granular level now.

Technique 1:

Forgetting about the Export Project button for the moment, if you go to the Code view you have the option of Export Code to Disk at the top. What code gets displayed in the Code view is relative to what you have selected in the Component tree on the right. When you Export to Disk, you export a ui.js file for just what you have selected. So, one strategy could be doing this for each top-level component you are interested in. You would then have to code the event handlers / overrides in separate files. One main drawback with this is that you might have to hack up the code on the parent container considerably. I would recommend using this technique to export your FormPanel, TreePanel, and Panel and then manually coding another file for the most top-level container (Viewport). Manually coding the Viewport might seem like a pain, but you can just use the Copy Code to Clipboard for the entire project and then edit what you don't need.

Technique 2:

There is another option that avoid some manual export, but you have to be careful about things getting out of synch. You can have more than one top-level root component in a project. You accomplish this by going to Component->New Component at the top menu bar. So, you could make separate top-level components for your FormPanel, TreePanel, and Panel. You can then Export Project and you should have separate files for everything. Once again, the problem is the top-level Viewport. You could create this in the Designer. If you drag the other top-level components onto it, the Designer will ask you if you want to copy them. Clicking yes will make a copy for you. You then have to remember to edit the original top-level component and not the copy you put in the Viewport if you want to make changes - that's what I mean by things getting out of synch. Also, you'd still have to hack the code on the exported Viewport so it used references to the other classes rather than a copy of them.

So, there's not a 100% great way to do this yet, but there are workable options. The Ext team has consistently said that a (hopefully near future) release will support importing user created components. Notice that one of the Designer specific properties for top-level components is userXType. Presumeably, once this is all in place, you should be able to use Technique 2 as described above have have a real reference to the other top-level components in the Viewport by means of this userXType.

[Zerogiven]

Ok i see... so i think technique 2 seems like the best way for not mixing up the ui code and the logic parts of an application. it's not very friendly but ok.. :)

Hope there will be a better handling in future releases ;)

thanks at all for your very helpful answer!

greetz
Chris

[aconran]

Hey Guys, we have some features upcoming which will allow you to promote component configurations at an arbitrary level to a component that will alleviate many of these problems.

Currently the designer is excellent at building top level components which you can aggregate via your own code. It is not so good at aggregating all of these top level components into a single application. This feature will resolve the problem you are currently facing.

[Zerogiven]

Oh thanks for the info! :)

Maybe you know the date when the features will come? :D
Cause i think for my plans i'll wait for them B)

greetz
Chris