Sencha Inc. | HTML5 Apps

Reusable and Customizable Components in Ext Designer

Published Jul 07, 2011 | Jarred Nicholls | Tutorial | Easy
Last Updated Jul 11, 2011

This Tutorial is most relevant to , 1.x.

Reusable and Customizable Components in Ext DesignerThe Ext JS architecture promotes component-oriented development by providing the necessary base classes and utility functions to build fully independent software components, with respect to object-orientation and separation of concerns in your projects. Ext Designer embraces this development model by generating proper Ext JS component classes and follows the conventions and style of the framework itself. Every root-level component in a Designer project is exported into two JavaScript files:

<class name>.ui.js - this file contains the base-class that has all of the UI configurations and child items applied within the Designer interface. This file is overwritten on every project export and is therefore not meant to be edited directly.

<class name>.js - this file contains a sub-class of the base-class in the .ui.js file. This file is not overwritten on subsequent project exports and is where you add business logic, component behavior, event handlers, etc.

So what does this look like in practice? Let's create a Login Form as an example, consisting of a FormPanel with some TextFields and a Button.

LoginForm.ui.js

LoginFormUi = Ext.extend(Ext.form.FormPanel, {
    title: 'Login',
    width: 340,
    height: 160,
    padding: 10,
    monitorValid: true,
    initComponent: function() {
        this.defaults = {
            anchor: '100%',
            allowBlank: false
        };
        this.initialConfig = Ext.apply({
            url: '/user/login',
            standardSubmit: true
        }, this.initialConfig);
        this.items = [
            {
                xtype: 'textfield',
                fieldLabel: 'Email',
                name: 'email',
                vtype: 'email'
            },
            {
                xtype: 'textfield',
                fieldLabel: 'Password',
                inputType: 'password',
                name: 'password'
            },
            {
                xtype: 'checkbox',
                boxLabel: 'Remember Me',
                name: 'remember_me'
            }
        ];
        this.fbar = {
            xtype: 'toolbar',
            items: [
                {
                    xtype: 'button',
                    text: 'Login',
                    formBind: true,
                    type: 'submit',
                    ref: '../btnLogin'
                }
            ]
        };
        LoginFormUi.superclass.initComponent.call(this);
    }
});

LoginForm.js

LoginForm = Ext.extend(LoginFormUi, {
    initComponent: function() {
        LoginForm.superclass.initComponent.call(this);
    }
});

This split UI and Implementation model allows you to continue to work on your UI within the Designer without disrupting or overwriting implementation code. As you can see, the Designer exports ready-to-use custom Ext JS component classes. Therefore, a project can be broken down into logical pieces, where each piece is its own independent, self-managing and self-aware component class.

Linked Instances in Ext Designer But what if you want to break those logical pieces into even smaller reusable components? Perhaps you have a particular widget that you foresee using many times over, maybe even within the same project. In this case, is there a way to see project components arranged visually together? There is!. You can do this by using by a couple of the most powerful and overlooked features in Ext Designer today: Linked Instances and Promote to Class.

Linked Instances allow you to create instances of any root-level component as child items to another root-level component. For example, let's say you have a LoginScreen container, and you want to add to it a previously created LoginForm component. You can drag and drop your LoginForm component onto your LoginScreen container and establish a Linked Instance (see Figure 1 & 2). A linked instance is analogous to an instance of an object when speaking in object-oriented programming terms. Consequently, any changes you make directly to your LoginForm component will be reflected in the linked instance. You can create as many linked instances as you want, either via drag-and-drop of a root-level component or by Duplicating an existing linked instance. By using this technique, you can build each logical piece of your project separately and later view all of these pieces together by establishing linked instances into an aggregate container such as a Viewport.

Promote to Class in Ext Designer

Promote to Class works in tandem with Linked Instances and allows you to convert any nested component into a root-level component. By doing this, the new component will have its own Javascript files generated on project export. When you Promote to Class, the original component is replaced by a linked instance to its new root-level version. This makes it easy to break up a large existing component into smaller, reusable, and more manageable subsets. It also means that we can implement behavior, override functions, or implement function-typed configuration options on our new component class.

PasswordField in Ext Designer In our LoginForm example, we can right-click on our password TextField and choose Promote to Class. We can then give the new root-level component a class name of PasswordField and an xtype of passwordfield, and we can use that component wherever we need a password input field (see Figure 3).

LoginForm.ui.js - after promoting password field to a class - shortened for brevity

LoginFormUi = Ext.extend(Ext.form.FormPanel, {
    // ...
    initComponent: function() {
        // ...
        this.items = [
            {
                xtype: 'textfield',
                fieldLabel: 'Email',
                name: 'email',
                vtype: 'email'
            },
            {
                fieldLabel: 'Password',
                xtype: 'passwordfield'
            },
            {
                xtype: 'checkbox',
                boxLabel: 'Remember Me',
                name: 'remember_me'
            }
        ];
        // ...
    }
});

By taking advantage of Linked Instances and Promote to Class, you can architect the component hierarchy of your project any way you like. By breaking up your project into logical sub-components, you are able to reap the benefits of a true and robust component-oriented architecture, namely: reusability, extensibility, manageability, and simplicity.

Share this post:
Leave a reply

Written by Jarred Nicholls
Jarred Nicholls is the lead engineer on Ext Designer and a proud member of the Sencha WebKit engineering team. Jarred enjoys hacking on WebKit, JavaScript engines, and the latest drafts of HTML5 APIs.
Follow Jarred on Twitter

2 Comments

peterd

3 years ago

I’m a programer, want to get your software, thanks!

Morrie

3 years ago

This piece was a liefjakcet that saved me from drowning.

Leave a comment:

Commenting is not available in this channel entry.