A couple of weeks ago, I decided to download Ext Designer and play around with it. In this post, I am going to write a review about this application.

Disclaimer: I am not being paid to do this and no one asked me to. Everything I say/write here is my honest opinion.

Designer is a desktop application that helps you create interfaces faster than ever in an easy-to-use, drag-and-drop environment.

The ExtJS Team created a Preview screencast in which they mock up some interfaces.

It really is cool. There is a post on ExtJS Blog you can check out all the features of this great tool.

Despite being a great tool with all those amazing features, there are some features and ExtJS components I missed in the application.

First, I created a simple ExtJS application to illustrate what I mean.

It generates the code for each component you create:

Personal Info – Field Set:

Name Text Field:

If you take a look, you will see the name text field within the personal info field set is declared in a different way.

If you want to export the whole code to your favorite IDE, so you can integrate ExtJS with a programming language or platform (e.g.: PHP, Java, .NET), you just need to select the root component and click on “Export Code to Disk” or “Export code to ClipBoard”:

Look now at the code generated from the project I created – it is the same code you get when you choose the export function:

MyWindowUi = Ext.extend(Ext.Window, {
    title: 'Ext Designer Test',
    width: 400,
    height: 250,
    initComponent: function() {
        this.items = [
            {
                xtype: 'tabpanel',
                activeTab: 1,
                items: [
                    {
                        xtype: 'panel',
                        title: 'Grid',
                        items: [
                            {
                                xtype: 'grid',
                                title: 'My Grid',
                                columns: [
                                    {
                                        xtype: 'gridcolumn',
                                        header: 'Name',
                                        sortable: true,
                                        resizable: true,
                                        width: 100,
                                        dataIndex: 'name'
                                    },
                                    {
                                        xtype: 'gridcolumn',
                                        header: 'Phone #',
                                        sortable: true,
                                        resizable: true,
                                        width: 100,
                                        dataIndex: 'phone'
                                    },
                                    {
                                        xtype: 'gridcolumn',
                                        header: 'Address',
                                        sortable: true,
                                        resizable: true,
                                        width: 100,
                                        dataIndex: 'address'
                                    }
                                ],
                                bbar: {
                                    xtype: 'paging'
                                }
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        title: 'Form',
                        items: [
                            {
                                xtype: 'fieldset',
                                title: 'Personal Info',
                                layout: 'form',
                                items: [
                                    {
                                        xtype: 'textfield',
                                        fieldLabel: 'Name',
                                        anchor: '100%',
                                        name: 'nameField'
                                    },
                                    {
                                        xtype: 'textarea',
                                        fieldLabel: 'Address',
                                        anchor: '100%',
                                        name: 'addressField'
                                    },
                                    {
                                        xtype: 'textfield',
                                        fieldLabel: 'Phone #',
                                        anchor: '100%',
                                        name: 'phoneField'
                                    }
                                ]
                            },
                            {
                                xtype: 'button',
                                text: 'Save'
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        title: 'Tree',
                        items: [
                            {
                                xtype: 'treepanel',
                                title: 'My Tree',
                                root: {
                                    text: 'Root Node'
                                },
                                loader: {

                                }
                            }
                        ]
                    }
                ]
            }
        ];
        MyWindowUi.superclass.initComponent.call(this);
    }
});

It generated a single code block! Lucky me it is a small and simple project! Imagine the code generated from a big project? Not friendly if you need to maintain this project in the future.

This is the first thing I think they could improve in Ext Designer. If the tool creates a class for each component already, why do not use the reference to it to generate the whole code? And they could export all the classes in different files. I think this is the way most of ExtJS developers does when they have to develop a big project.

The second thing I did not like is that the code is read only. I am a developer, and sometimes I just want to set a property in the code. It may be faster than searching the property in the Component Config tab, after all, I am used to set the properties in the code already. I understand this can be sort of a protection if a person does not know ExtJS and he/she can mess up with the code trying to change anything.

Third: I missed some components, such as radio group and graphs, among others. Maybe this is something they can implement for a near future?

The coolest feature in my opinion is the preview function. It is really awesome!

In general, Ext Designer is a great tool and I love it! It is very intuitive.

I do not recommend it if you are learning ExtJS. I think it is important to understand how ExtJS works and the components patterns before you get started with a visual tool. However, it is great if you are an ExtJS developer already. It can save you a lot of time. It is also great to prototype and design applications (if there is a design team in your company that do not know ExtJS programming).

I definitely recommend buying it.

You can download the full version (with all the features) and try it for 15 days for free (all you need to do is to register as a user on the ExtJS forum). After the evaluation period, you have to get a license.

Happy coding!

Updated: ExtJS quoted this review on ExtJS Notes (Thank You!) – http://notes.extjs.com/post/501611295/ext-designer-is-a-great-tool