概念：
（1）ExtJS是一個面向開發RIA也即富客戶端的AJAX應用，是一個用javascript寫的，主要用於創建前端用戶界面，是一個與後臺技術無關的前端ajax框架。（以前是基於YAHOO-UI,現在已經完全獨立了）
（2）之所以說是框架，因爲它能夠幫助我們在頁面上快速而簡單構建各種各樣的控件，簡化我們自己去寫龐大js實現；它是一種純面向對象的JS框架。擴展性相當的好，可以自己寫擴展，自己定義命名空間，web應用可能感覺太大，不過您可以根據需要按需動態的加載您想要的類庫就可以了，避免了網絡傳輸流量問題。
（3）它提供了豐富的，非常漂亮的外觀體驗，成爲衆多界面層開發人員的追捧，更重要的是它核心的組件基本覆蓋了我們構建富客戶端的常用的組件以及各種功能，在統計方面做的也非常出色。
（4）在3.0的時候提供了類似與dwr的方式調用後臺代碼，交互更加簡單;4.0版本又提出了MVC模式的開發，支持組件化、模塊插拔化設計以及提供本地數據源的支持。
第一章 EXTJS的基本概念
1. 組件component : 能夠以圖形化形式呈現界面的類，其中還可以分爲容器組件與元件組件。
- 容器組件:能夠包含其它容器或者元件組件的類，其是進行單元化組件開發的基礎
- 元件組件：能圖形化形式表現一個片面功能的組件，其不僅在實現了原有傳統WEB程序的現有組件，而且還擴展了許多實用的組件，如刻度器、日曆、樹形列表等。
2. 類
提供功能的非圖形可形的類，它們爲圖形類提供了有力的支持
按其功能可分爲：數據支持類(Data)、拖放支持類（DD）、佈局支持類（layout）、本地狀態存儲支持類（state）、實用工具類（Util）。
密封類：不能被擴展的類
原型類：擴展了javascript標準類庫中的類
3. 方法
作爲類的功能體現，能夠產生改變對象本身產生變化的直接因素
方法按訪問形式可分爲公有方法與私有方法。但由於javascript從原理上根本不支持這種結構，因此在EXTJS中，私有與公有方法完全憑藉着用戶自覺，沒有像JAVA那樣的強制性。
4. 事件
由類定義的，並且可以在類對象自身狀態發生改變的觸發。
只有被定閱的事件纔會有效
如果不需要此事件，應該進行退定，增強程序的執行效率。
5. 配置選項
用以初始化一個EXTJS類對象的手段
注意，配置選項並不一定就是屬性，總算是屬性，也有可能出現屬性返回的類型與你當初指定的配置選項類型不一致的情況。
6. 屬性
能夠在程序運行期間，能夠被訪問，用以瞭解當前類對象的狀態。
在實際的編程中，EXTJS的屬性設置，比較差勁，需要通過了解其源代碼，才能瞭解各種實用屬性的用處。
7. 命名空間
能夠將編寫好的EXTJS類進行有效組織的手段。
這個也是EXTJS能夠稱之爲優秀AJAX框架的特徵之一。
第二章 Ext4.0新特性以及常用數據處理功能
1. extjs4.0對原生javaScript功能進行了擴展（API中的Utilities模塊中的NativeExtensions）
Utilities：常用的一些工具處理類
Native Extensions
Ext.Array
Ext.Number
Ext.Object
Ext.String
Ext.JSON
Ext.Date
Ext.Function
具體擴展了那些，請參照具體的API說明，擴展的原理eg：
var Person = {name:'yfc',age:26};
//alert(Person['name']);
//extjs4.0提供getKey的函數
//alert(Ext.Object.getKey(Person,'yfc'));
Object.prototype.getValue = function(key,defValue){
if(this[key]){
return this[key];
}else{
return defValue;
}
}
alert(Person.getValue("email","[email protected]"));
//由於給Object的原型加上了一個getValue的函數，這樣所有的對象（都繼承Object）默認都會擁有這個函數。
2. 事件機制與新特性
（1）給對象加事件：
Ext.get("元素ID").on("click",function(){
//函數處理部分
});
（2）新特性：create與define（extend 、requires、config、mixins、alias以及statics ）。
- create：在ExtJs4.0中你可以通過new方式也可以用create的方式得到一個對象的實例，在4.0版本中建議用create的方式來創建實例，這樣ExtJS會對創建的實例進行統一管理。
//create第一個參數爲類路徑，第二個參數爲該類的一些初始化參數值（以對象的形式傳遞）
var win = Ext.create('Ext.window.Window',{
width:400,
height:300,
title:'uspcat'
});
win.show();
- alias：別名的作用，可以把一個對象的內部函數暴漏處理啊，給其他對象直接調用。eg：
var o = {
say : function(){
alert(11111);
}
}
//通過o.say()調用函數
var fn = Ext.Function.alias(o,'say');
fn();//通過別名的方式我們就可以直接調用fn()等於o.say()。
- define：是用來定義一個類的，eg：
//create第一個參數是類的全路徑，第二個參數則是類的內容
Ext.define('Bmsys.ml.Window', {
extend:'Ext.window.Window',
title: 'Window',
closeAction: 'hide',
width: 380,
height: 300,
resizable: false,
modal: true,
//定義一些自己的擴展參數
myTitile: 'myWindow',
setTitle: function(){
this.title = this.myTitle;
}
//初始化的方法(類似java中的構造方法)
initComponent: function(){
this.setTitle();
this.callParent(arguments);
}
});
var win = Ext.create('Bmsys.ml.Window',{
titile: 'youWindow';
}
);
win.show();//此時創建出來窗體的標題是myWindow，說明創建時，傳入的初始化參數比構造器先執行。
注意：屬性只能在define時定義，不能通過win.myHeight = function(){...}添加屬性。
- requires: JS的異步加載（按需加載），解決了網絡js文件大而造成頁面打開慢得問題，只有當成需要用到這個類時Ext纔去到後臺加載包含這個類的js文件；在這裏就要，要求我們在寫js類的時候要儘量的模塊化，一個類就是一個js文件，而且類名與js文件名一致，命名空間定義規範。
//這時候要啓用自動加載
Ext.Loader.setConfig({
enabled:true,
paths:{
myApp:'js/Bmsys/ml' //js文件相對路徑，需要與命名空間保持一致
}
});
//這時候只要保證Window.js放在js/Bmsys/ml這個目錄下命名空間爲Bmsys.ml.Window就可以了。
//這時就不需要在JSP文件中引入Window.js,等到下面的程序被執行時，纔會根據命名空間去到後臺加載Window.js。
//原理就是通過命名空間與文件路徑，拼接好後通過寫入<script>標籤的方式加載。
var win = Ext.create('Bmsys.ml.Window',{
titile: 'youWindow',
requires: ['Bmsys.ml.Window']
}
).show();
- config: 這個屬性就是把你定義類的屬性自動的加上get、set方法，省去自己去寫的麻煩事。
Ext.define('Bmsys.ml.Window', {
extend:'Ext.window.Window',
title: 'Window',
width: 380,
height: 300,
//定義一些自己的擴展參數
myTitile: 'myWindow',
config: {
myHeight : 800
}
});var win = Ext.create('Bmsys.ml.Window',{});
alert(win.getMyTitle());//報錯，沒有定義getMyTitle函數
alert(win.getMyHeight());//正常彈出值爲800//放在config裏面定義的屬性，Ext會自動給這個屬性加上get、set方法。
- mixins：類的混合（多繼承實現），因爲我們在用define定義類的時候，extend只能繼承一個類。爲了擁有其它類定義好的方法及功能，我們可以通過類的混合來實現。
Ext.define("say",{
cansay:function(){
alert("hello");
}
})
Ext.define("sing",{
sing:function(){
alert("sing hello 123");
}
})//通過類的混合，就可以輕鬆擁有上面兩個類裏面的函數。
Ext.define('user',{
mixins :{
say : 'say',
sing: 'sing'
}
});var u = Ext.create("user",{});
u.cansay();//say類裏面的方法
u.sing();//sing類裏面的方法- static：類似java中靜態，我們可以定義一些靜態的屬性以及方法，通過類名'.'的方式來訪問。
Ext.define('Computer', {
statics: {
factory: function(brand) {
// 'this' in static methods refer to the class itself
return new this(brand);
}
},
constructor: function() { ... }
});
//直接通過類名'.'的方式訪問靜態方法
var dellComputer = Computer.factory('Dell');3. 數據模型model（MVC中的M層）數據模型對真實世界中對事物在系統中的抽象，extjs4.0中的mode相當於DB中的table 或 JAVA 中的Class。（1）model的幾種創建以及實例的方法。//我們利用Ext.define來創建我們的模型類
//DB table person(name,age,email)
Ext.define("person",{
extend:"Ext.data.Model",
fields:[
{name:'name',type:'auto'},
{name:'age',type:'int'},
{name:'email',type:'auto'}
]
});
//定義的時候，不需要每次寫extend:"Ext.data.Model"
Ext.regModel("user",{
fields:[
{name:'name',type:'auto'},
{name:'age',type:'int'},
{name:'email',type:'auto'}
]
});
//實例化我們的person類
//1.new關鍵字
var p = new person({
name:'uspcat.com',
age:26,
email:'[email protected]'
});
//alert(p.get('name'));
var p1 = Ext.create("person",{
name:'uspcat.com',
age:26,
email:'[email protected]'
});
//alert(p1.get('age'));
var p2 = Ext.ModelMgr.create({
name:'uspcat.com',
age:26,
email:'[email protected]'
},'person');
alert(p2.get('email'));//實例不能直接通過getName得到類名，因爲這個方法是類的 class object.getClass.getName
//alert(p2.getName());//通過類.getName可以獲得類名，因爲person是模型類的定義，而不是實例
（2）model模型Validations以及通過修改原始類來實現自定義驗證器。
alert(person.getName());//在校驗之前，修改原始類裏屬性的默認值
Ext.data.validations.lengthMessage = "錯誤的長度";Ext.onReady(function(){
//通過apply方法來在原始的校驗器類上擴展我們自定義驗證機制的的一個新的驗證方法
Ext.apply(Ext.data.validations,{
//自定義的校驗類型函數
age:function(config, value){
var min = config.min;
var max = config.max;
if(min <= value && value<=max){
return true;
}else{
this.ageMessage = this.ageMessage+"他的範圍應該是["+min+"~"+max+"]";
return false;
}
},
ageMessage:'age數據出現的了錯誤'
});
//定義一個帶有校驗的模型類
Ext.define("person",{
extend:"Ext.data.Model",
fields:[
{name:'name',type:'auto'},
{name:'age',type:'int'},
{name:'email',type:'auto'}
],
validations:[
//type的值就是Ext.data.validations裏方法名稱
//field是你要校驗字段名
//field後面的參數就是名稱等於type值的函數的參數。
{type:"length",field:"name",min:2,max:6},
{type:'age',field:"age",min:0,max:150}
]
});
var p1 = Ext.create("person",{
name:'uspcat.com',
age:-26,
email:'[email protected]'
});
//通過validate()可以得到數據校驗的錯誤集合
//每個error裏面含有兩個屬性(field---校驗字段的名,message---校驗函數返回的錯誤信息)
var errors = p1.validate();
var errorInfo = [];
errors.each(function(v){
errorInfo.push(v.field+" "+v.message);
});
alert(errorInfo.join("\n"));
});注意：自定義的校驗器，你可以通過利用apply方法來爲原始的類增加，也可以通過繼承的方式實現。（3）數據代理proxy：就是通過與後臺的交互來完成數據模型，數據填充的服務類。Ext.define("person",{
extend:"Ext.data.Model",
fields:[
{name:'name',type:'auto'},
{name:'age',type:'int'},
{name:'email',type:'auto'}
],
//通過代理從後臺獲取數據（數據要與model的fields裏面的字段相對應）
proxy:{
type:'ajax',
url:'person.jsp'
}
});
var p = Ext.ModelManager.getModel("person");
//通過load方法來觸發proxy加載數據
p.load(1, {
scope: this,
//record.data就是加載進來的一個數據實例對象
success: function(record, operation) {
alert(record.data.name)
}
});（4）Molde的一對多和多對一關係。//類老師
Ext.regModel("teacher",{
fideld:[
{name:'teacherId',type:"int"},
{name:'name',type:"auto"}
],
//建立老師與學生的1對多關係
hasMany:{
//所關聯的模型
model: 'student',
name : 'getStudent',
//關係字段
filterProperty: 'teacher_Id'
}
});
//學生
Ext.regModel("student",{
fideld:[
{name:'studentId',type:"int"},
{name:'name',type:"auto"},
{name:"teacher_Id",type:'int'}
]
});
//假設t是老師的一個實例，就可以通過t.students 得到子類student的一個store數據集合3. 數據代理Proxy數據代理proxy是進行數據讀寫的主要途徑,通過代理操作數據進行CRUD。CRUD的 每一步操作都會得到唯一的Ext.data.Operation實例，它包含了所有的請求參數。通過構造Ext.data.Operation來傳入請求參數。（1）數據代理proxy目錄結構Ext.data.proxy.Proxy 代理類的根類(它分爲客戶端(Client)代理和服務器代理(Server))A、Ext.data.proxy.Client 客戶端代理Ext.data.proxy.Memory 普通的內存代理。Ext.data.proxy.WebStorage 瀏覽器客戶端存儲代理（cookie操作）。Ext.data.proxy.SessionStorage 瀏覽器級別代理，瀏覽器關閉數據消失。Ext.data.proxy.LocalStorage 本地化的級別代理，數據可以保存在瀏覽器文件裏，瀏覽器關閉後，下次打開還在(不能誇瀏覽器)。B、Ext.data.proxy.Server 服務器端代理Ext.data.proxy.Ajax 異步加載的方式。Ext.data.proxy.Rest 一種特使的Ajax。Ext.data.proxy.JsonP 跨域交互的代理（請求的數據url不在同域內）， 跨域是有嚴重的安全隱患的，extjs的跨域也是需要服務器端坐相應的配合。Ext.data.proxy.Direct 命令.4. 工作在Proxy下的讀寫器（1）Reader : 主要用於將proxy數據代理讀取的數據按照不同的規則進行解析,講解析好的數據保存到Model中結構圖Ext.data.reader.Reader 讀取器的根類Ext.data.reader.Json JSON格式的讀取器Ext.data.reader.Array 擴展JSON的Array讀取器Ext.data.reader.Xml XML格式的讀取器var userData = {
//讀寫器默認讀取的記錄總數的屬性
//total : 200,
//採用我們自定義的變量來標識總條數，這時後需要在讀寫器中配置total所對應我們自定義的變量
count:250,
user:[{auditor:'yunfengcheng',info:{
userID:'1',
name:'uspcat.com',
orders:[
{id:'001',name:'pen'},
{id:'002',name:'book'}
]
}}]
};
//model
Ext.regModel("user",{
fields:[
{name:'userID',type:'string'},
{name:'name',type:'string'}
],
//配置一對多的關係
hasMany: {model: 'order'}
});
Ext.regModel("order",{
fields:[
{name:'id',type:'string'},
{name:'name',type:'string'}
],
//配置多對一的關係
belongsTo: {type: 'belongsTo', model: 'user'}
});
var mproxy = Ext.create("Ext.data.proxy.Memory",{
model:'user',
data:userData,
//讀寫時的參數配置
reader:{
type:'json',//讀取的類型（json/xml/array）
root:'user',//指定讀取開始的根節點
implicitIncludes:true,//是否級聯讀取關聯的子節點（一對多的關係中體現）
totalProperty:'count',//配置我們返回的總條數變量名稱
record : 'info'//服務器返回的數據可能很複雜,用record可以篩選出有用的數據信息,裝在帶Model中，其它的參數忽略。
}
});
//用內存代理來讀取數據，其它的方式一樣
mproxy.read(new Ext.data.Operation(),function(result){
var datas = result.resultSet.records;
alert(result.resultSet.total);
Ext.Array.each(datas,function(model){
alert(model.get('name'));
});
var user = result.resultSet.records[0];
var orders = user.orders();
orders.each(function(order){
alert(order.get('name'))
});
})（2）Writer ：把前臺的js對象數據按照不同的方式寫到後臺。結構圖Ext.data.writer.WriterExt.data.writer.Json 對象被解釋成JSON的形式傳到後臺Ext.data.writer.Xml 對象被解釋成XML的形式傳到後臺Ext.regModel("person",{
fields:[
'name','age'
],
proxy :{//在proxy下，你可以配置reader（讀），同樣也可以配置writer（寫）
type:'ajax',
url:'person.jsp',
writer:{//配置一些寫的參數
//type:'json'
type:'xml' //把js對象以xml的方式，傳入後臺
}
}
});
Ext.ModelMgr.create({
name:'uspcat.con',
age:1
},'person').save();5. Store : 是一個存儲數據對象Model的集合緩存,它可以爲extjs中的可視化組建提供數據源 (GridPanel,ComboBox)等。（在ExtJS中佔有重要的地位，它也屬於Model層）
（1）類結構Ext.data.AbstractStoreExt.data.Store 沒有特殊情況這個類就可以滿日常的開發了Ext.data.ArrayStoreExt.data.DirectStoreExt.data.ArrayStore 內置輔助的類Ext.data.JsonStroe 內置輔助的類Ext.data.TreeStore（2）Ext.data.Store 使用參數autoLoad(Boolean/Object) ： 自動加載數據，自動調用loaddata(Array) ： 內置數據對象的數組，初始化的是就要被裝在model(Model) ： 數據集合相關的模型fields(Field) ：字段的集合，程序會自動生成對於的Model，這樣我們就不需要再定義model。方法each( Function f, [Object scope] ) : void 變量數據中的ModelExt.define("person",{
extend:'Ext.data.Model',
fields:[
{name:'name'},
{name:'age'}
],
proxy:{
type:'memory'
}
})
var s = new Ext.data.Store({
//model:'person',
data:[
{name:'uspcat.com',age:1},
{name:'yfc',age:26}
],
//有了fields，我們就不需要在單獨定義Model並且引用
fields:[
{name:'name'},
{name:'age'}
],
//通過data屬性，請偶們已經能夠把數據初始化好了
//proxy是動態的區後臺去數據
//proxy:{
// type:'ajax',
// url:'person.jsp'
//}
//autoLoad:true
});
s.load(function(records, operation, success){
//遍歷
Ext.Array.each(records,function(model){
alert(model.get('name'));
});
//過濾出字段name='yfc'
s.filter('name',"yfc");
s.each(function(model){
alert(model.get('name'));
});
//通過正則來查找數據集裏面的記錄，返回該記錄的索引
var index = s.find('name','yfc',0,false,true,false);
alert(s.getAt(index));//當前的Model對象
});第三章 Ext事件機制、AJax以及Ext常用類1. Ext事件機制（1）事件的3中綁定方式HTML/DHTMLDOMEXTJS（2）Ext.util.Observable 事件的基類它爲所有支持事件機制的extjs組建提供事件的支持。如果我們自己創建新的組建需要有時間的支持那麼我們就繼承它。事件的分類：標準事件[鍵盤按鈕按下,鼠標的單擊雙擊,滑過滑動]。業務事件[當面板收起的時候觸發,當組建被銷燬的時候觸發,當每一個對象的屬數值不爲空的時候觸發]。（3）addManagedListener 收管制的監聽它是由調用的組建管理的,當組建執行了銷燬命令的時候所有被組建管制的事件全部銷燬。（4）relayEvents 事件的分發和傳播(控制實現事件在不同空間或對象內的傳播)比如說孩子喝完三鹿就去醫院呀,老爸就要帶着去醫院（5）事件對象Ext.EventObject不是一個單例,不能被直接new出來,他會存活早事件處理的函數中（6）事件管理器Ext.EventManager它可以更方便的爲頁面元素綁定事件處理函數方法:addListener 爲元素增減事件2. Ext中的Ajax是 Ext.data.Connection的一個子類，提供了用簡單的方式進行Ajax的功能實現（1）主要方法:abort : 終止一個沒有完成Ajax請求isLoading : 判斷指定的Ajax請求是不是正在運行paresStatus : 返回請求響應的代碼request : 發送服務器請求//json格式的數據
var jsondata = "{id:'01',name:'uspcat.com','age':26,email:'[email protected]'}";
//xml格式的數據
var xmldata = "<user><name>mlmlml</name><age>19</age></user>";
//構建Ext的Ajax請求
Ext.Ajax.request({
url : 'person.jsp',
method : 'POST',
timeout :3000,
//請求的參數值
params:{id:'01'},//可以提交form表單，只需要寫表單的ID
（2）Ext.ElementLoader:方便我們重新構建頁面
form:"myform",
//下面是兩種不同格式的請求參數
jsonData:jsondata,
xmlData：xmldata,
//一些操作的函數，第一個爲響應的值，第二個參數是請求的參數值
success :function(response , options){
alert(eval(response.responseText)[0].name);
},
failure :function(response , options){
alert(response.responseText+" "+options)
}
});load方法startAutoRefresh 方法//get通過dom元素的id方式獲得的是元素的對象
//getCmp通過定義對象ID的方式獲得的是定義的對象，而不是簡簡單單的元素了
//getDom通過dom元素的id方式獲得的是dom元素
var time = Ext.get("time").getLoader();//ajax常用的局部改變元素的值
time.load({
url:'/extjs/extjs!getTime.action',
renderer:function(loader,response,request){
var time = response.responseText;
Ext.getDom("time").value = time;
}
});
//給元素設置定時的axja請求方式
i.startAutoRefresh(1000,{
url:'/extjs/extjs!getI.action',
renderer:function(loader,response,request){
var i = response.responseText;
Ext.getDom("i").value = i;
}
});3. Ext以及core包下面的Domhelper、Element類。（1）Ext.core.ElementAPI解釋他是組建和控件的基礎他對一個DOM對象的封裝(Document Object Model)a、如何得到ElementExt.core.Element.fly(String/HTMLElement el, [String named] ) : ElementExt.get(Mixed el) : Elementb、Element 相關方法addClsOnClick( String className ) : Ext.core.Element。addClsOnOver( String className ) : Ext.core.Element。addKeyMap( Object config ) : Ext.util.KeyMap。addKeyListener( Number/Array/Object/String key, Function fn, [Object scope] ) : Ext.util.KeyMap。appendChild( String/HTMLElement/Array/Element/CompositeElement el ) : Ext.core.ElementcreateChild( Object config, [HTMLElement insertBefore], [Boolean returnDom] ) : Ext.core.Element。（2）Ext.core.DomHelperAPI解釋他可以很容易的操作頁面的HTML.和DOM元素append( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.core.Element--------追加一個孩子。applyStyles---爲元素添加樣式 eg：Ext.core.DomHelper.applyStyles(Ext.get("p1"),"color:red");//下面兩個是被當做兄弟追加的insertAfter( Mixed el, Object o, [Boolean returnElement] ) :insertBefore( Mixed el, Object/String o, [Boolean returnElement] ) ://創建dom結構，通過給的標籤字符串createDom( Object/String o ) : HTMLElementeg：var html = Ext.core.DomHelper.createDom("<h1>hello</h1>");（3）Ext//方法是執行在文件加載完之後onReady( Function fn, Object scope, Boolean withDomReady, Object options ) : voidget()//不在多說query( String path, [Node root] ) : Arrayhttp://www.w3school.com.cn/xpath/xpath_axes.asp語法看 Ext.DomQuerygetCmp( String id ) : void---返回組建管理器管理的ID組件isEmpty( Mixed value, [Boolean allowEmptyString] ) : Booleannamespace( String namespace1, String namespace2, String etc ) : Objecteach( Array/NodeList/Mixed iterable, Function fn, Object scope, Boolean reverse ) : Booleanapply( Object object, Object config, Object defaults ) : Objectencode( Mixed o ) : Stringselect( String/Array selector, [Boolean unique], [HTMLElement/String root] )typeOf( Mixed value ) :判斷參數是一個什麼樣的類型，返回的是字符串，eg：string、function//這個是直接到頁面中獲得元素的對象
var div01 = Ext.core.Element.fly("div01");
//鼠標滑過的時候增加一個樣式滑出的時候移除樣式,值是樣式的名稱
div01.addClsOnOver("divC");
//這個是直接到Ext.ComponentManagerMap中拿，沒有的話，就用第一個到頁面中拿，再返回
var input01 = Ext.get("input01");
var fn1 = function(){
alert("單擊B按鈕調用這個函數")
}
//給一個輸入框添加鍵盤B鍵響應功能
//key是你要觸發的那個鍵，ctrl是否需要與ctrl鍵結合，fn是觸發函數
input01.addKeyMap({key:Ext.EventObject.B,ctrl:false,fn:fn1,scope:input01});
//和上面一本一樣，只是添加更加複雜的，處理起來更加方便
/*第一個觸發條件的參數是一個對象(條件可以進行組合):
{key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}*/
//第二個是觸發函數fn
input01.addKeyListener({key:Ext.EventObject.X,ctrl:true},function(){
alert("單擊ctrl+x")
},input01);function createChild(){
var el = document.createElement("h5");
el.appendChild(document.createTextNode("我是被追加的"));
return el;
}
Ext.get("div02").appendChild(createChild());
//通過構造對象，來創建DOM
Ext.getBody().createChild({
tag:'li',
id:'item1',
html:'我是第一個個節點'
});3. ExtJS4.0中util包裏面的一些工具類用法。（1）.Ext.util.CSSExt.util.CSS.createStyleSheet(".c{color:red}","red");創建一個樣式表，類似於你在css文件裏面定義的內容。
Ext.get("d1").addClsOnOver("c");在鼠標滑過時，動態的給某個元素對象的class賦值爲剛剛定義的名爲c樣式表。
Ext.util.CSS.getRule(".c",true);獲得當前的樣式的對象，可以從這個對象獲得一些你需要的參數。Ext.util.CSS.swapStyleSheet("sheet1","1.css");第一個參數是當前引用樣式的ID，第二個是也是的URL路勁動態的切換，你所引用的樣式表。（即假如你還有一個樣式表2.css，裏面1.css定義的樣式名稱一樣，這時你可以用這個函數Ext.util.CSS.swapStyleSheet("sheet2","2.css")把目前引用1.css切換成2.css。）一般用於不同風格的樣式切換。注意ID唯一。
Ext.util.CSS.removeStyleSheet("red");移除當前，頁面已經定義了的樣式，傳入樣式的ID即可。
Ext.util.CSS.updateRule(".c","color","#990055");更新某個已經定義了樣式中的某個屬性的值。
（2）.Ext.util.ClickRepeater click的轉發器是Ext.util.Observable的子類Ext.onReady(function(){
//控制元素在指定時間內被單擊(當前元素沒有數失去焦點)
var cl = new Ext.util.ClickRepeater(Ext.get("b4"),{
delay:3000,//首次單擊時候的間隔事件
interval:4000,//發生首次重複事件調用之後每一次事件的相隔時間
stopDefault:true,//停止這個el上得默認單擊事件
handler:function(){
alert("單擊我");
}
});
//第一次單擊馬上會觸發事件 如果不去點擊其他的元素那麼3秒或就會自定執行第二次
//一或會以4秒的間隔執行相應的程序
})3）.Ext.util.DelayedTask 代替setTimeout
（4）.Ext.util.Format 格式化的公共類用於一些字符串常用操作、日期以及小數的格式化等。
（5）.Ext.util.MixedCollection 集合類強大之處在於它同時可以存放各工種各樣的對象。並且提供很多操作集合裏對象的方法。
（6）.Ext.util.TaskRunner 模擬線程控制模擬多線程的實現。
Ext.onReady(function(){
var runner = new Ext.util.TaskRunner();
var task = {
run:function(){
Ext.getDom("t1").value = Ext.util.Format.date(new Date(),"Y-m-d-s");
},
interval:1000
}
runner.start(task);
Ext.get("b6").on("click",function(){
runner.stop(task);
})
})