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

  • 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.
主站蜘蛛池模板: 广河县| 洛扎县| 花莲市| 关岭| 苍南县| 海原县| 防城港市| 吴桥县| 崇礼县| 仁化县| 剑阁县| 丹棱县| 横山县| 福泉市| 崇左市| 濮阳市| 沙洋县| 寿宁县| 南通市| 五常市| 阳泉市| 肇州县| 宁安市| 华宁县| 仙居县| 团风县| 盐津县| 隆尧县| 贵州省| 博野县| 宁河县| 岗巴县| 如皋市| 铁岭市| 濮阳市| 郯城县| 南通市| 双鸭山市| 武陟县| 广东省| 肃北|