* This function also supports a 2-argument call in which the subclass's constructor is * not passed as an argument. In this form, the parameters are as follows:
*
superclass
* overrides
* * This may contain a special member named constructor. This is used * to define the constructor of the new class, and is returned. If this property is * not specified, a constructor is generated and returned which just calls the * superclass's constructor passing on its parameters.
* For example, to create a subclass of the Ext GridPanel: *
MyGridPanel = Ext.extend(Ext.grid.GridPanel, {
constructor: function(config) {
// Your preprocessing here
MyGridPanel.superclass.constructor.apply(this, arguments);
// Your postprocessing here
},
yourMethod: function() {
// etc.
}
});
Ext.override(MyClass, {
newMethod1: function(){
// etc.
},
newMethod2: function(foo){
// etc.
}
});
Ext.namespace('Company', 'Company.data');
Ext.namespace('Company.data'); // equivalent and preferable to above syntax
Company.Widget = function() { ... }
Company.data.CustomStore = function(config) { ... }
Ext.urlDecode("foo=1&bar=2"); // returns {foo: "1", bar: "2"}
Ext.urlDecode("foo=1&bar=2&bar=3&bar=4", false); // returns {foo: "1", bar: ["2", "3", "4"]}
// gets dom node based on id
var elDom = Ext.getDom('elId');
// gets dom node based on the dom node
var elDom1 = Ext.getDom(elDom);
// If we don't know if we are working with an
// Ext.Element or a dom node use Ext.getDom
function(el){
var dom = Ext.getDom(el);
// do something with the dom node
}
* Returns true if the passed value is empty.
*The value is deemed to be empty if it is
Ext.namespace('Company', 'Company.data');
Ext.namespace('Company.data'); // equivalent and preferable to above syntax
Company.Widget = function() { ... }
Company.data.CustomStore = function(config) { ... }
var sayHi = function(name){
alert('Hi, ' + name);
}
sayHi('Fred'); // alerts "Hi, Fred"
// create a new function that validates input without
// directly modifying the original function:
var sayHiToFriend = sayHi.createInterceptor(function(name){
return name == 'Brian';
});
sayHiToFriend('Fred'); // no alert
sayHiToFriend('Brian'); // alerts "Hi, Brian"
myFunction.createCallback(arg1, arg2)
* Will create a function that is bound to those 2 args. If a specific scope is required in the
* callback, use {@link #createDelegate} instead. The function returned by createCallback always
* executes in the window scope.
* This method is required when you want to pass arguments to a callback function. If no arguments * are needed, you can simply pass a reference to the function as a callback (e.g., callback: myFn). * However, if you tried to pass a function with arguments (e.g., callback: myFn(arg1, arg2)) the function * would simply execute immediately when the code is parsed. Example usage: *
var sayHi = function(name){
alert('Hi, ' + name);
}
// clicking the button alerts "Hi, Fred"
new Ext.Button({
text: 'Say Hi',
renderTo: Ext.getBody(),
handler: sayHi.createCallback('Fred')
});
this.myFunction.createDelegate(this, [arg1, arg2])
* Will create a function that is automatically scoped to obj so that the this variable inside the
* callback points to obj. Example usage:
*
var sayHi = function(name){
// Note this use of "this.text" here. This function expects to
// execute within a scope that contains a text property. In this
// example, the "this" variable is pointing to the btn object that
// was passed in createDelegate below.
alert('Hi, ' + name + '. You clicked the "' + this.text + '" button.');
}
var btn = new Ext.Button({
text: 'Say Hi',
renderTo: Ext.getBody()
});
// This callback will execute in the scope of the
// button instance. Clicking the button alerts
// "Hi, Fred. You clicked the "Say Hi" button."
btn.on('click', sayHi.createDelegate(btn, ['Fred']));
var sayHi = function(name){
alert('Hi, ' + name);
}
// executes immediately:
sayHi('Fred');
// executes after 2 seconds:
sayHi.defer(2000, this, ['Fred']);
// this syntax is sometimes useful for deferring
// execution of an anonymous function:
(function(){
alert('Anonymous');
}).defer(100);
var cls = 'my-class', text = 'Some text';
var s = String.format('<div class="{0}">{1}</div>', cls, text);
// s now contains the string: '<div class="my-class">Some text</div>'
* Utility method for returning a default value if the passed value is empty.
*The value is deemed to be empty if it is
Ext.addBehaviors({
// add a listener for click on all anchors in element with id foo
'#foo a@click' : function(e, t){
// do something
},
// add the same listener to multiple selectors (separated by comma BEFORE the @)
'#foo a, #bar span.some-class@mouseover' : function(){
// do something
}
});
* example:
ImageComponent = Ext.extend(Ext.BoxComponent, {
initComponent: function() {
this.autoEl = { tag: 'img' };
MyComponent.superclass.initComponent.apply(this, arguments);
this.initialBox = Ext.copyTo({}, this.initialConfig, 'x,y,width,height');
}
});
*
// Example 1:
Ext.partition([true, false, true, true, false]); // [[true, true, true], [false, false]]
// Example 2:
Ext.partition(
Ext.query("p"),
function(val){
return val.className == "class1"
}
);
// true are those paragraph elements with a className of "class1",
// false set are those that do not have that className.
*
// Example:
Ext.invoke(Ext.query("p"), "getAttribute", "id");
// [el1.getAttribute("id"), el2.getAttribute("id"), ..., elN.getAttribute("id")]
*
// Example:
Ext.pluck(Ext.query("p"), "className"); // [el1.className, el2.className, ..., elN.className]
* Zips N sets together.
*
// Example 1:
Ext.zip([1,2,3],[4,5,6]); // [[1,4],[2,5],[3,6]]
// Example 2:
Ext.zip(
[ "+", "-", "+"],
[ 12, 10, 22],
[ 43, 15, 96],
function(a, b, c){
return "$" + a + "" + b + "." + c
}
); // ["$+12.43", "$-10.15", "$+22.96"]
*
var sayHi = function(name){
alert('Hi, ' + name);
}
sayHi('Fred'); // alerts "Hi, Fred"
var sayGoodbye = sayHi.createSequence(function(name){
alert('Bye, ' + name);
});
sayGoodbye('Fred'); // both alerts show
var s = String.leftPad('123', 5, '0');
// s now contains the string: '00123'
*
// alternate sort directions
sort = sort.toggle('ASC', 'DESC');
// instead of conditional logic:
sort = (sort == 'ASC' ? 'DESC' : 'ASC');
var s = ' foo bar ';
alert('-' + s + '-'); //alerts "- foo bar -"
alert('-' + s.trim() + '-'); //alerts "-foo bar-"
// Start a simple clock task that updates a div once per second
var updateClock = function(){
Ext.fly('clock').update(new Date().format('g:i:s A'));
}
var task = {
run: updateClock,
interval: 1000 //1 second
}
var runner = new Ext.util.TaskRunner();
runner.start(task);
// equivalent using TaskMgr
Ext.TaskMgr.start({
run: updateClock,
interval: 1000
});
* run : Functionargs argument if specified. If a
* particular scope is required, be sure to specify it using the scope argument.interval : Numberargs : Arrayrun.scope : Objectrun function. Defaults to the task config object.duration : Numberrepeat : Number
// Start a simple clock task that updates a div once per second
var task = {
run: function(){
Ext.fly('clock').update(new Date().format('g:i:s A'));
},
interval: 1000 //1 second
}
Ext.TaskMgr.start(task);