Sencha by Robert Brierley

Sencha

Component-Oriented Design in Designer

Sencha, Inc. www.sencha.com 525 University Avenue, Suite 23 Palo Alto, CA 94301

Component Oriented Design in Designer

Contents What is Component-Oriented Design?........................................................................................ 1 Adding Top-Level Components.................................................................................................. 2 Creating a Top-Level Menu Component................................................................................. 2 Promoting Child Components.................................................................................................... 2 Selecting a Linked Instance's Class...................................................................................... 5 Setting a Top-Level Component's xtype and Class Name......................................................... 5 Reusing a Top-Level Component............................................................................................... 6

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 Designer. For general information about organizing your ExtJS source code and implementing large applications, see Writing a Big Application in Ext. Designer provides two mechanisms for facilitating component-oriented design: ď Ž

You can explicitly add components to your project as top-level components. For example, you can add top-level containers to your project for each page and dialog in your UI.

ď Ž

You can make any child component into a top-level component with the Promote to Class feature. This makes it easy to refactor and reuse components as your design comes together.

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. 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.

Component Oriented Design in Designer

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.

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.

Component Oriented Design in Designer

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:

Component Oriented Design in Designer

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:

Component Oriented Design in Designer

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.

Set the userXType and jsClass attributes in the Component Config inspector.

Component Oriented Design in Designer

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.

When prompted, select Link in the Copy Component dialog.

Component Oriented Design in Designer

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.