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

ExtJS 的组建扩展方法

    博客分类:
  • JS
阅读更多

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扩展例子集

    每个组件都可能带有源代码,这对于我们理解EXTJS组件的实现机制和扩展方法非常有价值。 EXTJS3.0中的扩展通常包括以下部分: 1. **新组件**:开发者可能会创建全新的UI元素,比如一个高级的表格组件,具备更丰富的...

    ExtJs DWR扩展 DWRProxy、DWRTreeLoader、DWRGridProxy

    总结起来,"ExtJs DWR扩展"是通过DWRProxy、DWRTreeLoader和DWRGridProxy来增强ExtJs的远程数据访问能力,提供了一种高效、便捷的方式,使得前端UI可以直接调用服务器端的方法,增强了Web应用程序的用户体验和性能。...

    ExtJS 组件扩展

    ### ExtJS 组件扩展知识点详解 #### 一、ExtJS组件扩展概述 ExtJS是一款基于JavaScript的开源前端框架,主要用于构建复杂的企业级Web应用程序。它提供了丰富的UI组件库,可以帮助开发者快速构建美观且功能强大的...

    Extjs Grid 扩展实例

    在ExtJS中,我们可以通过`Ext.extend()`或使用`Ext.define()`方法创建一个新的类,该类继承自现有类并可以添加新的属性和方法。对于ExtJS Grid,我们可能要扩展其基础配置,比如自定义列、行渲染器、编辑器,甚至是...

    extjs vtype 扩展正则

    Extjs表单VTYPE扩展,方便验证!

    Extjs树分页组件扩展

    "Extjs树分页组件扩展"就是为了解决这一问题而设计的,它通过扩展TreeLoader和PagingToolbar,实现了在树形组件中进行分页加载的效果。 **TreeLoader的扩展** TreeLoader是ExtJS中负责异步加载树节点的类。在原生...

    ExtJs:收集基于ExtJs扩展的一些控件

    本压缩包文件中收集了基于ExtJs扩展的一些控件,这些控件能够进一步增强应用程序的功能和用户体验。 首先,我们来看看“ExtJs:收集基于ExtJs扩展的一些控件”。这个文件可能是对一些自定义或第三方开发的ExtJs控件...

    extjs组建继承结构图

    extjs组建继承结构图 让你了解extjs的整个架构!

    extjs扩展包

    本文是extjs的扩展包,可以在页面中插入图片,把这个js文件放入相应的目录下,extjs就是引用这个类型,就可以插入图片

    ExtJs3.4 扩展的Tags控件

    在本主题中,我们关注的是ExtJs3.4版本中的一个扩展——Tags控件。这个控件允许用户在界面上以标签的形式输入和展示数据,常见于关键词选择或者多值输入的场景。 `Tags控件`是基于`DataView`组件进行扩展的。`...

    extjs扩展教程 网页版

    extjs扩展教程 extjs扩展教程extjs扩展教程

    使用OOP的方式扩展ExtJS UI组建 - 更新版

    更新版的ExtJS扩展可能会涉及到以下几个方面: - **利用ExtJS的最新特性**:随着版本的更新,ExtJS引入了许多新特性,如MVVM模式、DataView动画、TreeGrid等。我们可以利用这些特性来改进原有的组件扩展,提高用户...

    extjs多选 下拉框扩展

    ExtJS 是一个强大的JavaScript应用程序框架,用于构建交互式的Web...这个扩展可能包括了新的配置项、模板修改、事件处理、数据模型、方法以及行为调整等多个方面,使得在ExtJS应用中实现多选下拉框变得更加简单和便捷。

    ExtJS Chart 扩展 - 增加对数据的过滤等操作

    在给定的标题“ExtJS Chart 扩展 - 增加对数据的过滤等操作”中,我们关注的是ExtJS图表组件的功能扩展,特别是关于数据处理,如过滤和操作。 在ExtJS中,图表(Chart)是数据可视化的关键组成部分,它允许用户以...

    extjs扩展的月份控件

    同事写的extjs月份扩展控件,可以直接调用,用于只要求显示月份不显示日期的项目

    Extjs4 combogrid扩展

    这些标签指明了我们正在处理的是ExtJS 4版本,涉及到了Combo和Grid两个核心组件,以及对它们进行扩展的方法。 在提供的压缩包文件中,有三个文件: 1. **GridComboBox.js**:这个文件很可能是实现combogrid扩展的...

    续:ExtJS Chart 扩展(重构了下,并写了个新的示例--内存监控)

    【标题】"续:ExtJS Chart 扩展(重构了下,并写了个新的示例--内存监控)"指的是一个关于ExtJS图表扩展的更新版本,其中作者进行了重构,并且添加了一个全新的示例,用于实现内存监控功能。这个主题涵盖了两个主要的...

    extjs-ux, EXT JS 4的一些插件和扩展.zip

    extjs-ux, EXT JS 4的一些插件和扩展 插件和 EXT JS 4扩展 Ext.ux. aceeditor.Panel 演示( 简单): 链接演示( 流 语法): 链接演示:链接论坛:链接 Ext.ux. grid.feature.Tileview 演示:链接

    ExtJs中datetimefield扩展

    这个“ExtJs中datetimefield扩展”可能包含了一个完整的实现,无需其他依赖,可以直接运行并查看效果。 首先,我们要理解ExtJs的基础。ExtJs是一个JavaScript库,主要用于构建富客户端的Web应用。它提供了一套完整...

    ExtJsHtmlEditor 扩展

    ExtJs HtmlEditor 扩展 可上传视频上传文件上传图片

Global site tag (gtag.js) - Google Analytics