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,正常了