ExtJS开发中应该避免的10个问题（未完）

    在CNX中，尽管我们在EXT JS中的大部分开发工作都需要从头开始创建新的应用程序，有时候我们的客户要求我们展示一些内部工作来解决性能，bug和结构的问题。在解决这方面问题详单一段时间以后，我们总结出了一套我们建议的编码风格。基于我们过去几年的工作审查，我们总结出了如下10大编码方式，我们建议你在你的Ext JS程序中注意这些问题。


1.
过多的、不必要的组件结构嵌套

最常见的一个错误就是开发人员做无意义的组件嵌套。这样会降低性能和布局的美感。

在例1A中，我们在一个panel面板中，嵌套了一个grid面板。这里panel是没有必要的。

如例1B所示，我们移除了panel面板。因为form，tree，tab等等这些都是panel的扩展组件。

因此，当你使用这些组件的时候，你应该时刻特别关注这些不必要的嵌套。
//items: [{
xtype : 'panel',
title: ‘My Cool Grid’,
layout: ‘fit’,
items : [{
xtype : 'grid',
store : 'MyStore',
columns : [{...}]
}]
}]
//1B： 正确的。gird是panel的扩展组件，在gird中即可设置panel属性。
layout: ‘fit’,
items: [{
xtype : 'grid',
title: ‘My Cool Grid’,
store : 'MyStore',
columns : [{...}]
}]
2. 销毁未使用的组件（过期组件？），防止内存泄露
许多开发者不知道为什么他们的应用程序变得越来越慢。最大的一个原因就是未能清楚为使用的组件。

在下面的例2A中，如果应用程序不关闭，每次用户在grid行右击的时候，程序便创建一个新的context menu。每次点击右键所创建的context menu便永远也不会摧毁。对于开发者和用户，这样做看起来是创建了一个context menu。但随着新的menu创建，旧的没有被清除，只是隐藏了起来，随着应用程序的使用，内存利用率也逐步增加，这将最终导致浏览器变慢或卡死。
//2A：错误的。用户每次右击的时候都会创建一个新的menu
Ext.define('MyApp.view.MyGrid',{
extend : 'Ext.grid.Panel',
columns : [{...}],
store: ‘MyStore’,
initComponent : function(){
this.callParent(arguments);
this.on({
scope : this,
itemcontextmenu : this.onItemContextMenu
});
},

onItemContextMenu : function(view,rec,item,index,event){
event.stopEvent();
Ext.create('Ext.menu.Menu',{
items : [{
text : 'Do Something'
}]
}).showAt(event.getXY());

}
});

//2B：正确的。创建grid的时候创建menu，每次右击的时候使用menu。
Ext.define('MyApp.view.MyGrid',{
extend : 'Ext.grid.Panel',
store : 'MyStore',
columns : [{...}],
initComponent : function(){
this.menu = this.buildMenu();
this.callParent(arguments);
this.on({
scope : this,
itemcontextmenu : this.onItemContextMenu
});
},

buildMenu : function(){
return Ext.create('Ext.menu.Menu',{
items : [{
text : 'Do Something'
}]
});
},

onItemContextMenu : function(view,rec,item,index,event){
event.stopEvent();
this.menu.showAt(event.getXY());
}
});

//2C：最佳的。当grid销毁时，menu也一起销毁。
Ext.define('MyApp.view.MyGrid',{
extend : 'Ext.grid.Panel',
store : 'MyStore',
columns : [{...}],
initComponent : function(){
this.menu = this.buildMenu();
this.callParent(arguments);
this.on({
scope : this,
itemcontextmenu : this.onItemContextMenu
});
},

buildMenu : function(){
return Ext.create('Ext.menu.Menu',{
items : [{
text : 'Do Something'
}]
});
},

onDestroy : function(){
this.menu.destroy();
this.callParent(arguments);
},

onItemContextMenu : function(view,rec,item,index,event){
event.stopEvent();
this.menu.showAt(event.getXY());
}
});

3. 避免庞大的控制器
4. 良好的目录结构
5. 避免全局变量的使用
6. 避免使用“id”
7. 避免使用未知组件
8. 命名规则大小写的问题
9. 限制组件的父组件布局

10. 增加代码的可读性
原文地址：http://www.sencha.com/blog/top-10-ext-js-development-practices-to-avoid/