2014년 12월 3일 수요일

Do’s and Don’ts when creating an Ext extension

1. Follow Ext JS coding patterns

var width = 100,
height = 40,
area = 0;
if (doCalculate) {
    area = width * height;

}

2. Design classes for configurability

MyTip = Ext.extend(Ext.Tooltip, {
    fadeDuration: 200,
    onMouseLeave : function(){          this.el.fadeOut(this.fadeDuration);
    }
}

3. Make key functionality easily overridable

initComponent : function(){
    if (!this.tpl) {
        this.tpl = new Ext.XTemplate(
            '
{foo}
     );
    }
   
    // ....
}

4. Make classes localizable

MyClass = Ext.extend(Ext.Toolbar, {
    noDataText : 'No data to display’,
   
    constructor: function() {
        this.add({
            text : this.noDataText
        });
    });
});

5. Use a syntax checker

6. Clean up after yourself

MyPanel = Ext.extend(Ext.Panel, {
    constructor: function() {
        this.someEl = new Ext.Element();
    },
    onDestroy: function() {
        this.someEl.destroy();
        // Call superclass destroy method...
    }
});

7. Define an xtype

MyPanel = Ext.extend(Ext.Panel, {
    constructor: function() {
        // ...
    }
   
});
Ext.reg(’mypanel’, MyPanel);

8. Document your extension
/**
 * @class MyClass
 * @extends Ext.Panel
 * @constructor
 * @param {Object} config The cfg object
 */
MyClass = Ext.extend(Ext.Panel, {
    // ...
});

9. Test edge cases

댓글 없음:

댓글 쓰기