1、尽量不要使用Ext.apply、Ext.override重写Ext组件函数,实在避免不了这样的写法,需要在统一的位置管理起来,方便以后代码维护;
2、尽量使用extend的方式继承扩展组件,这样的写的好处在于能将组件的功能扩展影响局限在单个组件内部,而不影响到父类组件;
3、尽量避免过度的Ext面板的嵌套定义,过度定义会导致多层深度的嵌套HTMLElement创建,以致严重影响了初始化时间、渲染时间和组件的运行时间。例如:
Js代码
var panel = new Ext.Panel({ // Level-1
title: 'Multi Column, Nested Layouts and Anchoring',
items: [{ // Level-2
layout: 'column',
items: [{ // Level-3
columnWidth: .5,
layout: 'vbox',
items: [{ // Level-4
html: 'This is some text'
}, {
html: 'This is another text'
}]
}, {
columnWidth: .5,
layout: 'form',
items: [{
xtype: 'textfield'
}, {
xtype: 'textfield'
}]
}]
}]
});
这个例子其实只需要三层面板就可以实现了
Js代码
var panel = new Ext.Panel({ // Level-1
title: 'Multi Column, Nested Layouts and Anchoring',
layout: 'column',
items: [{ // Level-2
columnWidth: .5,
layout: 'vbox',
items: [{ // Level-3
html: 'This is some text'
}, {
html: 'This is another text'
}]
}, {
columnWidth: .5,
layout: 'form',
items: [{
xtype: 'textfield'
}, {
xtype: 'textfield'
}]
}]
});
4、请不要随意使用ViewPort,你应该去使用BorderLayout,ViewPort只是BorderLayout的一个实现类,主要应用在最外层的视图窗口;
5、尽可能延迟HTMLElement对象的创建,DOM操作(读/写)的开销一向是昂贵的,读/写DOM时会导致页面的回流(reflows)与重绘(repaints)(参见http://www.zhangxinxu.com/wordpress/2010/01/回流与重绘:css性能让javascript变慢?/),严重的影响性能,可以通过以下方式改善这些问题:
a)组件懒加载,更多的使用xtype方式;
b)尝试再渲染后(afterrender)再执行昂贵的DOM操作;
c)避免组件在初始化的构造函数及initComponent进行一些不必要的初始化动作;
一个Window的小例子:
Js代码
var window = new Ext.Window({
renderTo: Ext.getBody(),
title: 'Window'
}); // 窗口会在这时就被渲染
window.show();
上面这个例子,明显的问题就是window在显示之前渲染到了页面上,改成如下方式:
Js代码
var window = new Ext.Window({
title: 'Window'
});
window.show(); // 窗口会在显示时才渲染
6、正确使用Window的closeAction属性,closeAction包含两个值:“hide”、“close”,“close”是默认配置,每次关闭窗口时会将窗口销毁,应当根据自己的需求去选用对应的配置。
7、尽可能的在使用委托模式,不论是事件还是一个功能;
事件委托,将事件监听到最外侧的div上,然后再有外层div分发给不同的子节点处理,可以参见TreePanel的事件委托模型;
示例:
一个委托模式的示例是工具条有10个按钮,而你希望在用户将鼠标移动到按钮上面时,为每个按钮委派一个Ext.Tooltip,而且每个Ext.Tooltip都显示不同的文本。
如果你创建10个Ext.Tooltip并委派给10个按钮,那么它不是一个优化的解决方案。你只需要创建一个Ext.Tooltip并委派给10个按钮的父元素,也就是工具条。
当用户将鼠标移动到工具条上方时,你可以显示相同的Ext.Tooltip,但其文本可根据目标元素(实际上就是按钮)而显示不同的文本(越多getTarget方法可了解如何获取目标元素)。
使用这个技术,只需要创建1个Ext.Tooltip,而且只需要在工具条绑定一个监听事件。这可节省内存使用,而且在你的应用运行时实现了相同的效果。
8、组件销毁,对于扩展出来的组件,内部创建的Element,定义的变量,应该销毁,避免不必要的内存泄漏。重写onDestory方法,尽可能的做下面的几个动作:
a)DOM中的HTMLElement;
b)移除所有监听事件以避免内存泄漏;
c)通过递归方式销毁所有子组件;