1、尽量不要使用Ext.apply、Ext.override重写Ext组件函数,实在避免不了这样的写法,需要在统一的位置管理起来,方便以后代码维护;
2、尽量使用extend的方式继承扩展组件,这样的写的好处在于能将组件的功能扩展影响局限在单个组件内部,而不影响到父类组件;
3、尽量避免过度的Ext面板的嵌套定义,过度定义会导致多层深度的嵌套HTMLElement创建,以致严重影响了初始化时间、渲染时间和组件的运行时间。例如:
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'
}]
}]
}]
});
这个例子其实只需要三层面板就可以实现了
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的小例子:
var window = new Ext.Window({
renderTo: Ext.getBody(),
title: 'Window'
}); // 窗口会在这时就被渲染
window.show();
上面这个例子,明显的问题就是window在显示之前渲染到了页面上,改成如下方式:
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)通过递归方式销毁所有子组件;
原创文章,转载请注明出处http://zhangdaiping.iteye.com
分享到:
相关推荐
Ext案例总结 最牛的JS框架 泣血大作 分享网友
extjs4.0常用的操作难题,不容易找到的资料,属性和方法,以及板面,开发经验分享
本系统基于Ext 2.0+FleaPHP开发,本系统的重点在于演示如何使用ext进行项目开发,因此服务端的PHP只作简单处理。 具体内容请读者下载第十期的《PHPer》电子杂志阅读...里面将有详细的解释。 分享我的ext开发经验.
好了,今天这篇文章的主题是分享下我使用 ExtJS 操作 DOM 元素的一些经验。 设置元素点击处理函数的方法 代码如下: var elem = Ext.get(‘start’); elem.on(‘click’, function(e, t) { alert(t.id); });...
环境:PHP 5.2.14 CentOS 5.5 第一步:建立扩展骨架 cd php-5.2.14/ext ./ext_skel –extname=laiwenhui 第二步:修改编译参数 cd php-5.2.14/ext/laiwenhui vi config.m4 去掉 PHP_ARG_ENABLE(laiwenhui, whether ...
1.项目代码功能经验证ok,确保稳定可靠运行。欢迎下载使用! 2.主要针对各个计算机相关专业,包括计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网等领域的在校学生、专业教师或企业员工使用。 3.项目...
最近调试EXTJS 4的treegrid实例,看了很多水友的文章,以及官方的demo,没一个可靠的,于是乎自己折腾中...感兴趣的朋友可以了解下本文或许对你有所帮助
我们希望不仅仅是提供一个开发框架,更希望能够将自己的经验整理成解决方案,开发套件分享和贡献给社区。 系列文章 周边 相关项目 贡献 非常欢迎感兴趣,愿意参与其中,共同打造更好PHP生态,Swoole生态的开发者。 ...
1.项目代码功能经验证ok,确保稳定可靠运行。欢迎下载使用! 2.主要针对各个计算机相关专业,包括计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网等领域的在校学生、专业教师或企业员工使用。 3.项目...
本文在前人经验指导下对一些常用的操作做了简单的封装,功能由从DLL中导出类CWordOperate提供。 <br> <br>关键字:Word2003,MFC扩展DLL,报表,CWordOperate <br> <br>一、 鉴于www.vckbase.com中...
Linux 操作系统基础教程 清华大学信息学院计算机系 目 录 前言..........................................................................................................................................