ExtJS 的组建扩展方法

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));
   }
});