官术网_书友最值得收藏!

  • Ext JS 3.0 Cookbook
  • Jorge Ramon
  • 506字
  • 2021-04-01 13:43:46

Adding features to the Ext JS classes

It is possible to add new functions to the Ext JS classes, as well as modify the behavior of the native functions. To illustrate this point, this recipe explains how you can modify the MixedCollection class so that it features a new function which allows items to be added only when they don't already exist in the collection.

How to do it...

The following example shows how to add a new function to the MixedCollection class:

  1. Define the new addUnique(key, object) function within the MixedCollection class:
    // Add a function to the MixedCollection Class.
    Ext.override(Ext.util.MixedCollection, {
    addUnique: function(key, object) {
    if (this.indexOf(object) > -1) return;
    this.add(key, object);
    }
    });
    
  2. Now, we can use the new feature here:
    Ext.onReady(function() {
    // Create our enhanced collection.
    var col = new Ext.util.MixedCollection();
    // Confirm that the same value cannot be added twice.
    col.add("key 1", "value 1");
    document.write("Original count: " + col.getCount() + "<br/>");
    // Use the added function to make sure duplicates are not
    //added.
    col.addUnique("key 2", "value 1");
    // Number of elements in the collection is still 1.
    document.write("Count after trying to add a duplicate: " + col.getCount() + "<br/>");
    });
    
    

How it works...

The magic in this recipe is achieved through the use of Ext.override(originalClass, overrides). This function adds a list of functions to the prototype of an existing class, replacing any existing methods with the same name:

override: function(origclass, overrides) {
if (overrides) {
var p = origclass.prototype;
Ext.apply(p, overrides);
if (Ext.isIE && overrides.toString != origclass.toString) {
p.toString = overrides.toString;
}
}
}

There's more...

Using Ext.override(originalClass, overrides), it is also possible to modify the behavior of a class's native functions.

Let's modify the add(key, object) function of the MixedCollection class so that only unique values can be added to the collection.

Use Ext.override(originalClass, overrides) to redefine the add function as shown in the following code:

Ext.override(Ext.util.MixedCollection, {
// The new add function, with the unique value check.
add: function(key, o) {
// The unique value check.
if (this.indexOf(o) > -1) return null;
//From this point, the code is the add function's original
//code.
if (arguments.length == 1) {
o = arguments[0];
key = this.getKey(o);
}
if (typeof key == "undefined" || key === null) {
this.length++;
this.items.push(o);
this.keys.push(null);
} else {
var old = this.map[key];
if (old) {
return this.replace(key, o);
}
this.length++;
this.items.push(o);
this.map[key] = o;
this.keys.push(key);
}
this.fireEvent("add", this.length - 1, o, key);
return o;
}
});

Now, we can use the new behavior:

Ext.onReady(function() {
// Create our enhanced collection.
var col = new Ext.util.MixedCollection();
// Confirm that the same value cannot be added twice.
col.add("key 1", "value 1");
document.write("Original count: " + col.getCount() + "<br/>");
// Try to add a duplicate.
col.add("key 2", "value 1");
// Number of elements in the collection is still 1.
document.write("Count after trying to add a duplicate: " + col.getCount() + "<br/>");
});

See also...

  • The next recipe, Building custom JavaScript classes that inherit the functionality of Ext JS, explains how to incorporate Ext JS's features into your custom classes.
主站蜘蛛池模板: 陇川县| 韩城市| 禄劝| 清河县| 天峨县| 上栗县| 闻喜县| 黄浦区| 腾冲县| 灵石县| 平和县| 宝清县| 汝城县| 双峰县| 葫芦岛市| 大连市| 安新县| 曲麻莱县| 杭锦后旗| 扎兰屯市| 丰台区| 叙永县| 贡山| 抚州市| 灵武市| 晋江市| 稷山县| 鲁甸县| 营山县| 三门县| 油尖旺区| 元朗区| 内丘县| 恭城| 灵寿县| 深水埗区| 关岭| 青河县| 和龙市| 武宁县| 若羌县|