Sencha Inc. | HTML5 Apps

Component-Oriented Design in Ext Designer

Published Jul 08, 2011 | The Sencha Dev Team | Tutorial | Easy
Last Updated Feb 25, 2013

Component-Oriented Design in Designer

What is Component-Oriented Design?

Designer makes it easy to use the standard ExtJS component building blocks to assemble your UI. Simply drag a container such as a Viewport or Window onto the canvas and start adding components to it. While that's a fine way to start, for an application of any complexity, you're going to want to break it up into smaller pieces that can be designed, implemented, maintained, and reused separately. This guide focuses on how to do that in Ext Designer. For general information about organizing your Ext JS source code and implementing large applications, see Writing a Big Application in Ext.

Designer provides two mechanisms for facilitating component-oriented design:

A Designer project can contain as many top-level components as you want. When you export the project, separate class files are generated for each top-level component. Ext Designer follows the model of creating extension classes of the Ext components that are preconfigured the for your own purposes. These are the subclasses defined in the generated .ui.js files that are overwritten every time you export your project from Designer. In the corresponding .js files, the preconfigured classes are extended so you can implement your event handlers and custom methods. The .js file for a top-level component is created the first time you export it from your project, but it is not overwritten on subsequent exports.

In addition to generating more manageable code, organizing your Designer project as a collection of top-level components can make it easier to work on them within the designer. If you have large, deeply-nested views, it can take some time to render them on the canvas. Building your main application views using other top-level components will enable you to work on those components individually. That way, you can avoid re-rendering everything when you are just working on one piece. By using linked instances within your main application views, you still can easily view all the pieces in context when you need to.

Note: Currently, top-level components can only be reused within a project. However, in the future Designer will also support saving components to your Toolbox for re-use in other projects, as well importing and exporting custom components.

Adding Top-Level Components

To add a top-level component to your project, you can:

  • Without any components selected, double-click the component in the Toolbox.
  • Drag a component from the Toolbox to the canvas.
  • Select New Component from the Component menu.

Note: Window and Viewport containers can only be added as top-level components.

To change which top-level component is displayed on the canvas, you simply select the component you want to work on in the Components tab.

Creating a Top-Level Menu Component

Currently, in Designer Menus can only be attached to Buttons or other Menu Items—a Menu cannot be created as an individual, top-level component. If you want to create a menu that is a top-level component that can be exported as a separate class:

  1. Create a Button and attach a Menu to it.
  2. Right-click the Menu in the Components tab and choose Promote to Class.

The Menu becomes a top-level component and the Button component contains a link to that class. When you export your project, Designer generates separate .js and .ui.js files for the promoted Menu component.

Note: This technique also works for other components that are designed to be attached to other components, such as Grid columns. You can promote any item in the Components list to a class.

Promoting Child Components

Any component listed in the Components tab can be promoted to a top-level component with the Promote to Class option. When you promote a child component, its place in the component tree is taken by a linked instance of the promoted class. Any changes you make directly on the linked instance will override the attributes of the top-level component. Changes that should be inherited by all linked instances should be made on the top-level component. (For information about how to create additional linked instances of a top-level component, see Reusing a Top-Level Component.)

Note: Dragging a child component to an empty area on the canvas also makes it a top-level component. However, this moves the component to the top level without creating a linked instance.

To promote a child component:

  • Right-click the component in the Components tab and select Promote to Class.




    The promoted component and it's linked instance are shown in the Components tab:


For example, when you start building a new UI in Designer, you might start out with a Viewport for your main application page and drop all of the pieces you need into the Viewport:


If you switch to the code view, you'll see that Designer is going to generate a single class for the Viewport and all of it's subcomponents.


To have Designer generate separate class files for each of the main components in the Viewport, you can use Promote to Class:


Now you can work on the panels within the Viewport separately, and when you export the project Designer will generate separate class files for each panel:


Selecting a Linked Instance's Class

You can select a linked instance to modify the attributes of the instance. To make changes to all instances of a top-level component, you need to select the top-level component.

To select the class associated with a linked instance:

  • Right click the linked instance and choose Select Linked Class. You can also double-click the linked instance on the canvas or in the Components tab to select the linked class.


Setting a Top-Level Component's xtype and Class Name

When you promote a component, an xtype and class name are automatically generated for the new class. You can change the generated values to whatever you want to use and the linked instances will be automatically updated to use the new settings.

To change the generated values:

  1. Select the Top-Level component.
  2. Set the userXType and jsClass attributes in the Component Config inspector.


Reusing a Top-Level Component

When you promote a component to a class, a linked instance is automatically created where the component used to reside. Designer also makes it easy to reuse components within your project by providing a way to explicitly create a linked instance of any top-level component. Whenever you drag a top-level component into a container, you have three options:

  • Moving it to the new location.
  • Creating a copy of it in the new location.
  • Creating a linked instance in the new location.

For example, if you have a dialog that needs to use a standard OK/Cancel toolbar:

  1. In the Components tab, drag the toolbar onto the dialog component.


  2. When prompted, select Link in the Copy Component dialog.




    The Components tab identifies the new child component as a linked instance:


You can also use Duplicate to create a copy of a linked instance. To duplicate a component, simply right-click it and choose Duplicate.

Share this post:
Leave a reply

Written by The Sencha Dev Team

2 Comments

Bobbi

3 years ago

I don’t know who you wrote this for but you helped a botrehr out.

Kayleen

3 years ago

Apparently this is what the eseteemd Willis was talkin’ ‘bout.

Leave a comment:

Commenting is not available in this channel entry.