Ext JS写法风格

Ext JS是用纯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()
});

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