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

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

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

最常见的一个错误就是开发人员做无意义的组件嵌套。这样会降低性能和布局的美感。
在例1A中，我们在一个panel面板中，嵌套了一个grid面板。这里panel是没有必要的。
如例1B所示，我们移除了panel面板。因为form，tree，tab等等这些都是panel的扩展组件。
因此，当你使用这些组件的时候，你应该时刻特别关注这些不必要的嵌套。

//1A：错误的。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/