/**
文檔準備好以後，可以使用選擇器對元素添加監聽事件，事件名的前綴是“@”
<pre><code>
Ext.addBehaviors({
//對所以id為foo的a元素添加 單擊事件
'#foo a@click' : function(e, t){
// do something
},
// 相同的監聽添加到多個控件上(在“@”前用“，“隔開各控件)
'#foo a, #bar span.some-class@mouseover' : function(){
// do something
}
});
</code></pre>
* o是文檔加載完成后，添加事件的列表
*/
addBehaviors : function(o){
if(!Ext.isReady){
Ext.onReady(function(){
Ext.addBehaviors(o);
});
return;
}
var cache = {}; //簡單的緩存對相同的控件多次添加監聽事件。
for(var b in o){
//循環讀取每筆事件，形如：'#foo a@click'，由”@“分割取到的字符串
var parts = b.split('@');
if(parts[1]){ // 如果事件名存在
var s = parts[0];//s 相當于欲添加事件的控件 形如：#foo a
if(!cache[s]){//如果緩存中沒有對此控件的注冊
cache[s] = Ext.select(s);//使用domquery方式得到 id為foo的a 標籤對象
}
cache[s].on(parts[1], o[b]);//對監聽的控件調用監聽的回調方法”function(e, t){// do something},“
}
}
cache = null;//執行完后 緩存清空
},
/**
*生成不重複的id標示，id一旦從在即不能變更
給EL這個控件添加id，prefix為此id的標示（默認為”ext-gen“），idseed為全局變量 初始值為”0“
最後返回”前綴“+全局變量當前的值最為此控件唯一標示
*/
id : function(el, prefix){
prefix = prefix || "ext-gen";
el = Ext.getDom(el);
var id = prefix + (++idSeed);
return el ? (el.id ? el.id : (el.id = id)) : id;
},
/**
* Extends one class with another class and optionally overrides members with the passed literal. This class
* also adds the function "override()" to the class that can be used to override
* members on an instance.
* @param {Object} subclass The class inheriting the functionality
* @param {Object} superclass The class being extended
* @param {Object} overrides (optional) A literal with members
* @method extend
*/
//js中的繼承主要是將子類中的原型設置成為父類的一個實例，（這樣子類就用有了父類原型的所有成員）
//并重新將子類原型的構造器設置為子類自己
/*
function Animal(){}
function Tiger(){}
Tiger.prototype = new Animal()
Tiger.prototype.constructor = Tiger
function Extend(subFn, superFn){
subFn.prototype = new superFn()
subFn.prototype.constructor = subFn
}
*/
extend : function(){
// 內部覆蓋，把傳入對象的屬性COPY給調用對象
var io = function(o){
for(var m in o){
this[m] = o[m];
}
};
//sb子類，sp父類，overrides覆蓋屬性 將他本身攜帶的屬性對子類進行覆蓋
return function(sb, sp, overrides){
/*
使用ext的extend的兩種繼承方式
//MyClass = Ext.extend(SuperClass, { /* */ });
//Ext.extend(MyClass, SuperClass, { /* */});
//*/
if(typeof sp == 'object'){
//如果第二個參數是一個object，則證明使用第一種繼承方式，各參數換位
overrides = sp;
sp = sb;
//this是作為參數傳遞的所以這裡的this指的是sb對象，這裡調用父類的構造方法
//相當于 this 調用 sp 方法傳參數為arguments。
sb = function(){sp.apply(this, arguments);};
}
//F為空方法，spp是父類的原型
var F = function(){}, sbp, spp = sp.prototype;
//F的原型即父類的原型
F.prototype = spp;
//子類原型指向父類實例 把引用給sbp
sbp = sb.prototype = new F();
//把sb子類原型的構造方法 指向自己；
sbp.constructor=sb;
//把sb的父類指向父類的原型
sb.superclass=spp;
//給父類添加構造方法
if(spp.constructor == Object.prototype.constructor){
spp.constructor=sp;
}
//給子類添加override方法
sb.override = function(o){
//給sb的原型添加O中的方法
Ext.override(sb, o);
};
//子類原型的override方法指向io
/*
var io = function(o){
for(var m in o){
this[m] = o[m];
}
};
*/
sbp.override = io;
//把overrides中的方法 添加給子類的原型
Ext.override(sb, overrides);
return sb;
};
}(),
/**
* Adds a list of functions to the prototype of an existing class,
overwriting any existing methods with the same name.
* Usage:<pre><code>
Ext.override(MyClass, {
newMethod1: function(){
// etc.
},
newMethod2: function(foo){
// etc.
}
});
</code></pre>
* @param {Object} origclass The class to override
* @param {Object} overrides The list of functions to add to origClass.
This should be specified as an object literal
* containing one or more methods.
* @method override
*/
//給origclass的原型添加 多個方法
override : function(origclass, overrides){
if(overrides){
var p = origclass.prototype;
for(var method in overrides){
p[method] = overrides[method];
}
}
},
/**
* 給非全局變量添加作用域
* <pre><code>
Ext.namespace('Company', 'Company.data');
Company.Widget = function() { ... }
Company.data.CustomStore = function(config) { ... }
</code></pre>
* @param {String} namespace1
* @param {String} namespace2
* @param {String} etc
* @method namespace?
*/
namespace : function(){
var a=arguments, o=null, i, j, d, rt;
for (i=0; i<a.length; ++i) {
d=a[i].split(".");
rt = d[0];
eval('if (typeof ' + rt + ' == "undefined"){' + rt + ' = {};} o = ' + rt + ';');
for (j=1; j<d.length; ++j) {
o[d[j]]=o[d[j]] || {};
o=o[d[j]];
}
}
},
/**
Ext.urlEncode({foo: 1, bar: 2});轉換成"foo=1&bar=2"返回
* Takes an object and converts it to an encoded URL. e.g. Ext.urlEncode({foo: 1, bar: 2});
would return "foo=1&bar=2". Optionally, property values can be arrays,
instead of keys and the resulting string that's returned will contain a name/value pair for each array value.
* @param {Object} o
* @return {String}
*/
urlEncode : function(o){
if(!o){
return "";
}
var buf = [];
for(var key in o){
//url編碼encodeURIComponent url解碼decodeURIComponent
var ov = o[key], k = encodeURIComponent(key);
var type = typeof ov;
if(type == 'undefined'){
buf.push(k, "=&");
}else if(type != "function" && type != "object"){
buf.push(k, "=", encodeURIComponent(ov), "&");
}else if(ov instanceof Array){
if (ov.length) {
for(var i = 0, len = ov.length; i < len; i++) {
buf.push(k, "=", encodeURIComponent(ov[i] === undefined ? '' : ov[i]), "&");
}
} else {
buf.push(k, "=&");
}
}
}
buf.pop();
return buf.join("");
},
/**
Ext.urlDecode("foo=1&bar=2")轉換{foo: 1, bar: 2}
或者Ext.urlDecode("foo=1&bar=2&bar=3&bar=4", true)轉換為 {foo: 1, bar: [2, 3, 4]}.
如果overwrite設置為true則Ext.urlDecode("foo=1&bar=2&bar=3&bar=4", true)轉換為 {foo: 1, bar:2, bar:3,bar: 4}.
overwrite默認設為FALSE
@return {Object} A literal with members
*/
urlDecode : function(string, overwrite){
if(!string || !string.length){
return {};
}
var obj = {};
var pairs = string.split('&');
var pair, name, value;
for(var i = 0, len = pairs.length; i < len; i++){
pair = pairs[i].split('=');
name = decodeURIComponent(pair[0]);
value = decodeURIComponent(pair[1]);
if(overwrite !== true){
if(typeof obj[name] == "undefined"){
obj[name] = value;
}else if(typeof obj[name] == "string"){
obj[name] = [obj[name]];
obj[name].push(value);
}else{
obj[name].push(value);
}
}else{
obj[name] = value;
}
}
return obj;
},
/**
* 迭代array中的元素調用fn，知道調用返回為false。最後返回為真的個數
fn方法將得到三個參數(Object item, Number index, Array allItems)
* @param {Array/NodeList/Mixed} array
* @param {Function} fn
* @param {Object} scope
*/
each : function(array, fn, scope){
if(typeof array.length == "undefined" || typeof array == "string"){
array = [array];
}
for(var i = 0, len = array.length; i < len; i++){
if(fn.call(scope || array[i], array[i], i, array) === false){ return i; };
}
},
// deprecated
/*
instanceof和typeof都能用來判斷一個變量是否為空或是什麼類型的變量。
typeof用以獲取一個變量的類型，typeof一般只能返回如下幾個結果：number,boolean,
string,function,object,undefined。我們可以使用typeof來獲取一個變量是否存在，
如if(typeof a!="undefined"){}，而不要去使用if(a)因為如果a不存在（未聲明）則會出錯，
對於Array, Null等特殊對象使用typeof一律返回object，這正是typeof的局限性。
如果我們希望獲取一個對像是否是數組，或判斷某個變量是否是某個對象的實例則要選擇使用instanceof。
instanceof用於判斷一個變量是否某個對象的實例，如var a=new Array();alert(a instanceof Array);
會返回true，同時alert(a instanceof Object)也會返回true;這是因為Array是object的子類。
再如：function test(){};var a=new test();alert(a instanceof test)會返回true。
談到instanceof我們要多插入一個問題，就是function的arguments，我們大家也許都認為arguments是一個Array，
但如果使用instaceof去測試會發現arguments不是一個Array對象，儘管看起來很像
*/
combine : function(){
var as = arguments, l = as.length, r = [];
for(var i = 0; i < l; i++){
var a = as[i];
if(a instanceof Array){
//返回數組連接
r = r.concat(a);
}else if(a.length !== undefined && !a.substr){
//從0位置截取a 返回截取后的字符串
r = r.concat(Array.prototype.slice.call(a, 0));
}else{
r.push(a);
}
}
return r;
},
/**
* 把指定字符串轉換成 正則表達式
* @param {String} str
* @return {String}
*/
escapeRe : function(s) {
return s.replace(/([.*+?^${}()|[/]])/g, "//$1");
},
// 延時delay調用cb方法
callback : function(cb, scope, args, delay){
if(typeof cb == "function"){
if(delay){
cb.defer(delay, scope, args || []);
}else{
cb.apply(scope, args || []);
}
}
},
/**
* Return the dom node for the passed string (id), dom node, or Ext.Element
得到一個節點元素
* @param {Mixed} el
* @return HTMLElement
*/
getDom : function(el){
if(!el || !document){
return null;
}
return el.dom ? el.dom : (typeof el == 'string' ? document.getElementById(el) : el);
},
/**
* Returns the current HTML document object as an {@link Ext.Element}.
當期document作為ext元素返回
* @return Ext.Element The document
*/
getDoc : function(){
return Ext.get(document);
},
/**
* Returns the current document body as an {@link Ext.Element}.
* @return Ext.Element The document body
當前的body作為ext的元素返回
*/
getBody : function(){
return Ext.get(document.body || document.documentElement);
},
/**
* Shorthand for {@link Ext.ComponentMgr#get}
*根據id返回一個組件對象
*/
getCmp : function(id){
return Ext.ComponentMgr.get(id);
},
/**
校驗一個參數的值是不是 “numeric”類型，如果不是則返回一個特殊值
*/
num : function(v, defaultValue){
if(typeof v != 'number'){
return defaultValue;
}
return v;
},
/**
* 銷毀元素并去除監聽
* intended for arguments of type {@link Ext.Element} and {@link Ext.Component}, but any subclass of
* {@link Ext.util.Observable} can be passed in. Any number of elements and/or components can be
* passed into this function in a single call as separate arguments.
* @param {Mixed} arg1 An {@link Ext.Element} or {@link Ext.Component} to destroy
* @param {Mixed} (optional) arg2
* @param {Mixed} (optional) etc...
*/
destroy : function(){
for(var i = 0, a = arguments, len = a.length; i < len; i++) {
var as = a[i];
if(as){
if(as.dom){
as.removeAllListeners();
as.remove();
continue;
}
if(typeof as.destroy == 'function'){
as.destroy();
}
}
}
},
removeNode : isIE ? function(){
//如果是ie瀏覽器 則在被欲移除的結尾加上“div” 然後整個節點對象內部設置為空
var d;
return function(n){
if(n){
d = d || document.createElement('div');
d.appendChild(n);
d.innerHTML = '';
}
}
}() : function(n){
if(n && n.parentNode){
//如果是其他瀏覽器 直接找到欲移除節點的父節點 移除他的子節點皆可
n.parentNode.removeChild(n);
}
},
// inpired by a similar function in mootools library
/**
返回傳進參數的類型
* Returns the type of object that is passed in. If the object passed in is null or undefined it
* return false otherwise it returns one of the following values:<ul>
* <li><b>string</b>: If the object passed is a string</li>
* <li><b>number</b>: If the object passed is a number</li>
* <li><b>boolean</b>: If the object passed is a boolean value</li>
* <li><b>function</b>: If the object passed is a function reference</li>
* <li><b>object</b>: If the object passed is an object</li>
* <li><b>array</b>: If the object passed is an array</li>
* <li><b>regexp</b>: If the object passed is a regular expression</li>
* <li><b>element</b>: If the object passed is a DOM Element</li>
* <li><b>nodelist</b>: If the object passed is a DOM NodeList</li>
* <li><b>textnode</b>: If the object passed is a DOM text node and contains something other than whitespace</li>
* <li><b>whitespace</b>: If the object passed is a DOM text node and contains only whitespace</li>
* @param {Mixed} object
* @return {String}
*/
type : function(o){
if(o === undefined || o === null){
return false;
}
if(o.htmlElement){
return 'element';
}
var t = typeof o;
if(t == 'object' && o.nodeName) {
switch(o.nodeType) {
/*
Integer that receives one of the following values.
1 Element node.
3 Text node.
*/
case 1: return 'element';
case 3: return (//S/).test(o.nodeValue) ? 'textnode' : 'whitespace';
}
}
if(t == 'object' || t == 'function') {
switch(o.constructor) {
case Array: return 'array';
case RegExp: return 'regexp';
}
if(typeof o.length == 'number' && typeof o.item == 'function') {
return 'nodelist';
}
}
return t;
},
/**
判斷傳進來的參數是不是 null 或者 undefined
allowBlank 為TRUE 返回 FALSE
*/
isEmpty : function(v, allowBlank){
return v === null || v === undefined || (!allowBlank ? v === '' : false);
},
//如果v為null 則返回默認值 如果不為null則返回v
value : function(v, defaultValue, allowBlank){
return Ext.isEmpty(v, allowBlank) ? defaultValue : v;
},
/** @type Boolean */
isOpera : isOpera,
/** @type Boolean */
isSafari : isSafari,
/** @type Boolean */
isIE : isIE,
/** @type Boolean */
isIE6 : isIE && !isIE7,
/** @type Boolean */
isIE7 : isIE7,
/** @type Boolean */
isGecko : isGecko,
/** @type Boolean */
isBorderBox : isBorderBox,
/** @type Boolean */
isLinux : isLinux,
/** @type Boolean */
isWindows : isWindows,
/** @type Boolean */
isMac : isMac,
/** @type Boolean */
isAir : !!window.air,
/**
By default, Ext intelligently decides whether floating elements should be shimmed. If you are using flash,
you may want to set this to true.
@type Boolean
ext會自動決定是否填充浮動的元素，如果要使用flash 應該把這個屬性設置為true
*/
useShims : ((isIE && !isIE7) || (isGecko && isMac))
});
// in intellij using keyword "namespace" causes parsing errors
//ext的ns屬性指向他的名字空間
Ext.ns = Ext.namespace;
})();
Ext.ns("Ext", "Ext.util", "Ext.grid", "Ext.dd", "Ext.tree", "Ext.data",
"Ext.form", "Ext.menu", "Ext.state", "Ext.lib", "Ext.layout", "Ext.app", "Ext.ux");
/**
*擴展function
* These functions are available on every Function object (any JavaScript function).
*/
Ext.apply(Function.prototype, {
/**
委托
fn = myFunction.createCallback(myarg, myarg2)；
fn()===myFunction(myarg, myarg2);
*/
createCallback : function(/*args...*/){
// make args available, in function below
var args = arguments;
var method = this;
return function() {
return method.apply(window, args);
};
},
/**
* Creates a delegate (callback) that sets the scope to obj.
* Call directly on any function. Example: <code>this.myFunction.createDelegate(this)</code>
* Will create a function that is automatically scoped to this.
* @param {Object} obj (optional) The object for which the scope is set
* @param {Array} args (optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
* @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
* if a number the args are inserted at the specified position
* @return {Function} The new function
代理
var myclass=new Object();
myclass.alert=window.alert.createDelegate(window);
myclass.alert('alert1');
*/
createDelegate : function(obj, args, appendArgs){
var method = this;
return function() {
var callArgs = args || arguments;
if(appendArgs === true){
callArgs = Array.prototype.slice.call(arguments, 0);
callArgs = callArgs.concat(args);
}else if(typeof appendArgs == "number"){
callArgs = Array.prototype.slice.call(arguments, 0); // copy arguments first
var applyArgs = [appendArgs, 0].concat(args); // create method call params
Array.prototype.splice.apply(callArgs, applyArgs); // splice them in
}
return method.apply(obj || window, callArgs);
};
},
/**
* Calls this function after the number of millseconds specified.
* @param {Number} millis The number of milliseconds for the setTimeout call (if 0 the function is executed immediately)
* @param {Object} obj (optional) The object for which the scope is set
* @param {Array} args (optional) Overrides arguments for the call. (Defaults to the arguments passed by the caller)
* @param {Boolean/Number} appendArgs (optional) if True args are appended to call args instead of overriding,
* if a number the args are inserted at the specified position
* @return {Number} The timeout id that can be used with clearTimeout
*/
//延時執行方法
defer : function(millis, obj, args, appendArgs){
var fn = this.createDelegate(obj, args, appendArgs);
if(millis){
return setTimeout(fn, millis);
}
fn();
return 0;
},
/**
* Create a combined function call sequence of the original function + the passed function.
* The resulting function returns the results of the original function.
* The passed fcn is called with the parameters of the original function
* @param {Function} fcn The function to sequence
* @param {Object} scope (optional) The scope of the passed fcn (Defaults to scope of original function or window)
* @return {Function} The new function
*/
//聯合兩個function
createSequence : function(fcn, scope){
if(typeof fcn != "function"){
return this;
}
var method = this;
return function() {
var retval = method.apply(this || window, arguments);
fcn.apply(scope || this || window, arguments);
return retval;
};
},
/**
* Creates an interceptor function. The passed fcn is called before the original one. If it returns false,
the original one is not called. * The resulting function returns the results of the original function.
* The passed fcn is called with the parameters of the original function.
* @addon
* @param {Function} fcn The function to call before the original
* @param {Object} scope (optional) The scope of the passed fcn (Defaults to scope of original function or window)
* @return {Function} The new function
*/
//方法執行前添加一個攔截方法，攔截方法返回FALSE 原方法不被執行
createInterceptor : function(fcn, scope){
if(typeof fcn != "function"){
return this;
}
var method = this;
return function() {
fcn.target = this;
fcn.method = method;
if(fcn.apply(scope || this || window, arguments) === false){
return;
}
return method.apply(this || window, arguments);
};
}
});
/**
* @class String
* These functions are available as static methods on the JavaScript String object.
*/
//擴展String對象
Ext.applyIf(String, {
/**
對字符串中的‘和/加上轉義字符“/”
*/
escape : function(string) {
return string.replace(/('|//)/g, "//$1");
},
/**
給字符串補白 使字符串滿足指定長度
*/
leftPad : function (val, size, ch) {
var result = new String(val);
if(!ch) {
ch = " ";
}
while (result.length < size) {
result = ch + result;
}
return result.toString();
},
/**
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>'
*/
format : function(format){
var args = Array.prototype.slice.call(arguments, 1);
return format.replace(//{(/d+)/}/g, function(m, i){
return args[i];
});
}
});
/**
如果傳進來的value與方法調用著相等 則返回第二個參數 如果不等則返回傳進來的value
此方法返回的數據是一個新的數據 不影響調用者的值
*/
String.prototype.toggle = function(value, other){
return this == value ? other : value;
};
/**
清除字符串的前後加白
*/
String.prototype.trim = function(){
var re = /^/s+|/s+$/g;
return function(){ return this.replace(re, ""); };
}();
/**
* @class Number
*/
Ext.applyIf(Number.prototype, {
/**
判斷當前輸入的數字是否在需要的範圍，如果超出範圍 將返回邊界值
*/
constrain : function(min, max){
return Math.min(Math.max(this, min), max);
}
});
/**
* @class Array
*/
Ext.applyIf(Array.prototype, {
/**
檢測指定對象是否存在於數組中
*/
indexOf : function(o){
for (var i = 0, len = this.length; i < len; i++){
if(this[i] == o) return i;
}
return -1;
},
/**
在數組中移除指定對象
*/
remove : function(o){
var index = this.indexOf(o);
if(index != -1){
this.splice(index, 1);
}
return this;
}
});
/**
返回兩個日期的秒差
*/
Date.prototype.getElapsed = function(date) {
return Math.abs((date || new Date()).getTime()-this.getTime());
};
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
