ExtJS 是一个不错的JS 类库,提供了很多组建。
但是有时候根据项目不同我们需要对他的组建进行一些修改,比如更方便使用之类的。
好在Ext提供了Ext.override方法可以对原有组建进行扩展或者重构。
以下是几个扩充的例子
修复 Ext.TabPanel的一个BUG
说明:Ext.TabPanel如果标签页没有激活的话,其中的内容就不会被初始化。
(如果需要提交全部Tab页内容的时候会出现错误,解决办法是将全部标签页都激活一次。
这个操作也可以封装成一个方法,在初始化TabPanel之后调用)
Ext.override(Ext.TabPanel, {
//激活全部Tab
ensureActiveTab : function() {
this.el.mask();
this.beginUpdate();
var items = this.items;
var activeTab = this.getActiveTab();
for (var i = items.getCount(); i >= 0; i--) {
this.setActiveTab(items.itemAt(i));
}
if (activeTab) {
this.setActiveTab(activeTab);
}
this.endUpdate();
this.el.unmask();
}
});
使用
tabpanel=new Ext.TabPanel(...);
tabpanel.ensureActiveTab(); //该方法会将全部TAB页面都初始化一次,最后选中默认的TAB页标签
/**
* 扩充 Ext.form.FormPanel
*/
我们需要对Ext表单操作的时候,往往需要先通过FormPanel得到BasicForm,然后在进行操作。
比如清空一个表单需要写成。
FormPanel.form.reset();
有时候这样比较繁琐,我们可以通过对FormPanel进行改造,让代码更简洁。
以下是将BasicForm的一些方法封装到FormPanel中,以便使用的时候更方便一些。
Ext.override(Ext.form.FormPanel, {
reset : function() {
return this.getForm().reset();
},
isValid : function() {
return this.getForm().isValid();
},
setValues : function(values) {
return this.getForm().setValues(values);
},
getValues : function(asString) {
return this.getForm().getValues(asString);
},
findField : function(id) {
return this.getForm().findField(id);
},
markInvalid : function(errors) {
return this.getForm().markInvalid(errors);
}
});
这样我们使用的时候不需要写
FormPanel.getForm().reset();
而只需要写
FormPanel.reset();
/**
* 扩充Ext.form.ComboBox
*/
Ext的ComboBox有需要写很多参数,而且初始化数据的数组结构写起来也不是很明了。
但是实际上我们可以根据实际应用,将这些参数封装。
Ext.override(Ext.form.ComboBox, {
triggerAction : 'all', //默认是query,但是我们一般都需要下拉框显示全部内容
editable : false, //Ext默认可编辑,但其实我们多数情况下拉框都不可编辑
mode : 'local', // 设置本地读取数据
valueField : 'value',
displayField : 'text',
/* 重载initComponent 设置默认hiddenName为组件name */
initComponent : (function() {
var originalInitComponent = Ext.form.ComboBox.prototype.initComponent;
return (function() {
//如果不是通过转换DOM元素生成的控件,并且控件类型是combo,并且控件配置了name属性,并且控件未配置hiddenName属性,那么将hiddenName设置为name
if (!this.transform && this.xtype == "combo" && ("name" in this) && !("hiddenName" in this)) {
this.hiddenName = this.name;
}
//如果this.store是Object MAP{value:text}格式的话,将其适配成Array格式数据
if (Ext.isObject(this.store)) {
var value, text, store = [];
for (value in this.store) {
if (Ext.isString(text = this.store[value])) {
store.push([value, text]);
} else {
store = false;
break;
}
}
if (store) {
this.store = store;
}
value = text = store = null;
}
originalInitComponent.apply(this, arguments);
if (!this.store && this.mode == "local") {
this.store = new Ext.data.ArrayStore({
fields : [this.valueField, this.displayField],
data : [],
expandData : true,
autoDestroy : true
});
}
});
});
以上的扩充,我们还扩充了Ext原有的数据结构,经过这个封装,我们可以很简单的为ComboBox设置初始数值。
原有的Ext初始化方法
new Ext.form.ComboBox({
triggerAction : 'all',
editable : false,
mode : 'local',
name : "comboName",
hiddenName :"comboName"
valueField : 'value',
displayField : 'text',
store:[['val1','项目1'],['val2','项目2'],[ 'val3','项目3'],[ 'val4','项目4'],['val5','项目5']]
})
经过扩充后我们只需要简单的写成
new Ext.form.ComboBox({
name : "comboName",
store:{
'val1':'项目1',
'val2':'项目2',
'val3':'项目3',
'val4':'项目4',
'val5':'项目5'
}
})
修复Ext JS 3.1.1 Store 的一个BUG:
(PS:该BUG导致Store 的baseParams参数只有第一次更改时候生效。
BUG原因是Ext JS 只对lastOptions 进行了浅拷贝,解决方法使用深拷贝生成新的lastOptions 。)
Ext.override(Ext.data.Store, {
storeOptions : function(o) {
o = Ext.apply({}, o);
delete o.callback;
delete o.scope;
this.lastOptions = Ext.decode(Ext.encode(o));
}
});
分享到:
相关推荐
每个组件都可能带有源代码,这对于我们理解EXTJS组件的实现机制和扩展方法非常有价值。 EXTJS3.0中的扩展通常包括以下部分: 1. **新组件**:开发者可能会创建全新的UI元素,比如一个高级的表格组件,具备更丰富的...
总结起来,"ExtJs DWR扩展"是通过DWRProxy、DWRTreeLoader和DWRGridProxy来增强ExtJs的远程数据访问能力,提供了一种高效、便捷的方式,使得前端UI可以直接调用服务器端的方法,增强了Web应用程序的用户体验和性能。...
### ExtJS 组件扩展知识点详解 #### 一、ExtJS组件扩展概述 ExtJS是一款基于JavaScript的开源前端框架,主要用于构建复杂的企业级Web应用程序。它提供了丰富的UI组件库,可以帮助开发者快速构建美观且功能强大的...
在ExtJS中,我们可以通过`Ext.extend()`或使用`Ext.define()`方法创建一个新的类,该类继承自现有类并可以添加新的属性和方法。对于ExtJS Grid,我们可能要扩展其基础配置,比如自定义列、行渲染器、编辑器,甚至是...
Extjs表单VTYPE扩展,方便验证!
"Extjs树分页组件扩展"就是为了解决这一问题而设计的,它通过扩展TreeLoader和PagingToolbar,实现了在树形组件中进行分页加载的效果。 **TreeLoader的扩展** TreeLoader是ExtJS中负责异步加载树节点的类。在原生...
本压缩包文件中收集了基于ExtJs扩展的一些控件,这些控件能够进一步增强应用程序的功能和用户体验。 首先,我们来看看“ExtJs:收集基于ExtJs扩展的一些控件”。这个文件可能是对一些自定义或第三方开发的ExtJs控件...
extjs组建继承结构图 让你了解extjs的整个架构!
本文是extjs的扩展包,可以在页面中插入图片,把这个js文件放入相应的目录下,extjs就是引用这个类型,就可以插入图片
在本主题中,我们关注的是ExtJs3.4版本中的一个扩展——Tags控件。这个控件允许用户在界面上以标签的形式输入和展示数据,常见于关键词选择或者多值输入的场景。 `Tags控件`是基于`DataView`组件进行扩展的。`...
extjs扩展教程 extjs扩展教程extjs扩展教程
更新版的ExtJS扩展可能会涉及到以下几个方面: - **利用ExtJS的最新特性**:随着版本的更新,ExtJS引入了许多新特性,如MVVM模式、DataView动画、TreeGrid等。我们可以利用这些特性来改进原有的组件扩展,提高用户...
ExtJS 是一个强大的JavaScript应用程序框架,用于构建交互式的Web...这个扩展可能包括了新的配置项、模板修改、事件处理、数据模型、方法以及行为调整等多个方面,使得在ExtJS应用中实现多选下拉框变得更加简单和便捷。
在给定的标题“ExtJS Chart 扩展 - 增加对数据的过滤等操作”中,我们关注的是ExtJS图表组件的功能扩展,特别是关于数据处理,如过滤和操作。 在ExtJS中,图表(Chart)是数据可视化的关键组成部分,它允许用户以...
同事写的extjs月份扩展控件,可以直接调用,用于只要求显示月份不显示日期的项目
这些标签指明了我们正在处理的是ExtJS 4版本,涉及到了Combo和Grid两个核心组件,以及对它们进行扩展的方法。 在提供的压缩包文件中,有三个文件: 1. **GridComboBox.js**:这个文件很可能是实现combogrid扩展的...
【标题】"续:ExtJS Chart 扩展(重构了下,并写了个新的示例--内存监控)"指的是一个关于ExtJS图表扩展的更新版本,其中作者进行了重构,并且添加了一个全新的示例,用于实现内存监控功能。这个主题涵盖了两个主要的...
extjs-ux, EXT JS 4的一些插件和扩展 插件和 EXT JS 4扩展 Ext.ux. aceeditor.Panel 演示( 简单): 链接演示( 流 语法): 链接演示:链接论坛:链接 Ext.ux. grid.feature.Tileview 演示:链接
这个“ExtJs中datetimefield扩展”可能包含了一个完整的实现,无需其他依赖,可以直接运行并查看效果。 首先,我们要理解ExtJs的基础。ExtJs是一个JavaScript库,主要用于构建富客户端的Web应用。它提供了一套完整...
ExtJs HtmlEditor 扩展 可上传视频上传文件上传图片