View Full Version : Noob Ext Designer question : building an app with Ext.windows

23 May 2010, 10:54 PM
I'm very new at this...and am using the trial version (wish I had more time with it).

As part of my testing, I'm trying to create a basic little application.
For now, I'm just trying to have a full screen panel, with a toolbar. On the toolbar, I want to have some buttons that will open up windows (with grid panels, etc)

What I have done so far:

1. created a viewport
2. dropped a panel into the viewport
3. dropped a toolbar into the panel....and added a button to the toolbar
4. dropped a Window container onto the viewport
5. dropped a grid panel into the Window...with a datastore (set to autoload)
6. set the Window's hidden property to true

I've managed to create a handler in the viewport js file, which SHOWS the window when the button (in the panel's toolbar) is clicked.

And, the window displays data from a datastore (php outputting json)


If I don't set the window to "hidden" it shows as soon as the viewport is loaded. Even if the window is set to "hidden" the datastore loads its data as soon as the viewport is loaded. I can show and hide the window...but I'm assuming that the data is always in memory, even if I can't see it.
I'm imagining an app with dozens of windows. I don't want to have all that data in memory all the time...do I?
How do I create and define windows for my application, within designer...and not have them get created within the browser until I click a button (etc)??

Is my general concept correct?: Create a viewport as the "main" component of the application, to handle events, etc? Help and examples would be greatly appreciated.

24 May 2010, 3:57 AM
Hi dcoan,

A data store will automatically load its data if its "autoLoad" property is set to true (checked). So any data store, no matter where it's being "used", will manage whether it loads its data immediately or whether it waits for you to manually invoke a load (using the "load" method).

Your approach sounds fine. I don't typically add a Window inside of anything as they are basically a standalone component. We don't restrict adding Windows to Viewports (although maybe we should), but my approach is that Windows are standalone components that are created on-demand, i.e., inside of a button click handler/action. That way, the Window and its memory/DOM/etc. is not created until it is absolutely necessary. So, my only suggestion would be to move the Window out to be a top-level component in the Designer, just like the Viewport is. It will export with your project as a separate .js file, and you can instantiate and use the custom Window class within your implementation code.

Hope that makes sense. More examples has been requested before and we're looking into providing more examples. We'll also be integrating the Ext JS API Documentation in with the Designer in the near future, but in the meantime you can always check it out (http://www.extjs.com/deploy/dev/docs/) if you have questions on the configuration options or classes.

25 May 2010, 9:37 AM
Thanks for the reply.

How would I go about moving the window(s) outside of the viewport (to the "root" of the project). This doesn't seem to be possible. Once I have a viewport as my "main" element... everything I drop on the page seems to go "within" the viewport. I've tried moving the Window using the COMPONENTS tree as well... it won't let me drag and drop it outside of the viewport.

Originally, I had started with a single panel as my main element (instead of the viewport)

I could then place the windows outside of the Panel (in the root of the project). However, the windows would then get automatically loaded by the xds_index.js file which is marked as:
* This file will be auto-generated each and everytime you export.
* Do NOT hand edit this file.

If there is anyway you could send me an example project file (with all related / exported .html and .js files) that shows an example of :

1. A main application component (ie panel or viewport), with a toolbar
2. One or more windows, which can be opened using buttons in the toolbar of the main component

I would be very happy.

PS. Could I possibly get an extension on my trail period?

25 May 2010, 11:11 AM
Hey dcoan,

You can drag from the Component Tree on the right-side onto the canvas, just around the edge of the canvas (where the Viewport isn't at) and that will move the component out to be a "root" node. Ditto from the Toolbox. You can also de-select the Viewport by clicking around the edge of the canvas, and double-click a component from the Toolbox to add it as a "root" node.

At this time, you are spot on regarding Windows and editing the xds_index.js file directly. I would make a copy of xds_index.html and xds_index.js and use those to preview your changes after exports. We're considering this flaw and are thinking of ways to work around it (e.g., mark certain classes as "non-instantiated", and thus aren't created and called with ".show()" in the xds_index.js file).

20 Jun 2010, 6:10 AM
Hello i was searching for a good way of implementing many Windows and came up with this solution after some Forum search and trial and error: http://www.sencha.com/forum/showthread.php?101999-Tutorial-How-to-build-a-Ext-App.-based-on-ExtDesigner-exports-that-are-dynamicly-loa

11 Aug 2010, 7:58 AM
Hi Jarren!

I am very new in Ext Designer. And I wanted to do you suggested: I have added my Window as a root object. I want to display it when the user clicks a button.
And I have set its hidden and initHidden to true. But it always shown, because all my root level objects are instantiated. I have checked the generated files, and I see the reason, but I can not fix the problem. The generated xds_index.js file contains this:

Ext.onReady(function() {
var cmp1 = new MyViewport({
renderTo: Ext.getBody()
var cmp2 = new EditPanel({
renderTo: Ext.getBody()
var cmp3 = new HitlistPanel({
renderTo: Ext.getBody()
var cmp4 = new GetIdDialog({
renderTo: Ext.getBody()
var cmp5 = new MyWindow1({
renderTo: Ext.getBody()

So when I start my application, all the dialogs are displayed. How can I switch off this behavior?

Regards, Gabor

11 Aug 2010, 9:30 AM
Hi Gabor,

At this time you cannot turn off the auto instantiation, rendering, and showing of any component that is exported by the Designer within the xds_index* files. With that said, the xds_index.js and xds_index.html files are really *not* meant for actual use in a project, but are ways to quickly preview and see your exported components in an actual web browser. You should copy and paste the code to your real project index file(s) and then you can instantiate and use your exported components as you wish.

Nevertheless, we plan to add configuration options to toggle on and off the generation of this code on a per-component basis - in a near future release.

I hope that helps! Thanks.

13 Dec 2011, 1:39 PM
I just read this topic and I'm really interested in this new feature. Is there any new information about it when it will be available?

13 Dec 2011, 3:52 PM
I just read this topic and I'm really interested in this new feature. Is there any new information about it when it will be available?

Designer 2.0 has morphed this into a feature fit for building full blown applications. Rather than just displaying all visual components which have been created in the designer, you will now be able to mark the specific component you want to use as your entry point to the application.

14 Dec 2011, 12:30 AM
Sounds great! Is there any release date planned so far?

14 Dec 2011, 2:13 AM
Sounds great! Is there any release date planned so far?

No release date for the public beta/ga. We are currently in a private beta (which is full) with lots of active development.