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.
The following example shows how to add a new function to the MixedCollection class:
1. Define the new
addUnique(key, object)function within theMixedCollectionclass:// 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/>"); });
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;
}
}
}
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/>");
});