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，怎么进行编辑。