Extjs项目中JS该如何写

2012-11-22

Extjs项目中JS该怎么写很长一段时间内，写EXTJS代码都是按着下载下来的example来写的。到最后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    }});

热点排行

Bad Request.

JavaScript

Extjs项目中JS该如何写