extjs常用工具函數詳解的簡單介紹

本文目錄一覽：

• 1、extjs怎麼自定義函數
• 2、extjs函數調用方法
• 3、ExtJs里頁面初始化函數是什麼？

extjs怎麼自定義函數

extjs的自定義事件主要分三步

1.在類中定義事件名稱：

Person = function(config) {

Person.superclass.constructor.call(this, config);

this.name = config.name || ”;

this.sex = config.sex || ”;

this.addEvents({

“nameChange”: true,

“sexChange”: true

});

};

2.實例化對象，並在該對象中定義事件的監聽函數

var person = new Person({

name: ‘binoruv’,

sex: ‘man’

});

person.on(“nameChange”, function() { alert(“Name has been changed to ” + this.name); });

person.on(“sexChange”, function() { alert(“Sex has been changed to ” + this.sex); });

3.觸發事件

Ext.extend(Person, Ext.util.Observable, {

//extend函數中可以自定義新的方法，也可以重寫原類的方法

setName: function(_name) {

if (this.name != _name) {

this.name = _name;

this.fireEvent(“nameChange”, this);

}

},

setSex: function(_sex) {

if (this.sex != _sex) {

this.sex = _sex;

this.fireEvent(“sexChange”, this);

}

}

});

person.setName(“binoruv”);

person.setSex(“woman”);

整個代碼如下：

script type=”text/javascript”

Person = function(config) {

/*

此處addEvents是調用Person父類Ext.util.Observable的方法

api中對Observable的描述：一個抽象基類（Abstract base class），為事件

機制的管理提供一個公共接口。子類應有一個”events”屬性來

定義所有的事件。

*/

Person.superclass.constructor.call(this, config);

this.name = config.name || ”;

this.sex = config.sex || ”;

this.addEvents({

“nameChange”: true,

“sexChange”: true

});

};

Ext.extend(Person, Ext.util.Observable, {

setName : function(_name) {

if (this.name != _name) {

this.name = _name;

this.fireEvent(“nameChange”, this);

}

},

setSex : function(_sex) {

if (this.sex != _sex) {

this.sex = _sex;

this.fireEvent(“sexChange”, this);

}

}

});

Ext.onReady(function() {

var person = new Person({

name: ‘binoruv’,

sex: ‘Man’

});

person.on(“nameChange”, function() { /*debugger;*/Ext.Msg.alert(“Message”,”Name has been changed to ” + this.name); });

person.on(“sexChange”, function() { /*debugger;*/Ext.Msg.alert(“Message”, “Sex has been changed to ” + this.sex); });

person.setName(“binoruv”);

person.setSex(“Woman”);

});

/script

extjs函數調用方法

當前this所引用的作用域已經改變了,可簡單修改為

init: function() {

var me = this;//保存作用域

this.control({

‘userlist textfield[id=searchId]’:{

keyup:function(textfield, e){

if (e.getKey() == 13) {

me .searchUserByEnter(textfield); //調用原作用域方法

}

}

}

}

規範點可參照extjs寫成scope參數控制this

ExtJs里頁面初始化函數是什麼？

Ext.onReady();

參數：

1、初始化後執行的函數

（必須）

2、函數作用域

（可選）

3、選項【delay，single，buffer】

（可選）

舉例：

Ext.onReady(function(){

console.log(“Ext已加載”);

}, this, {delay: 1000});