Extjs项目中JS该如何写

Extjs项目中JS该怎么写
      很长一段时间内，写EXTJS代码都是按着下载下来的example来写的。到最后JS文件中充斥各种的var和各种的id。可怕的是，在项目做了一年多，两年经历各种新增功能和BUG修改之后，有的js文件居然达到了5000多行。。。

      偶然间在做一个新模块的时候用上了EXT Designer。发现导出的文件结构是：数据、UI、事件分离的三个文件。再配合storeId，ref等等属性之后，代码结构回非常清晰。

      数据部分：一般在EXT中采用继承JsonStore，并定义storeId方便引用。

TestJsonStore = Ext.extend(Ext.data.JsonStore, {
    constructor: function(cfg) {
        cfg = cfg || {};
        TestJsonStore.superclass.constructor.call(this, Ext.apply({
            storeId: 'TestJsonStore',
            fields: [
                {
                    name: 'field'
                }
            ]
        }, cfg));
    }
});

     UI部分：采用组件对象继承，xtype，并设置ref属性用来方便引用到组件对象。

TestViewUi = Ext.extend(Ext.Viewport, {
    layout: 'fit',

    initComponent: function() {
        Ext.applyIf(this, {
            items: [
                {
                    xtype: 'panel',
                    ref: 'testPanel',
                    height: 518,
                    width: 846,
                    layout: 'border',
                    items: [
                    ]
                }
            ]
        });

        TestViewUi.superclass.initComponent.call(this);
    }
});

    事件绑定部分：

TestView = Ext.extend(TestViewUi, {
    initComponent: function() {
        TestView.superclass.initComponent.call(this);
       //TODO add event
    }
});