`
zhangdaiping
  • 浏览: 129417 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ext的一些经验分享

 
阅读更多
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
分享到:
评论
1 楼 a414910332 2012-01-16  
我想问下Extjs4的Tree没有editreegrid,怎么进行编辑。

相关推荐

    Ext2.02的一些总结

    描述中虽然没有提供具体信息,但我们可以从博客链接(https://pengjj2.iteye.com/blog/1197832)推测,博主可能分享了他们在使用Ext JS 2.02版本时的经验、遇到的问题及解决方案,或者对新特性和性能优化进行了分析...

    Ext java web实战项目 企业进销存系统

    7. **实战经验分享**:本项目不仅提供了技术上的实践,还包含了解决问题和优化方案的实战经验,这对于开发者来说是一份宝贵的参考资料。通过学习和实践,开发者可以提升自己的技能,更好地应对实际工作中的挑战。 ...

    EXT_DEMO.rar_DEMO_ext desktop de_ext desktop demo_一起ext

    在"一起ext"的描述中,我们可以看出这是一个学习和交流EXT桌面系统开发的社区或活动,鼓励开发者分享经验和案例,共同进步。 综上所述,EXT_DEMO.rar包含的DEMO是一个实践EXT桌面系统开发的实例,它涵盖了EXT库的...

    ext 实例集

    "实例"标签强调了这是实践经验的分享,不仅仅是理论知识。实践中,开发者可能会遇到各种具体问题,如数据加载、事件处理、组件交互等。这些实例提供了实际解决方案,对于解决开发中的难题非常有帮助。 例如,EXT的...

    API Ext2.2中文文档

    这可能意味着在该博客中,作者分享了一些与Ext JS相关的经验或教程,尽管具体的内容没有给出,但我们可以假设它可能包含了一些实践示例、问题解答或者是对API的理解和应用。 标签“源码”和“工具”暗示了Ext JS是...

    ext3.3.1

    博文链接指向了iteye博客上的一个条目(https://slgworld.iteye.com/blog/998236),虽然具体内容未给出,但通常这样的博客文章会包含对技术的解释、使用教程或者是开发者分享的经验,有可能是关于ext3.3.1的介绍、...

    官方Ext3.0实例包

    4. 参与社区:Ext3.0拥有活跃的开发者社区,可以在论坛上提问、分享经验,获取技术支持。 5. 学习教程:网上有许多针对Ext3.0的教程和视频课程,可以帮助初学者系统学习。 通过上述方式,开发者可以逐步掌握Ext3.0...

    Ext-JS 3.0 Cookbook Packt Publishing PDF

    - **调试技巧**:分享了调试Ext JS应用的有效方法,包括使用浏览器的开发者工具来进行调试。 - **部署策略**:指导读者如何将Ext JS应用程序打包和部署到生产环境中。 #### 五、学习建议 - 对于初学者来说,建议先...

    Ext.Net 1.5 Comunity

    8. **社区支持**:作为开源项目,Ext.Net 1.5 Community 拥有活跃的开发者社区,开发者可以在这里获取帮助、分享经验、报告问题并参与到项目的改进中。 9. **兼容性**:1.5版本可能兼容多种ASP.NET版本,包括ASP...

    ext 学习资料

    本篇内容基于一位经验丰富的开发者分享的学习资料——《Ext JS 6 By Example》,该资料详细介绍了Ext JS 6的核心概念和使用方法,旨在帮助初学者快速上手并深入理解Ext JS 6的各项特性。 #### 二、Ext JS 的优势 1...

    EXT dojochina Ext命名空间别名.rar

    在dojochina社区中,开发者们经常分享关于EXT JS的实践经验和技巧,包括如何有效地管理和使用命名空间别名。通过学习和理解EXT命名空间别名的使用,开发人员可以更高效地编写EXT JS应用,降低代码的耦合度,提升开发...

    ext2.0升级ext3.1笔记

    在描述中提到的“NULL”可能是因为原始信息缺失,没有提供具体的升级步骤或经验分享。不过,通常这个升级过程会包括以下几个关键步骤: 1. **备份数据**:在进行任何系统级别的更改之前,确保所有重要数据已备份,...

    新版EXT教程

    4. **性能优化**:分享一些提高EXT应用性能的最佳实践,比如按需加载资源、减少DOM操作等。 #### 六、社区资源与支持 1. **官方文档**:详细介绍了EXT的所有功能和用法,是学习过程中不可或缺的参考资料。 2. **...

    Ext.NET Web Application Development

    5. **最佳实践与优化技巧**:分享作者在多年实践中总结出的最佳实践和优化方法,帮助开发者避免常见陷阱,提高工作效率。 #### 三、技术栈与框架兼容性 本书关注的技术栈主要包括: - **Ext.NET**:作为核心UI库,...

    Ext 教程详解 适

    - 发布EXT源码时的一些细节:如果你打算对EXT进行修改并分享,了解源码发布规范和注意事项是非常必要的。 - 我应该从哪里开始?:对于初学者,建议从理解EXT的基本组件和事件系统开始,然后逐步学习更高级的功能。 -...

    Ext JS 6 by Example翻译

    总之,《Ext JS 6 by Example》中文版是一本全面的教程,覆盖了Ext JS 6的各个方面,无论你是初学者还是有经验的开发者,都能从中获益。通过实例学习,可以更好地理解和运用这个强大的JavaScript框架,为构建高效、...

    Learning_Ext_JS.pdf使用中文文档

    这些作者都是在Web开发领域有着丰富经验的专业人士,他们在本书中分享了自己的知识和实践经验,为读者提供了宝贵的指导。 - **Shea Frederick**:作为本书的第一作者,Shea Frederick 在Web开发领域拥有丰富的经验...

    ext BUG修复补丁

    这可能是开发者社区中的一员分享他们的经验和解决方案,对于其他遇到类似问题的开发者来说是非常有价值的资源。 标签“源码”和“工具”表明这个修复补丁可能涉及到EXTJS的源代码修改,并且可能包含了一些辅助工具...

Global site tag (gtag.js) - Google Analytics