Ext风格

在ExtJs中，ID属性最好少使用。

因为在不为组件指定ID的情况下，默认为其自动分配id；如果手动指定ID，系统就会以此为准。

 

但是往往在系统中，尤其是使用TabPanel的情况下，一下加载了多个JS页面，很容易出现多个组件使用重复的一个ID都情况，当关闭某个tab页，却因为别的tab页存在相同id的组件无法销毁该页面组件；而且在使用Ext.getCmp获取组件时候出问题--往往得不到我们想要的效果（比如Ext.getCmp后重置该组件的值，却无效）。

 

因此，建议在Ext中少使用ID属性。

1. 如果必须使用ID属性，建议ID值用父组件ID+子组件ID的形式来指定子组件的ID；

2. 建议使用

    FormPanel.getForm().findField('id/name');

    或者

    Ext.get('id/name'); 

    来替代

    Ext.getCmp('id')获取组件。

3. 或者定义组件为变量，然后在FormPanel或者GridPanel中引入。

ExtJS是用纯JavaScript代码开发，期间可能会用到无数多的“{ }”、“()”，一多起来就眼花缭乱，让你晕头。我的习惯是：

1. 不要“吝啬”缩进；
2. 模块化、组件化风格。

1. 坏的习惯

Ext . onReady ( function ()  {
    new   Ext . Window ({
       height    :   300 ,
       width     :   400 ,
       layout    :   'fit' ,
       items     :   new   Ext . TabPanel ({
          activeTab     :   0 ,
          items       :   [
              {
                 title     :   '第一页' ,
                 html     :   '第一页内容'
              },
              {
                 title     :   '第二页' ,
                 html     :   '第二页内容'
              },
              {
                 title     :   '第三页' ,
                 html     :   '第三页内容'
              }
          ]
       })
    }). show ()
});

上面这种写法，把各个组件揉在一起写，在UI组件很多且复杂的情况下，可读性很差。

2. 组件化写法

Ext . onReady ( function ()  {
    var   Tab1   =   {
       title     :   '第一页' ,
       html     :   '第一页内容'
    }
    var   Tab2   =   {
       title     :   '第二页' ,
       html     :   '第二页内容'
    }
    var   Tab3   =   {
       title     :   '第三页' ,
       html     :   '第三页内容'
    }

    var   tabPanel   =   new   Ext . TabPanel ({
       activeTab     :   0 ,
       items       :   [
          Tab1 ,
          Tab2 ,
          Tab3
       ]
    });
   
    new   Ext . Window ({
       height    :   300 ,
       width     :   400 ,
       layout    :   'fit' ,
       items     :   tabPanel
    }). show ()
});

把组件分开来，看起来、写起来都清楚多了。

对Window加了id结果每次显示window的时候都显示在上次window消失的位置,取消id,正常了