Question

ExtJS is more verbose than jQuery, it makes you write more to do something compared to jQuery. I know that we should not compare jQuery with ExtJS but as ExtJS is a most complete Javascript UI framework while jQuery is library. But after working with jQuery for quite some time it looks like our productivity get reduced when we move to ExtJS.

var panel = Ext.create('Ext.panel.Panel',{
        height: 500,
        width: 500,
        renderTo: Ext.getBody(),
        ...

Can’t we save some keystrokes here? Same goes for creating a textbox in form and other components.

EDIT

@Verbose Code:

function createPanel(){
    var panel = Ext.create('Ext.panel.Panel',{
        height: 500,
        width: 500,
        renderTo: Ext.getBody(),
        layout: {
            type: 'vbox',
            align: 'stretch'
        },
        items: [{
            xtype: 'tabpanel',
            itemId: 'mainTabPanel',
            flex: 1,
            items: [{
                xtype: 'panel',
                title: 'Users',
                id: 'usersPanel',
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                tbar: [{
                    xtype: 'button',
                    text: 'Edit',
                    itemId: 'editButton'
                }],
                items: [{
                    xtype: 'form',
                    border: 0,
                    items: [{
                        xtype: 'textfield',
                        fieldLabel: 'Name',
                        allowBlank: false
                    }, {
                        xtype: 'textfield',
                        fieldLabel: 'Email',
                        allowBlank: false
                    }],
                    buttons: [{
                        xtype: 'button',
                        text: 'Save',
                        action: 'saveUser'
                    }]
                }, {
                    xtype: 'grid',
                    flex: 1,
                    border: 0,
                    columns: [{
                        header: 'Name',
                        dataIndex: 'Name',
                        flex: 1
                    }, {
                        header: 'Email',
                        dataIndex: 'Email'
                    }],
                    store: Ext.create('Ext.data.Store',{
                        fields: ['Name', 'Email'],
                        data: [{
                            Name: 'Indian One',
                            Email: '[e-mail]'
                        }, {
                            Name: 'American One',
                            Email: '[e-mail]'
                        }]
                    })
                }]
            }]
        },{
            xtype: 'component',
            itemId: 'footerComponent',
            html: 'Footer Information',
            extraOptions: {
                option1: 'test',
                option2: 'test'
            },
            height: 40
        }]
    });
}

@Compact Code

// Main global object holding
var q = {
    // config object templates
    t: {
        layout: function(args) {
            args = args || {};
            var o = {};
            o.type = args.type || 'vbox';
            o.align = args.align || 'stretch';
            return o;
        },
        panel: function(args) {
            args = args || {};
            var o = {};
            o.xtype = 'panel';
            o.title = args.title || null;
            o.id = args.id || null;
            o.height = args.height || null;
            o.width = args.width || null;
            o.renderTo = args.renderTo || null;
            o.tbar = args.tbar || null;
            o.layout = args.layout || q.t.layout();
            o.items = args.items || [];
            return o;
        },
        button: function(text, args) {
            args = args || {};
            var o = {};
            o.xtype = 'button';
            o.text = text;
            o.itemId = args.itemId;
            return o;
        },
        tabPanel: function(args) {
            args = args || {};
            var o = {};
            o.xtype = 'tabpanel';
            o.itemId = args.itemId;
            o.flex = args.flex;
            o.layout = args.layout;
            o.tbar = args.tbar;
            o.items = args.items || [];
            return o;
        },
        form: function(args) {
            args = args || {};
            var o = {};
            o.xtype = 'form';
            o.border = args.border || 0;
            o.items = args.items || [];
            o.buttons = args.buttons || [];
            return o;
        },
        grid: function(args) {
            args = args || {};
            var o = {};
            o.xtype = 'grid';
            o.flex = args.flex || 1;
            o.border = args.border || 0;
            o.columns = args.columns || [];
            o.store = args.store || null;
            return o;
        },
        gColumn: function(header, dataIndex, args) {
            args = args || {};
            var o = {};
            o.header = header;
            o.dataIndex = dataIndex;
            o.flex = args.flex || undefined;
            return o;
        },
        fTextBox: function(label, optional, args) {
            args = args || {};
            var o = {};
            o.xtype = 'textfield';
            o.fieldLabel = label;
            o.allowBlank = optional || true;
            return o;
        },
        component: function(args) {
            args = args || {};
            var o = {};
            o.xtype = 'component';
            o.itemId = args.itemId;
            o.html = args.html;
            o.extraOptions = args.extraOptions;
            return o;
        }
    },

    // Helper methods for shortening Ext.create for containers.
    h: {
        panel: function(args) {
            return Ext.create('Ext.panel.Panel',
            args);
        }
    }
};
function createPanel(){
    var panel = q.h.panel({
        height: 500,
        width: 500,
        renderTo: Ext.getBody(),
        layout: q.t.panel(),
        items: [q.t.tabPanel({
            itemId: 'mainTabPanel',
            items: [q.t.panel({
                title: 'Users',
                id: 'usersPanel',
                tbar: [
                    q.t.button('Edit',{itemId: 'editButton'})
                ],
                items: [
                    q.t.form({
                        items: [ q.t.fTextBox('Name') , q.t.fTextBox('Email')],
                        buttons: [ q.t.button('Save', {action:'saveUser'} )]
                    }),
                    q.t.grid({
                    columns: [ q.t.gColumn('Name','name'), q.t.gColumn('Email', 'email', {flex: null}) ],
                    store: Ext.create('Ext.data.Store',{
                        fields: ['name', 'email'],
                        data: [{
                            name: 'Indian One',
                            email: '[e-mail]'
                        }, {
                            name: 'American One',
                            email: '[e-mail]'
                        }]
                    })
                })]
            })]
        }),
            q.t.component({
                itemId: 'footerComponent',
                html: 'Footer Information',
                extraOptions: {
                    option1: 'test',
                    option2: 'test'
                },
                height: 40
            })
        ]
    });
}

By going with the @Compact code, it saves about 40% in terms of number of lines for example function here which is “createPanel”. I wanted everyone to come up with different ideas and creating config object was one of my first idea but I wanted it to be something which I can override so I come up with above approach.

I did benchmark both the function and per Firebug (profiling feature) non-compact version takes 178ms while compact version takes 184ms.

So yes, it is going to take some more time for sure and it looks worth from this example with 8ms more but not sure when we will build an enterprise application with this approach.
Is there any better approach?, if yes please do share.

Answer 1

If not really needed use xtypes:

{
   xtype: 'panel',
   height: 500,
   width: 500,
   renderTo: Ext.getBody()
}

or create yourself default configs

var panelCfg = {
   height: 500,
   width: 500,
   renderTo: Ext.getBody()
}

and apply the with ExtApplyIf

Ext.ApplyIf({xtype:'panel'}, panelCfg);

or to get a instance

Ext.widget('panel', panelCfg);

And there are still more ways.

You will definitive need to write yourself some struct and/or helpers which encapsulates your default configurations or even directly inherit your own classes from existing ones.