- 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:
- Define the new
addUnique(key, object)
function within theMixedCollection
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); } });
- 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/>"); });
- Painter繪畫實例教程
- AutoCAD 2014 中文版從入門到精通
- Python數據分析實戰:從Excel輕松入門Pandas
- 3ds Max 2015中文版從入門到精通
- Oracle Enterprise Manager Grid Control 11g R1: Business Service Management
- Photoshop CS6從入門到精通
- 平面設計制作標準教程(微課版 第2版)
- Instant Flask Web Development
- Python Testing Cookbook
- Mastering Zabbix
- 中文版Photoshop平面設計入門教程
- SketchUP草圖繪制從新手到高手
- JBoss Drools Business Rules
- Oracle E/Business Suite R12 Supply Chain Management
- 中文版3ds Max 2014/VRay 效果圖制作實例教程(全彩超值版)