在我的公司，主要代码审阅者执行：

• 由于组件总是与PAPA对话，从不与您的兄弟姐妹对话（允许自己的孩子离场）
• 尽量避免起泡
• 如果你遵循#1，你就不需要使用Ext.getCmp（），它太贵了，所以不要
• 考虑团队中其他人可重用的每个组件
• 在名称空间中使用适当的层次结构（并使用名称空间）

作为以下文档之上的几个主要规则…：）

有用的链接：

• API documentation-非常有用
• Tutorials-官方tuts
• Screencasts-由真实的ExtJS用户提供
• Community manual
• ExtJS override
• ExtJS forum - user apps thread

Sencha博客上关于十大最差实践的文章值得一读。
Sencha Top 10 Worst Practices
博客文章摘要
请注意，所有的信用都归原始博客帖子的合法所有者所有。

**1.**过度或不必要的组件结构嵌套

有时开发人员会使用冗余的嵌套组件，这可能会导致应用程序中出现意外的不吸引人的美学效果，比如双重边界或意外的布局行为。

坏

items: [{
            xtype : 'panel',
            title: ‘My Cool Grid’,
            layout: ‘fit’,
            items : [{
                xtype : 'grid',
                store : 'MyStore',
                columns : [{...}]
            }]
        }]

很好

layout: ‘fit’,
        items: [{
            xtype : 'grid',
            title: ‘My Cool Grid’,
            store : 'MyStore',
            columns : [{...}]
        }]

在上例中，嵌套面板是多余的，因为网格是面板的扩展。
此外，表单、树、选项卡面板等其他元素是面板的扩展。

**2.**由于未能清理未使用的组件而导致内存泄漏。

这是有史以来最重要的规则之一。在任何编程语言中，确保正确丢弃不再使用的组件都是非常重要的，即使在像Java这样的语言中，GC为我们做所有的清理工作，我们也应该确保在处理完对象之后，我们没有保留任何对象。

坏

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());

        }
    });

每次用户右键单击网格行时，都会创建一个新的上下文菜单。这看起来不错，因为我们只看到最新的菜单。

不良（？？）

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());
        }
    });

这比最初的好一些。每次用户右键单击网格视图时，它都使用相同的菜单对象。然而，即使我们取消了网格视图，它也会使菜单保持活动状态，这不是我们需要的。

很好

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.**怪物控制器

有些人的代码像怪物一样……只是开玩笑，但有一些大型控制器（不仅仅是控制器，还有其他组件：），它们由数千行代码组成，执行所有这些根本没有关系的事情。
在项目开始时，找到一种将应用程序分解为不同处理单元的方法非常重要，这样您就不会最终得到一个处理应用程序中所有进程的巨型控制器。
建议：根据不同的应用程序划分应用程序

• 应用程序功能（在订单处理应用程序中-->订购、交付、客户查找等）
• 视图（网格、表格等）

在ExtJS中，控制器可以相互通信。

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

还可以触发任何控制器都可以侦听的应用程序级事件。

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

另外，另一个控制器侦听应用程序级事件。

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

**4.**源代码的文件夹结构不佳

在任何应用程序中，良好的结构都非常重要，因为它提高了项目的可读性和可维护性。
与其将所有控制器放在一个文件夹中，将所有视图放在另一个文件夹，不如根据它们的功能对它们进行逻辑构造。

**5.**全局变量的使用

为什么使用全局变量不好？
有时不清楚它的实际价值，因此可能会导致很多困惑，比如

• 名称冲突
• 运行时很难找到难以调试的bug

我们能做些什么？
我们可以为它们定义一个单独的类，并将它们存储在其中。

5.1首先，我们创建一个单独的javascript文件，其中包含应用程序使用时需要更改的变量。

运行时.js

5.2定义一个类来保存全局可用数据，在本例中为“myLastCustomer”变量

Ext.define(‘MyApp.config.Runtime’,{
                    singleton : true,
                    config : {
                        myLastCustomer : 0   // initialize to 0
                    },
                    constructor : function(config){
                        this.initConfig(config);
                    }
                });

5.3然后在整个应用程序中提供验证

Ext.application({
                    name : ‘MyApp’,
                    requires : [‘MyApp.config.Runtime’],
                   ...
                });

5.4每当您想获取或设置全局变量值时
5.4.1至设定值

MyApp.config.setMyLastCustomer(12345);

5.4.2获取值

MyApp.config.getMyLastCustomer();

型

**6.**在组件中使用ID是个坏主意？

为什么？

6.1因为您定义的每个id都应该是唯一的。在大型应用程序中，这可能会导致许多混淆和问题。
6.2很容易让框架处理组件的命名

// here we define the first save button
                xtype : 'toolbar',
                items : [{
                    text : ‘Save Picture’,
                    id : 'savebutton'
                }]

                // somewhere else in the code we have another component with an id of ‘savebutton’
                xtype : 'toolbar',
                items : [{
                    text : ‘Save Order’,
                    id : 'savebutton'
                }]

型
在上面的示例中，有两个按钮具有相同的名称，这会导致名称冲突。
为了防止这种情况，请使用“itemId”而不是id。

xtype : 'toolbar',
                itemId : ‘picturetoolbar’,
                items : [{
                    text : 'Save Picture',
                    itemId : 'savebutton'
                }]

                // somewhere else in the code we have another component with an itemId of ‘savebutton’
                xtype : 'toolbar',
                itemId: ‘ordertoolbar’,
                items : [{
                    text : ‘Save Order’,
                    itemId: ‘savebutton’
                }]

型
现在，您可以通过以下唯一名称访问上述组件

var pictureSaveButton = Ext.ComponentQuery.query('#picturetoolbar > #savebutton')[0];

    var orderSaveButton = Ext.ComponentQuery.query('#ordertoolbar > #savebutton')[0]; 

    // assuming we have a reference to the “picturetoolbar” as picToolbar
    picToolbar.down(‘#savebutton’);

型

**7.**部件引用不可靠

使用组件定位获取组件的引用不是一个好主意。因为有人可能会更改组件的位置，而不知道它是通过在应用程序的另一部分中定位引用的。

var mySaveButton = myToolbar.items.getAt(2);

        var myWindow = myToolbar.ownerCt;

型
我们如何获得参考？
使用“ComponentQuery”或“up”/“down”方法。

var pictureSaveButton = Ext.ComponentQuery.query('#picturetoolbar > #savebutton')[0]; //

根据itemId查询

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

**8.**未能遵循大小写命名约定

使用好的命名约定作为最佳实践是很重要的，因为它可以提高代码的一致性，并使其易于阅读和理解。
此外，为您定义的所有类、变量和方法使用有意义的名称也很重要。

坏

Ext.define(‘MyApp.view.customerlist’,{   // should be capitalized and then camelCase
            extend : ‘Ext.grid.Panel’,
            alias : ‘widget.Customerlist’,     // should be lowercase             
            MyCustomConfig : ‘xyz’,            // should be camelCase
            initComponent : function(){
                Ext.apply(this,{
                    store : ‘Customers’,
                    ….
                });
                this.callParent(arguments);
            }
        });

很好

Ext.define(‘MyApp.view.CustomerList’,{   // Use of capitalized and then camelCase
            extend : ‘Ext.grid.Panel’,
            alias : ‘widget.customerlist’,      // use of lowerCase
            myCustomConfig : ‘xyz’,             // Use of camelCase
            initComponent : function(){
                Ext.apply(this,{
                    store : ‘Customers’,
                    ….
                });
                this.callParent(arguments);
            }
        });

**9.**将组件约束到父组件布局
坏

Ext.define('MyApp.view.MyGrid',{
            extend : 'Ext.grid.Panel',
            initComponent : function(){
                Ext.apply(this,{
                    store : ‘MyStore’,
                    region : 'center',
                    ......
                });
                this.callParent(arguments);
            }
        });

“MyGrid”面板布局区域设置为“中心”。因此，它不能在“西部”等其他地区重复使用。
因此，重要的是要以这样一种方式定义组件，即它可以在任何问题上重用。

不良（？？）

Ext.define('MyApp.view.MyGrid',{
            extend : 'Ext.grid.Panel',
            initComponent : function(){
                Ext.apply(this,{
                    store : ‘MyStore’,
                    ......
                });
            }
        });

        Ext.create('MyApp.view.MyGrid',{
            region : 'center'   // specify the region when the component is created.
        });

型
还有另一种方法可以用默认值定义组件（在本例中为“区域”属性），并在需要更改默认值时覆盖默认值。

很好

Ext.define('MyApp.view.MyGrid',{
            extend : 'Ext.grid.Panel',
            region : 'center', // default region
            initComponent : function(){
                Ext.apply(this,{
                    store : ‘MyStore’,
                    ......
                });
            }
        });

        Ext.create(‘MyApp.view.MyGrid’,{
            region : ‘north’, // overridden region
            height : 400
        });

型

**10.**使代码比必要的更复杂

有很多方法可以使简单的代码变得复杂。
其中一种方法是通过单独访问表单中的每个字段来加载表单数据。

坏

//  suppose the following fields exist within a form
    items : [{
        fieldLabel : ‘User’,
        itemId : ‘username’
       },{
        fieldLabel : ‘Email’,
        itemId : ‘email’
       },{
        fieldLabel : ‘Home Address’,
        itemId : ‘address’
    }];

    // you could load the values from a record into each form field individually
    myForm.down(‘#username’).setValue(record.get(‘UserName’));
    myForm.down(‘#email’).setValue(record.get(‘Email’));
    myForm.down(‘#address’).setValue(record.get(‘Address’));

型

很好

items : [{
        fieldLabel : ‘User’,
        name : ‘UserName’
    },{
        fieldLabel : ‘Email’,
        name : ‘Email’
    },{
        fieldLabel : ‘Home Address’,
        name : ‘Address’
    }];

    myForm.loadRecord(record);      // use of "loadRecord" to load the entire form at once.

型