Sencha Inc. | HTML5 Apps

Blog

Reusable and Customizable Components in Ext Designer

December 14, 2010 | Jarred Nicholls

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.

There are 17 responses. Add yours.

Jorge Vilela

4 years ago

What about using a component within another project?

Mats

4 years ago

Importing 3rd party components/UX’s, ETA? smile

Dave

4 years ago

I’m not looking for linked instances.  I want saved custom “components” that I can drop in from the Tools panel.  When you’re dealing with thousands of “pages”, it’s a pain to keep having to rebuild components over and over.

Jonathan (griffiti93)

4 years ago

Great post. Definitely looking forward to added support for 3rd party components.

Francis C

4 years ago

This is awesome!  When is Save to Toolbox coming? And when can we import custom UX’s?

Thomas Fritz

4 years ago

Really great Blog post. Thank you and keep those kind of blog posts comming.

But as every single commentor said already. It is nice, but there has to be a “export component” and “custom components” section over all projects. Is something of that kind planned?
But even without that feature, it is really really helpful. Thank you!

John

4 years ago

What about to have Ext Designer able to generate also Java code for ExtGWT ?

Christiaan

4 years ago

As much as I like how Ext Designer separates ui from logic and like working with it to quickly make a design, I think your time would be spent better working on the many open feature requests (no updates since September the 2nd) instead of writing information that is already available in the pdf files here http://www.sencha.com/products/designer/

Frank Mayer

4 years ago

Sounds great but the tool would really be great if we could import UX’s and save custom components to the toolbox.

Christian

4 years ago

great post. I use designer to quickly try different scenarios of component to show my team what would work better.

I will not use the code it generate until namespaces (and specific folder path saving) and external component are supported.

Martz

4 years ago

I’ve found using Designer has made a huge improvement to the quality of the code I’m writing in ExtJS.

I first stumbled upon ExtJS through the examples, and decided to dive straight in. My own applications started off based upon the examples and ended up as a big nested spaghetti code which was hard to troubleshoot.

Reading the “Writing a Big Application” tutorials gave me an insight into what I should be doing, but they were still difficult to implement properly the first time around.

Now instead I use Designer to create the GUI as components. With export paths set to my /js directory of my localhost server I can get any changes into my app with 1 click of the export button.

I really love it as part of the development environment, and I’m not an ExtJS pro at all! CakePHP, ExtJS and ExtJS Designer is a wonderful combination for me!

christiaan

4 years ago

Hi Martz, cool I use it the same way in my ‘big application’.

Trent

4 years ago

So where did Jay Garcia disappear?

Christiaan

4 years ago

Thanks for the update on Ext Designer software!

SchoolSex

4 years ago

Nicely constructed posting, and that i in addition presently realized that will many teams tend to be inclined when compared with others (since all people are exclusive) would likely reveal a similar strategy.  I think you’ll save this blog working well.

John dowson

4 years ago

Thank You for this post. Just found it on google and i have to say that i;m really really surprised smile 
Thanks again and cheers dude!

appliance repair

3 years ago

Mi piace questo post - totalmente kewl! Ben fatto! Sto tornando a questo ...

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.