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)通过递归方式销毁所有子组件;
分享到:
相关推荐
### Ext JS 4.1中的`Ext.apply`与`Ext.override` #### 一、Ext.apply详解 `Ext.apply`是Ext JS框架中的一个核心方法,主要用于对象的属性合并。此方法能够将一个或多个对象的属性复制到目标对象中,从而实现对象...
EXT dojochina Ext方法重写是一个关于EXT.js框架中函数重写的专题。EXT.js是一个流行的JavaScript库,用于构建富客户端应用,它提供了丰富的组件、布局管理和数据绑定机制。在EXT.js中,方法重写是一种常见的实践,...
The class is ready for i18n, override the Ext.ux.UploadDialog.Dialog.prototype.i18n object with your language strings, or just pass i18n object in config. Server side handler. The files in the queue...
`"ext override DatePicker"`标签暗示我们需要对EXTJS的原生`DatePicker`组件进行覆盖或者扩展,以便实现自定义布局。在EXTJS中,覆盖(Override)是一种机制,允许我们改变已存在的类的行为,而不直接修改其源代码...
Ext.override(MyApp.form.field.ClearableDate, { reset: function() { this.setValue(null); this.callParent(); } }); ``` 4. **使用新组件**: 在表单中,我们可以像使用普通DateField一样使用我们的...
- 当使用`Ext.override`时,确保不会与其他覆盖方法冲突。 #### 总结 通过上述方法,可以在Ext grid panel中实现实时数据刷新时滚动条位置不变的功能。这对于提高用户体验至关重要,尤其是在处理大量实时数据的...
在JavaScript的世界里,`Ext` 是一个非常知名的库,它为Web开发提供了丰富的组件和工具。这个库基于Sencha公司开发的Ext JS框架,广泛应用于构建复杂的富客户端应用。在这个主题"Ext一些方法的重写"中,我们将深入...
首先,Ext提供了一个名为`Ext.apply`的函数,用于对象之间的属性和方法复制。它接受三个参数:目标对象、源对象和默认对象。`Ext.apply`首先检查是否存在默认对象,并将其属性和方法复制到目标对象中。接着,它遍历...
Ext.override(Ext.grid.plugin.RowExpander, { init: function(grid) { this.callParent(arguments); this.grid = grid; this.grid.addEvents('collapsebody', 'expandbody'); }, toggleRow: function(rowIdx,...
10. `Ext.apply(Object obj, Object config, Object defaults)`:将配置对象的属性合并到目标对象上,如果有defaults参数,会先合并defaults,再合并config。 11-18. `Ext.DomHelper`:这是一个用于DOM操作的实用...
- `Ext.apply()`: 将源对象的属性复制到目标对象上。 - `Ext.applyIf()`: 如果目标对象的属性不存在,则将源对象的属性复制过去。 - `Ext.decode()`: 解码JSON字符串为JavaScript对象。 - `Ext.encode()`: 将...
1. Renamed Coolite.Ext.Web project to Ext.Net 2. Renamed Coolite.Examples project to Ext.Net.Examples 3. Renamed Coolite.Ext.UX project to Ext.Net.UX 4. Renamed Coolite.EmbeddedResourceBuilder ...
xUtils快速使用说明 导入依赖 使用Gradle构建时添加一下依赖即可: javascript compile 'org.xutils:xutils:3.3.22' 如果使用eclipse可以 点击这里下载aar文件, 然后用zip解压, 取出jar包和so文件. 添加配置混淆设置 ...
- 将`ext-3.2.1\ext-all.js`与`ext-3.2.1\adapter\ext\ext-base.js`这两个JavaScript文件复制到`ext`文件夹中。 - 将`ext-3.2.1`下的整个`resources`文件夹也拷贝到`ext`文件夹下。 - **最终目录结构**:完成以上...
接下来,我们将深入探讨 Lua 中的类、继承以及函数重写(override)。 首先,让我们理解 Lua 中的“类”。在 Lua 中,你可以创建一个表来代表类,这个表包含了对象的所有属性和方法。例如: ```lua Person = { ...
1. 尽量避免过度使用`Ext.override()`,因为它可能导致难以追踪代码的来源和修改,影响可维护性。 2. 使用`Ext.extend()`创建新类时,考虑是否有必要创建一个完全独立的类,或者使用配置对象和混合(mixin)来实现...
Ext.apply(obj, config, defaults); // obj现在包含了config和defaults的所有属性 ``` ##### 3. `applyIf(Object obj, Object config):Object` - **功能**:与`apply`类似,但只有当`obj`中不存在某个属性时才会...
总结来说,"Ext继承和扩展写的例子"这个主题,涉及到的核心知识点包括JavaScript的面向对象编程,Ext JS库的使用,特别是其组件模型和继承机制。通过学习这个例子,开发者可以深入理解如何利用这些特性创建可复用、...
在定义类时,推荐使用`Ext.define`函数,它能自动创建必要的命名空间。例如: ```javascript // Ext 3 Ext.ns('MyApp'); // 创建命名空间 MyApp.CustomerPanel = Ext.extend(Ext.Panel, { // ... }); // Ext 4 ...
这意味着当派生类的方法签名与基类的虚方法完全相同时,可以使用 `override` 关键字来实现对基类方法的重写。这样做的结果是,无论通过哪种类型的引用调用该方法,实际执行的都是派生类中的方法。 **示例代码:** ...