Extjs Code Style

Ext JS as a cross-browser JavaScript library, it is a really flexible language. Two peoples have different code style will generate totally different code. So it is really important for us to follow some standard - especial for the piece of code share between groups memeber. Here list some coding standard shared in our group:



1: File Structure and name

Because UI level can be easily divided as center/south/east/west/noth panel. For each page - especial complex UI, we will always create a folder for each panel, such as: Center, South etc. And we always put the share files into the common folder.

In a words, the file and folder should be easy to connect to the UI level - this will save lots of time for future maintainance.

And namespace will be always used for each folder: Ext.ns('feyaSoft.calendar.dayView')

2: Define the Class

The target of extjs is to achieve complex UI. Obviously this includes part of logic to achieve UI behavior. To make code readable and reusable, we'd better separate the logic code and UI code. For example:

Ext.ns("feyaSoft.main");

feyaSoft.main.MainPanel = function(){
....
    // down tab panel
    this.downTabPanel = new Ext.TabPanel({
        region: 'south',
        tabPosition: 'bottom',
        activeTab: 0,
        deferredRender: false,
        layoutOnTabChange:true,
        height: 190,
        split:true,
        resizeTabs:true,
        tabWidth:200,
        minTabWidth: 120,
        plugins: new Ext.ux.TabCloseMenu(),

        items:[{
            title: 'Our Customer\'s Project',
            iconCls: 'application',
            closable: false,
            autoScroll:true,
            layout:'fit',
            border: false,
            cls:'feyasoft-images-view',  
            items: [this.customerView]
        }]
    });

    ....
    feyaSoft.main.MainPanel.superclass.constructor.call(this, {
        id: 'main_panel_page',
        region: 'center',
        layout: 'border',
        border: false,
        items: [this.upTabPanel, this.downTabPanel]
    });
};

Ext.extend(feyaSoft.main.MainPanel, Ext.Panel, {

    // click customer image link
    onCustomerClickFn : function(dv, index, node, e){
        var rd = dv.store.getAt(index);
        var data = rd.data;
        var name = data['name'];

        .....
    },

    ....
});

In this way, we can reuse this logic code as we like. And make code really easy to readable.

3: Try to avoid use "id" in the panel/Grid/field etc.

Because id is binded with dom field, there will be only one place work correct when we reuse the same piece of code with id in another place.

In general, the purpose of id is to make get the reference of item in different place , like: Ext.getCmp('myId'). We can achieve this through pass reference or try use: this.ownerCt.reload() to get other item reference.

Some suggestion:

1: Try to reuse the code - if 2 place have similar code, make it comment and reuse
2: Any function and method should not more than 100 line. Try to have sub function/method if it is too big.
3: Try to use this: if (true == flag) instead of: if (flag == true)