在开发ExtJS应用程序常犯的10个错误.docVIP

在开发 ExtJS 应用程序常犯的 10 个错误 这是 CNX 公司在开发 ExtJS 项目中总结的需要特别注意的 10 个地方。有时候，我们完全是自己使用 ExtJS 从零开始构建的新的应用程序，但有时候我们的客户会要求我们使用他们自己的代码，并且帮助他们提高性能、解决bug以及结构上的问题。同时，我们已经在 ExtJS 项目中作为“清洁者”的角色工作相当长的一段时间了，开始注意到项目中经常会出现一些很值得优化的代码，而这些情况不仅仅只在我们的项目中出现，也会经常出现在其他开发者的代码中。基于过去几年对我们自己工作的总结，我们想应该把这些经验分享给大家，避免大家在项目中出现类似的问题。 过度或不必要的嵌套组件结构 开发时常出现的一个问题是没有原因的使用嵌套组件。这样做会损害软件的性能，也会给软件造成像两条边界或者不正常的图层等不好看的界面。在下面的示例 1A 中，我们有一个包含一个简单表格的面板。在这种情况下，这个面板是不必要的。因为在示例 1B 中，去掉这个额外的面板依然可以工作得很好。请记住这些格式：trees, tab panels 以及 grids 这些全部都是继承自 Panel，无论什么时候使用这些组件时，都不需要额外再添加嵌套面板的。 items: [{ xtype : panel, title: ‘My Cool Grid’, layout: ‘fit’, items : [{ xtype : grid, store : MyStore, columns : [{...}] }] }] 示例 1A. 不好: 这个 ‘panel’ 是不必要的。  layout: ‘fit’, items: [{ xtype : grid, title: ‘My Cool Grid’, store : MyStore, columns : [{...}] }] 示例 1B. 好: 这个 grid 已经是一个 panel 了，所以直接设置 panel 中的属性就可以了。 因清除组件对象失败而导致内存泄露 很多开发者都遇到过这样的问题，为什么他们编写的应用程序使用过程中会变得越来越慢呢？很大的可能是因为清除不再使用的和一些无关紧要(用户导航)的组件对象失败造成的。在示例 2A 所示，用户每一次右击表格中某一行时，一个新的上下文菜单就被创建了。如果用户一直运行这个应用程序，并且右击很多次，那么程序中将会存在非常多的未被销毁并且永远都不会销毁的对象。对于开发者和用户来看，因为只会看到最后一个菜单，所以这个应用程序“看起来”是没问题的。其实只是因为其余创建的菜单对象暂时都被隐藏起来了。因为新的菜单创建前没有释放旧的菜单对象，应用程序所使用到的内存将会不断地增长。这样最终造成了响应变慢或浏览器的崩溃。示例 2B 是更合理的，因为菜单只会在表格初始化时创建一次，并且用户每一次的右击都是使用的同一个菜单对象。但是，如果表格对象被销毁时，即这个菜单对象以后都不会再用到了，但是依然没有被销毁掉而永远都占用着内存。最好的解决方案是示例 2C，因为菜单对象会随着表格对象的销毁而销毁。  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()); } }); 示例 2A. 差: 每一次右击都会创建一个菜单并且每一个菜单都不会被销毁掉.  Ext.define(MyApp.view.MyGrid,{ ext