似乎大多数 ExtJS 书籍和 ExtJS 介绍只专注于展示所有不错的功能，但其中大多数并没有真正解释如何使用 ExtJS 构建稳定、可维护的布局/应用程序。以及如何在不造成无法阅读的混乱的情况下编写它们...
我没有具体的应用程序，我只是想知道如何“美化”我的 ExtJS 代码。因此，如果您需要一个示例，项目管理（图书馆）的“常规”应用程序或工作委员会之类的东西最能描述我的想法。
那么当我想用 ExtJS 为客户端代码构建此类应用程序时，任何人都可以分享一些关于如何构建此类应用程序的好链接或建议吗？
提前致谢， 干杯
【问题讨论】：
标签： javascript extjs
在我公司的主要代码审查员强制执行：
作为遵循文档之上的几个主要规则... :)
【讨论】：
有用的链接：
【讨论】：
关于十大最糟糕做法的 Sencha 博客文章值得一读。
博文摘要
**请注意，所有功劳归原博客文章的合法所有者所有。
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.全局变量的使用
为什么使用全局变量不好？ 有时不清楚它所拥有的实际价值，因此可能会导致很多混乱，例如
很难在运行时发现难以调试的错误
我们能做些什么呢？ 我们可以为它们定义一个单独的类并将它们存储在其中。
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]; // Quering against the 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.
【讨论】：