十大要避免的Ext JS开发方法

1. 过多或不必要的组件嵌套

开发人员最常见的错误之一是没理由的嵌套组件。这样做，会影响性能和也会造成应用程序的不美观，如爽边框火意外的布局行为。在下面的示例1A，在面板内只包含了一个Grid。在这种情况下，该面板是不必要的。如示例1B所示，额外的面板可以取消。要记住的是，表单面板、树面板、标签面板和Grid面板都是从面板扩展的，隐藏，在使用这些组件的时候，应该特别注意不要的嵌套情况。

[javascript] view plain copy

1. items: [{  
2.     xtype : 'panel',  
3.     title: ‘My Cool Grid’,  
4.     layout: ‘fit’,  
5.     items : [{  
6.         xtype : 'grid',  
7.         store : 'MyStore',  
8.         columns : [{...}]  
9.     }]  
10. }]  

示例1A  不好的：面板（panel）是不必要的

[javascript] view plain copy

1. layout: ‘fit’,  
2. items: [{  
3.     xtype : 'grid',  
4.     title: ‘My Cool Grid’,  
5.     store : 'MyStore',  
6.     columns : [{...}]  
7. }]  
8.    

示例1B 好：Grid已经是面板，因而可以直接在Grid中使用任何面板属性

2. 清理未使用组件失败造成内存泄漏

许多开发人员不知道为什么他们的应用程序随着使用时间越长越来越慢。在用户浏览整个应用程序期间清理未使用组件失败是最大的一个原因。在下面的实例2A中，每次用户右键单击Grid的行，都会创建一个新的右键菜单。如果用户保持应用程序处于打开状态并右键单击行上百次，那么，就会有上百个永远不会被摧毁的右键菜单。对于开发人员和用户来说，应用程序“看上去”显示是争取的是因为只有最后一个被创建的菜单能显示在页面上，而且与的则是隐藏的。由于没有创建新菜单并没有清理旧的，应用程序的内存利用率就会不断增长，这最终将导致较慢的操作或浏览器崩溃。

示例2A就很好，由于右键菜单只在Grid初始化时创建一次，并在用户每次右键单击行时重复使用。不过，如果Grid被销毁，右键菜单一直存在，尽管它不再需要。最好的方式是示例2C，在Grid销毁的时候，把右键菜单也销毁。

[javascript] view plain copy

1. Ext.define('MyApp.view.MyGrid',{  
2.     extend : 'Ext.grid.Panel',  
3.     columns : [{...}],  
4.     store: ‘MyStore’,  
5.     initComponent : function(){  
6.         this.callParent(arguments);  
7.         this.on({  
8.             scope : this,  
9.             itemcontextmenu : this.onItemContextMenu  
10.         });  
11.     },  
12.    
13.     onItemContextMenu : function(view,rec,item,index,event){  
14.         event.stopEvent();  
15.         Ext.create('Ext.menu.Menu',{  
16.             items : [{  
17.                 text : 'Do Something'  
18.             }]  
19.         }).showAt(event.getXY());  
20.    
21.     }  
22. });  

示例2A 不好：每一次右键单击都会创建菜单，且永远不会被销毁

[javascript] view plain copy

1. Ext.define('MyApp.view.MyGrid',{  
2.     extend : 'Ext.grid.Panel',  
3.     store : 'MyStore',  
4.     columns : [{...}],  
5.     initComponent : function(){  
6.         this.menu = this.buildMenu();  
7.         this.callParent(arguments);  
8.         this.on({  
9.             scope : this,  
10.             itemcontextmenu : this.onItemContextMenu  
11.         });  
12.     },  
13.    
14.     buildMenu : function(){  
15.         return Ext.create('Ext.menu.Menu',{  
16.             items : [{  
17.                 text : 'Do Something'  
18.             }]  
19.         });  
20.     },  
21.    
22.     onItemContextMenu : function(view,rec,item,index,event){  
23.         event.stopEvent();  
24.         this.menu.showAt(event.getXY());  
25.     }  
26. });  

示例2B 较好：菜单会在Grid创建时被创建，且每次可重用

[javascript] view plain copy

1. Ext.define('MyApp.view.MyGrid',{  
2.     extend : 'Ext.grid.Panel',  
3.     store : 'MyStore',  
4.     columns : [{...}],  
5.     initComponent : function(){  
6.         this.menu = this.buildMenu();  
7.         this.callParent(arguments);  
8.         this.on({  
9.             scope : this,  
10.             itemcontextmenu : this.onItemContextMenu  
11.         });  
12.     },  
13.    
14.     buildMenu : function(){  
15.         return Ext.create('Ext.menu.Menu',{  
16.             items : [{  
17.                 text : 'Do Something'  
18.             }]  
19.         });  
20.     },  
21.    
22.     onDestroy : function(){  
23.         this.menu.destroy();  
24.         this.callParent(arguments);  
25.     },  
26.    
27.     onItemContextMenu : function(view,rec,item,index,event){  
28.         event.stopEvent();  
29.         this.menu.showAt(event.getXY());  
30.     }  
31. });  

示例2C 最好：Grid被销毁时，右键菜单也被销毁

3.怪物控制器

当看到应用程序拥有一个上千行代码的超级控制器的时候，我们不知道震惊了多少次。我们更倾向于根据应用程序功能拆分控制器。例如，订单处理应用程序可能会有划分条目、出货量、客户查找等控制器。这将使导航和维护代码更容易。

一些开发人员喜欢根据视图拆分控制器。例如，如果一个应用程序有一个Grid和表单，这将会使用一个控制器来管理Grid和使用一个控制器来管理表单。并没有一个“正确”的方式来划分控制器逻辑，只要是一致的就行。要记住，控制器可以与其他控制器进行通信。在示例3A，可以看到如何检索其他的控制器并调用其中的方法。

[javascript] view plain copy

1. this.getController('SomeOtherController').runSomeFunction(myParm);  

示例3A 获取另一个控制器的引用并调用它的方法。

作为替代，也可以触发任何控制器可以监听到的应用程序层事件。在示例3B和3C，可以看到如何在一个控制器触发一个应用程序层事件并在另外一个控制器监听它。

[javascript] view plain copy

1. MyApp.getApplication().fireEvent('myevent');  

示例3B 触发一个应用程序层事件

[javascript] view plain copy

1. MyApp.getApplication().on({  
2.     myevent : doSomething  
3. });  

示例3C 在另一个控制器监听应用程序层事件

注意： 自从Ext JS 4.2开始，使用多个控制器变得更容易了——他们可以触发其他控制器可以直接监听的事件

4.源代码的文件夹结构差

这虽然不影响性能和操作，但会让找跟进应用程序结构变得困难。随着应用程序的增长，如果源代码很有组织，那么寻找源代码以及增加特性或功能就会很容易。我们常常看到许多开发人员会将所有视图（即使是很大的应用程序）如示例4A一样放在一个目录。我们建议如示例4B所示通过逻辑功能来组织视图。

示例4A 不好：所有视图都处于同样层次

示例4B 好：视图根据逻辑功能进行组织

5.全局变量的使用

即使全局变量是不好的已经广为人知，但仍然会在我们审查过的一些应用程序中看到他们的身影。使用全局变量的应用程序可能会有名称冲突等重大问题，并且很难去调试。不使用全局变量，可以在类中定义“属性”，并引用这些属性的getter和setter。

例如，假设应用程序需要记录最后选择的客户。一般情况下会如示例5A那样在应用程序中定义一个变量，这很容易且值可以很便利的被应用程序的其他部分使用。

[javascript] view plain copy

1. myLastCustomer = 123456;  

示例5A 不好：创建全局变量来存储最后的客户编号

作为替代，好的做法是创建一个用来保存属性的类来代替全局变量。在当前情况下，可以创建一个名为Runtime.js来保存应用程序中要使用到的运行属性。示例5B显示了Runtime.js在源代码结构中的位置。

示例5B Runtime.js文件的位置

示例5C显示了Runtime.js文件的内容，而示例5D显示了如何在app.js中“请求（require）”它。在应用程序中，就可以如5E或5F那样在任何地方“设置（set）”或“获取（get）”属性。

[javascript] view plain copy

1. Ext.define(‘MyApp.config.Runtime’,{  
2.     singleton : true,  
3.     config : {  
4.         myLastCustomer : 0   // initialize to 0  
5.     },  
6.     constructor : function(config){  
7.         this.initConfig(config);  
8.     }  
9. });  

示例5C 用来为应用程序保存全局属性的Runtime.js文件示例

[javascript] view plain copy

1. Ext.application({  
2.     name : ‘MyApp’,  
3.     requires : [‘MyApp.config.Runtime’],  
4.    ...  
5. });  

示例5D 在app.js文件中请求Runtime类

[javascript] view plain copy

1. MyApp.config.setMyLastCustomer(12345);  

示例5E 设置最后客户的方式

[javascript] view plain copy

1. MyApp.config.getMyLastCustomer();  

示例5F 获取最后客户的方式

6. id的使用

我们不建议在组件上使用id，因为每一个id必须是唯一的。而这样很容易导致不小时使用了相同的id，从而引起重复的DOM id（名称冲突）。相反，应该让框架来处理id的生成。使用Ext JS的组件查询，没有任何理由要为Ext JS组件指定一个id。示例6A显示了一个应用程序中的两段代码，在这里创建了两个不同的保存按钮，而这两个保存按钮的id都为“savebutton”，从而导致了名称冲突。显而易见，在下面的代码很容易找出名称冲突，但在一个大型应用程序中，要确定名称冲突会很困难。

[javascript] view plain copy

1. // here we define the first save button  
2. xtype : 'toolbar',  
3. items : [{  
4.     text : ‘Save Picture’,  
5.     id : 'savebutton'  
6. }]  
7.    
8. // somewhere else in the code we have another component with an id of ‘savebutton’  
9. xtype : 'toolbar',  
10. items : [{  
11.     text : ‘Save Order’,  
12.     id : 'savebutton'  
13. }]  

示例6A 不好：为组件分配了重复id将造成名称冲突

替代方法是，如果需要手动确定每一个组件的，可以如示例6B那样使用itemid代替id。这就可以解决命名冲突，并且仍然可以通过itemid来引用组件。通过itemid有许多方法来获取组件的引用。示例6C列出了部分方法。

[javascript] view plain copy

1. xtype : 'toolbar',  
2. itemId : ‘picturetoolbar’,  
3. items : [{  
4.     text : 'Save Picture',  
5.     itemId : 'savebutton'  
6. }]  
7.    
8. // somewhere else in the code we have another component with an itemId of ‘savebutton’  
9. xtype : 'toolbar',  
10. itemId: ‘ordertoolbar’,  
11. items : [{  
12.     text : ‘Save Order’,  
13.     itemId: ‘savebutton’  
14. }]  

示例6B 好：使用itemid来创建组件

[javascript] view plain copy

1. var pictureSaveButton = Ext.ComponentQuery.query('#picturetoolbar > #savebutton')[0];  
2.    
3. var orderSaveButton = Ext.ComponentQuery.query('#ordertoolbar > #savebutton')[0];   
4.    
5. // assuming we have a reference to the “picturetoolbar” as picToolbar  
6. picToolbar.down(‘#savebutton’);  

示例6C 好：使用itemid引用组件

7.不可靠的组件引用

有时候会看到代码利用组件位置来引用组件。应该避免出现这样的情况，因为有任何条目被增加、移除或嵌入不同的组件，就会导致错误。示例7A显示了几种常见情况。

[javascript] view plain copy

1. var mySaveButton = myToolbar.items.getAt(2);  
2.    
3. var myWindow = myToolbar.ownerCt;  

示例7A 不好：避免基于组件位置来获取组件引用

替代方法是，如示例7B那样使用组件查询或者最佳的up或down方法来返回引用。使用这种技术，代码就很少会因以后的结构或组件位置变化而导致错误。

[javascript] view plain copy

1. var mySaveButton = myToolbar.down(‘#savebutton’);    // searching against itemId  
2.    
3. var myWindow = myToolbar.up(‘window’);  

示例7B  好：使用组件查询来返回相关引用

8. 不遵守大写/小写命名约定

Sencha在为组件、属性或xtype等等命名的时候，会遵循某些大写/小写标准。为了避免混淆，保持代码清洁，应对遵循相同的标准。示例8A显示几个不正确的情形。示例8B显示了在相同情况下，使用正确的大写/小写命名约定的情形。

[javascript] view plain copy

1. Ext.define(‘MyApp.view.<strong>customerlist</strong>’,{          // should be capitalized and then camelCase  
2.     extend : ‘Ext.grid.Panel’,  
3.     alias : ‘widget.<strong>Customerlist</strong>’,                       // should be lowercase               
4.     <strong>MyCustomConfig</strong> : ‘xyz’,                            // should be camelCase  
5.     initComponent : function(){  
6.         Ext.apply(this,{  
7.             store : ‘Customers’,  
8.             ….  
9.         });  
10.         this.callParent(arguments);  
11.     }  
12. });  
13.    

示例8A 粗体显示的地方为不正确的大写/小写命名

[javascript] view plain copy

1. Ext.define(‘MyApp.view.<strong>CustomerList</strong>’,{        
2.     extend : ‘Ext.grid.Panel’,  
3.     alias : ‘widget.<strong>customerlist</strong>’,        
4.     <strong>myCustomConfig</strong> : ‘xyz’,              
5.     initComponent : function(){  
6.         Ext.apply(this,{  
7.             store : ‘Customers’,  
8.             ….  
9.         });  
10.         this.callParent(arguments);  
11.     }  
12. });  

示例8B 粗体显示的地方为正确的大写/小写命名

另外，如果触发任何自定义事件，事件的名称应对是小写的。当然，不遵循这些约定，一切都仍然会工作，但为什么要迷失在标准之外并编写不太干净的代码？

9. 将组件约束在父组件的布局

在示例9A，面板总是会有“region:center”属性，因此，当想重用它的时候就可能行不通，例如将它放到“west”区域。

[javascript] view plain copy

1. Ext.define('MyApp.view.MyGrid',{  
2.     extend : 'Ext.grid.Panel',  
3.     initComponent : function(){  
4.         Ext.apply(this,{  
5.             store : ‘MyStore’,  
6.             region : 'center',  
7.             ......  
8.         });  
9.         this.callParent(arguments);  
10.     }  
11. });  

示例9A 坏：“center”区域不应该放在这里

代替方法是，如示例8B那样，在创建组件的时候才指定布局配置。这样，就可以将组件重用到任何你希望的地方，切不受布局配置的约束。

[javascript] view plain copy

1. Ext.define('MyApp.view.MyGrid',{  
2.     extend : 'Ext.grid.Panel',  
3.     initComponent : function(){  
4.         Ext.apply(this,{  
5.             store : ‘MyStore’,  
6.             ......  
7.         });  
8.     }  
9. });  
10.    
11. // specify the region when the component is created...  
12. Ext.create('MyApp.view.MyGrid',{  
13.     region : 'center'   
14. });  

示例9B 好：在创建组件的时候才知道区域

如示例9C所示，也可以为组件提供一个默认的区域，如果需要，可以重写它。

[javascript] view plain copy

1. Ext.define('MyApp.view.MyGrid',{  
2.     extend : 'Ext.grid.Panel',  
3.     region : 'center', // default region  
4.     initComponent : function(){  
5.         Ext.apply(this,{  
6.             store : ‘MyStore’,  
7.             ......  
8.         });  
9.     }  
10. });  
11.    
12. Ext.create(‘MyApp.view.MyGrid’,{  
13.     region : ‘north’, // overridden region  
14.     height : 400  
15. });  

示例9C 也很好：指定默认区域，在需要的时候重写

10. 使代码比所需的更复杂

有很多时候，我们会看到比所需更复杂的代码。这通常是由于对每个组件的可用方法不熟悉造成的。最常见的一种情况是，为每一个表单字段单独从数据记录中加载数据。示例10A就显示这种情况。

[javascript] view plain copy

1. //  suppose the following fields exist within a form  
2. items : [{  
3.     fieldLabel : ‘User’,  
4.     itemId : ‘username’  
5. },{  
6.     fieldLabel : ‘Email’,  
7.     itemId : ‘email’  
8. },{  
9.     fieldLabel : ‘Home Address’,  
10.     itemId : ‘address’  
11. }];  
12.    
13. // you could load the values from a record into each form field individually  
14. myForm.down(‘#username’).setValue(record.get(‘UserName’));  
15. myForm.down(‘#email’).setValue(record.get(‘Email’));  
16. myForm.down(‘#address’).setValue(record.get(‘Address’));  

示例10A 不好：为表单字段单独的从记录中加载数据

替代单独加载每一个值的方法是，使用loadRecord方法从记录中为所有字段的数据到表单字段，这只需要一行代码。如示例10B所示，这里的关键是确保表单字段的name属性和记录的字段名称是一样的。

[javascript] view plain copy

1.    
2. items : [{  
3.     fieldLabel : ‘User’,  
4.     name : ‘UserName’  
5. },{  
6.     fieldLabel : ‘Email’,  
7.     name : ‘Email’  
8. },{  
9.     fieldLabel : ‘Home Address’,  
10.     name : ‘Address’  
11. }];  
12.    
13. myForm.loadRecord(record);  

示例10B 好：使用loadRecord方法只需要一行代码就可加载所有表单字段

这只是比必需的更复杂的代码的其中一个例子。而当中的重点是要审视组件的所有方法和和示例，以确保正在使用简单和适当的技术。