Ext JS是一種強(qiáng)大的JavaScript庫(kù)，可以用來(lái)開發(fā)RIA(Rich Internet Applications)，也即富客戶端的Ajax應(yīng)用，是一個(gè)與后臺(tái)技術(shù)無(wú)關(guān)的前端Ajax框架。

Ext JS最開始基于YUI(Yahoo!UserInterfaceLibrary)技術(shù)，由開發(fā)人員JackSlocum開發(fā)，通過(guò)參考JavaSwing等機(jī)制來(lái)組織可視化組件，無(wú)論從UI界面上CSS樣式的應(yīng)用，到數(shù)據(jù)解析上的異常處理，都可算是一個(gè)非常優(yōu)秀的Web開發(fā)框架。

對(duì)于大多數(shù)程序員來(lái)說(shuō)，我們沒有任何美術(shù)功底，公司的很多項(xiàng)目也沒有配備美工，要想開發(fā)吸引人眼球的用戶界面，一直以來(lái)不是一件容易的事情。但是Ext的出現(xiàn)使得開發(fā)美觀的界面變得容易，Ext提供了表格、樹、布局、按鈕等很多外觀絢麗、功能強(qiáng)大的控件，為我們的日常開發(fā)工作節(jié)約了大量的時(shí)間和精力。更重要的是這個(gè)框架是完全面向?qū)ο笄铱蓴U(kuò)展的，通過(guò)對(duì)現(xiàn)有的庫(kù)的功能進(jìn)行修改或加入新的功能，來(lái)實(shí)現(xiàn)Ext框架中沒有的功能。

擴(kuò)展Ext組件

擴(kuò)展(extension)在Ext中就是指衍生的子類。假設(shè)我們已經(jīng)有一個(gè)附有一些方法的基類，現(xiàn)在欲加入新方法。我們可以利用框架的繼承特性和JavaScript創(chuàng)建新類的語(yǔ)言特性組合新的一個(gè)類。

Ext提供了這樣的一個(gè)實(shí)用函數(shù)Ext.extend在Ext框架中實(shí)現(xiàn)類繼承的機(jī)制。這賦予了擴(kuò)展任何JavaScript基類的能力，而無(wú)須對(duì)類自身進(jìn)行代碼的修改，擴(kuò)展Ext組件這是個(gè)較理想的方法。

要從一個(gè)現(xiàn)有的類創(chuàng)建出一個(gè)新類，首先要通過(guò)一個(gè)函數(shù)聲明新類的構(gòu)造器，然后調(diào)用新類屬性所共享的擴(kuò)展方法。這些共享的屬性通常是方法，但是如果要在實(shí)例之間共享數(shù)據(jù)，應(yīng)該也一同聲明。

JavaScript并沒有提供一個(gè)自動(dòng)的調(diào)用父類構(gòu)造器的機(jī)制，所以必須通過(guò)屬性superclass在構(gòu)造器中顯式調(diào)用父類。***個(gè)參數(shù)總是this，以保證構(gòu)造器工作在調(diào)用函數(shù)的作用域。

清單1.擴(kuò)展Ext組件的基本方法  
      
MyNewClass=function(arg1,arg2,etc){  
//顯式調(diào)用父類的構(gòu)造函數(shù)  
MyNewClass.superclass.constructor.call(this,arg1,arg2,etc);  
};  
Ext.extend(MyNewClass,SomeBaseClass,{  
myNewFn1:function(){  
//etc.  
},  
myNewFn2:function(){  
//etc.  
}  
}); 

使用時(shí)，我們需要實(shí)例化對(duì)象：

清單2.實(shí)例化新的組件對(duì)象  
      
varmyObject=newMyNewClass(arg1,arg2,etc); 

掌握了擴(kuò)展Ext組件的基本方法之后，我們就可以隨意構(gòu)造滿足特定需求的組件。然而Ext里已有的組件和示例永遠(yuǎn)是我們?nèi)≈槐M，用之不竭的創(chuàng)造源泉。本文以三個(gè)Ext組件為基礎(chǔ)，“嫁接”了其他組件的功能，形成三個(gè)新的組件，實(shí)現(xiàn)了現(xiàn)有Ext組件沒有的功能。本文的目的，旨在拋磚引玉，希望能給初學(xué)Ext的同仁們一點(diǎn)啟發(fā)和參考，開發(fā)出更多、功能更強(qiáng)大的組件。

#p#

移Property Grid之花接EditorGrid之木

首先，介紹一下我們的場(chǎng)景和實(shí)際需求。某大學(xué)要建設(shè)一個(gè)教職工科研基金的管理系統(tǒng)，該系統(tǒng)可供基金設(shè)置人員設(shè)置基金申請(qǐng)條件、發(fā)放步驟等，申請(qǐng)人員填報(bào)申請(qǐng)人信息、申領(lǐng)基金等。這里以構(gòu)建一個(gè)基金申請(qǐng)條件的組件為例。條件制定人員在制定申請(qǐng)條件時(shí)，可以隨意添加、刪除申請(qǐng)條件；對(duì)于某些申請(qǐng)條件，比如院系、性別等要求系統(tǒng)能提供預(yù)先定義好的選項(xiàng)供條件制定人員選擇，而對(duì)于比如特長(zhǎng)、年齡等內(nèi)容不明確的或者選項(xiàng)過(guò)多無(wú)法列舉的情況，則直接提供輸入框供條件制定人員輸入。

為了用Ext構(gòu)建這樣的組件，我們首先想到的是選用EditorGrid組件或者Property Grid組件。EditorGrid（可編輯表格控件）擴(kuò)展自GridPanel，提供對(duì)于選中列的單元格編輯?？删庉嫷牧惺峭ㄟ^(guò)在表示表格的列信息的類Ext.grid.ColumnModel中添加editor來(lái)實(shí)現(xiàn)的。但是這個(gè)editor是對(duì)整個(gè)列有效的，就是說(shuō)每一行在該列的位置的數(shù)據(jù)的編輯器是一樣的。

Property Grid(屬性表格)擴(kuò)展自EditorGridPanel，所以可以直接編輯右邊屬性值部分的內(nèi)容。但是，只是右邊的，即使你單擊左邊的單元格，編輯器也只會(huì)出現(xiàn)在右邊。實(shí)際上，我們可以用散列表來(lái)形容Property Grid，左邊可以看作key，右邊的是value。key是由我們指定好的，用戶只需要修改對(duì)應(yīng)的value即可。

Property Grid默認(rèn)的編輯器包括TextField、DateField、NumberField和ComboBox，也就只能處理數(shù)字、字符串的輸入和日期的選擇，布爾值的選擇等一般的情況。當(dāng)我們想對(duì)編輯器進(jìn)行更詳細(xì)的配置時(shí)，就需要用到Property Grid的customEditors，為指定id的那行數(shù)據(jù)設(shè)置對(duì)應(yīng)的編輯器。customEditors和source的設(shè)置基本一樣，只需要將兩者的屬性名稱對(duì)應(yīng)起來(lái)，并且為customEditors里的所有屬性指定一個(gè)editor。

Property Grid雖然能夠給不同的單元格定制不同的編輯器，但是一方面這種表格只有兩列，***列還不可編輯，而且表格的內(nèi)容（source）需要事先確定；另一方面定義customEditors的時(shí)候必須知道表格的內(nèi)容（source），而且必須將兩者的屬性名稱對(duì)應(yīng)起來(lái)。EditorGrid其實(shí)已經(jīng)大部分滿足了我們的需求，只是不能對(duì)每個(gè)單元格定制編輯器，只能指定列編輯器。

經(jīng)過(guò)上面的分析，單純的使用任何一個(gè)控件，都難以達(dá)到我們的目的。同時(shí)我們發(fā)現(xiàn)問(wèn)題主要出在EditorGrid的列模式（ColumnModel）上，Property Grid就是擴(kuò)展自EditorGrid，通過(guò)對(duì)其ColumnModel的擴(kuò)展來(lái)支持單元格的編輯器。所以我們嘗試把EditorGrid的ColumnModel擴(kuò)展一下，使得新的ColumnModel支持customEditors，這樣我們就獲得了對(duì)編輯器的完全控制權(quán)，可以根據(jù)表格的內(nèi)容動(dòng)態(tài)的改變單元格的編輯器了。清單3是我們?yōu)闈M足上述需求而擴(kuò)展的新類MyColumnModel的部分代碼，清單4是使用MyColumnModel構(gòu)造了一個(gè)EditorGrid作為基金申請(qǐng)條件組件。

清單3.定義新類MyColumnModel  
      
Ext.ns('Ext.ux.grid');  
//新類MyColumnModel的構(gòu)造函數(shù)  
Ext.ux.grid.MyColumnModel=function(grid,store,column){  
this.grid=grid;  
this.store=store;  
 
vargender=[  
['0100','男'],  
['0101','女']  
];  
vardepartment=[  
['0200','文學(xué)院'],  
//省略部分代碼  
['0207','醫(yī)學(xué)部']  
];  
vartitle=[  
['0300','助教'],  
//省略部分代碼  
['0303','教授']  
];  
vargenderCombo=newExt.form.ComboBox({  
store:newExt.data.SimpleStore({  
fields:['value','text'],  
data:gender  
}),  
emptyText:'請(qǐng)輸入',  
mode:'local',  
triggerAction:'all',  
valueField:'value',  
displayField:'text',  
readOnly:true  
});  
vardepartmentCombo=newExt.form.ComboBox({  
store:newExt.data.SimpleStore({  
fields:['value','text'],  
data:department  
}),  
//與上面定義genderCombo類似，故省略部分代碼  
…  
});  
vartitleCombo=newExt.form.ComboBox({  
store:newExt.data.SimpleStore({  
fields:['value','text'],  
data:title  
}),  
//與上面定義genderCombo類似，故省略部分代碼  
…  
});  
//當(dāng)選擇“性別”、“院系”、“職稱”時(shí)，提供相應(yīng)的下拉列表作為單元格編輯器，  
供用戶選擇；當(dāng)選擇“年齡”、“論文數(shù)量”時(shí)，提供數(shù)字文本框供用戶輸入  
this.customEditors={  
'GENDER':newExt.grid.GridEditor(genderCombo),  
'DEPARTMENT':newExt.grid.GridEditor(departmentCombo),  
'TITLE':newExt.grid.GridEditor(titleCombo),  
'AGE':newExt.grid.GridEditor(newExt.form.NumberField({selectOnFocus:true,  
style:'text-align:left;'})),  
'PAPER':newExt.grid.GridEditor(newExt.form.NumberField({selectOnFocus:true,  
style:'text-align:left;'}))  
};  
Ext.ux.grid.MyColumnModel.superclass.constructor.call(this,column);  
}; 

Ext.extend(Ext.ux.grid.MyColumnModel,Ext.grid.ColumnModel,{  
//通過(guò)覆蓋父類中的方法getCellEditor,實(shí)現(xiàn)根據(jù)表達(dá)式中條件列的不同取值，  
為表達(dá)式的值所在單元格返回不同的編輯器  
getCellEditor:function(colIndex,rowIndex){  
varp=this.store.getAt(rowIndex);  
n=p.data.attrName;//對(duì)應(yīng)表達(dá)式的條件列的取值  
 
if(colIndex==4)//表達(dá)式的值propertyValue所在的列  
{  
if(this.customEditors[n]){  
returnthis.customEditors[n];  
}else{  
//如果沒有定義特定的單元格編輯器，則返回普通的文本框編輯器  
vared=newExt.grid.GridEditor(newExt.form.TextField({  
selectOnFocus:true  
})  
);  
returned;  
}  
}  
else  
returnthis.config[colIndex].editor;  
}  
}); 

 #p#

清單4.基金申請(qǐng)條件組件  
      
Ext.onReady(function(){  
varcomboData1=[  
['AGE','年齡'],  
//省略部分代碼  
['DEPARTMENT','院系']  
];  
varcomboData2=[  
['>','大于'],  
//省略部分代碼  
['!=','不等于']  
];  
varcombo1=newExt.form.ComboBox({  
id:'attrCombo',  
store:newExt.data.SimpleStore({  
fields:['value','text'],  
data:comboData1  
}),  
emptyText:'請(qǐng)選擇',  
mode:'local',  
triggerAction:'all',  
valueField:'value',  
displayField:'text',  
readOnly:true  
});  
varcombo2=newExt.form.ComboBox({  
id:'operatorCombo',  
store:newExt.data.SimpleStore({  
fields:['value','text'],  
data:comboData2  
}),  
//與上面定義combo1類似，故省略部分代碼  
…  
});  
 
varconditiondata=[];  
vargStore=newExt.data.SimpleStore({  
fields:[  
{name:'fundConditionId'},  
{name:'attrName'},  
{name:'operator'},  
{name:'propertyValue'}  
],  
data:conditiondata  
});  
varsm=newExt.grid.CheckboxSelectionModel({handleMouseDown:Ext.emptyFn});  
varcolumn=[  
sm,  
{  
header:'條件id',  
dataIndex:'fundConditionId',  
hidden:true  
},{  
header:'屬性名稱',  
dataIndex:'attrName',  
editor:newExt.grid.GridEditor(combo1),  
//attributeRenderer方法是用來(lái)格式化輸出的函數(shù)，這里從略。  
renderer:attributeRenderer.createDelegate(this,["properties"],0)  
},{  
header:'操作符',  
dataIndex:'operator',  
editor:newExt.grid.GridEditor(combo2),  
renderer:attributeRenderer.createDelegate(this,["operators"],0)  
},{  
header:'屬性值',  
dataIndex:'propertyValue',  
editor:newExt.grid.GridEditor(newExt.form.TextField({selectOnFocus:true})),  
renderer:attributeRenderer.createDelegate(this,["values"],0)  
}  
];  
 
varfundConditionGrid=newExt.grid.EditorGridPanel({  
name:'fundCondition',  
id:'fundCondition',  
store:gStore,  
cm:newExt.ux.grid.MyColumnModel(this,gStore,column),  
sm:sm,  
tbar:newExt.Toolbar(['-',{  
text:'添加條件',  
//_onAddCondition方法是按鈕“添加條件”的響應(yīng)函數(shù)，實(shí)現(xiàn)在列表中增加一個(gè)條件的功能，這里從略。  
handler:_onAddCondition.createDelegate(this)  
},'-',{  
text:'刪除條件',  
//_onRemoveCondition方法是按鈕“刪除條件”的響應(yīng)函數(shù)，實(shí)現(xiàn)在列表中刪除一個(gè)條件的功能，這里從略。  
handler:_onRemoveCondition.createDelegate(this)  
},'-']),  
frame:true,  
collapsible:true,  
animCollapse:false,  
title:'助研基金申請(qǐng)條件',  
width:350,  
height:300,  
iconCls:'icon-grid',  
clicksToEdit:1,  
renderTo:'example1'  
});  
}); 

當(dāng)屬性名稱選擇性別、職稱或者院系時(shí)，屬性值分別對(duì)應(yīng)不同的下拉列表供用戶選擇，當(dāng)屬性名稱選擇年齡或者論文數(shù)量時(shí)，屬性值則對(duì)應(yīng)數(shù)字文本框供用戶輸入。如圖1-圖5所示。

 
圖1.編輯助研基金申請(qǐng)條件1

 
圖2.編輯助研基金申請(qǐng)條件2

 
圖3.編輯助研基金申請(qǐng)條件3

 
圖4.編輯助研基金申請(qǐng)條件4

 
圖5.編輯助研基金申請(qǐng)條件5

這里表示計(jì)算機(jī)學(xué)院年齡不大于35歲講師以上（含）職稱的女教師，如果發(fā)表的論文數(shù)量多于10篇的，有資格申請(qǐng)?jiān)撝谢??？梢钥闯鲈摶痼w現(xiàn)了對(duì)優(yōu)秀青年女教師的科研支持。此部分的代碼請(qǐng)參考示例代碼中的Example1.js。

 #p#

用ComboBox實(shí)現(xiàn)在光標(biāo)處插入文本

在上述的教職工科研基金管理系統(tǒng)中，如果滿足基金申請(qǐng)條件的教職工人數(shù)很多，我們就需要根據(jù)某種評(píng)分機(jī)制對(duì)申請(qǐng)人進(jìn)行評(píng)分，然后按分?jǐn)?shù)從高到低擇優(yōu)選擇。這里以構(gòu)建一個(gè)制定申請(qǐng)人得分計(jì)算公式的組件為例。制定計(jì)算公式時(shí)，可以引用上面系統(tǒng)中已經(jīng)定義好的申請(qǐng)條件作為計(jì)分要素，然后用加減乘除等運(yùn)算符將計(jì)分要素和比例系數(shù)連接起來(lái)構(gòu)成得分計(jì)算公式。

為實(shí)現(xiàn)上面的功能，我們考慮在文本框的右邊放一個(gè)按鈕，點(diǎn)擊該按鈕，列出所有的計(jì)分要素，選擇一個(gè)計(jì)分要素后，在文本框中光標(biāo)所在位置插入該計(jì)分要素。列出所有的計(jì)分要素，并選擇其一，***的實(shí)現(xiàn)方式是ComboBox，但是使用ComboBox，選擇的值會(huì)覆蓋文本框內(nèi)所有的文字，無(wú)法實(shí)現(xiàn)在光標(biāo)處插入文本的功能。

所以我們決定擴(kuò)展ComboBox，使得新的ComboBox支持在光標(biāo)處插入文本。清單5是我們?yōu)闈M足上述需求而擴(kuò)展的新類valueCombo的部分代碼，清單6是使用valueCombo作為申請(qǐng)人得分計(jì)算公式組件。效果如圖6和圖7所示。

 
圖6.插入計(jì)分要素編輯評(píng)分計(jì)算公式

 
圖7.評(píng)分計(jì)算公式

清單5.定義新類valueCombo  
      
Ext.ns('Ext.ux.form');  
 
ExtExt.ux.form.valueCombo=Ext.extend(Ext.form.ComboBox,{  
initComponent:function(){  
Ext.ux.form.valueCombo.superclass.initComponent.call(this);  
},  
setValue:function(v){  
vvartext=v;  
//直接顯示選項(xiàng)的值，不做格式化轉(zhuǎn)換，覆蓋原來(lái)ComboBox的格式化顯示的功能  
/*if(this.valueField){  
varr=this.findRecord(this.valueField,v);  
if(r){  
text=r.data[this.valueField];  
}elseif(Ext.isDefined(this.valueNotFoundText)){  
text=this.valueNotFoundText;  
}  
}*/  
this.lastSelectionText=text;  
if(this.hiddenField){  
this.hiddenField.value=v;  
}  
Ext.ux.form.ComboBox.superclass.setValue.call(this,text);  
this.value=v;  
returnthis;  
},  
//private  
onSelect:function(record,index){  
if(this.fireEvent('beforeselect',this,record,index)!==false){  
varstr=record.data[this.valueField||this.displayField];  
//實(shí)現(xiàn)在光標(biāo)處插入文本的功能  
vartc=this.getRawValue();  
vartclen=this.getRawValue().length;  
this.focus();  
//以下代碼只對(duì)Firefox生效  
if(typeofdocument.selection!="undefined")  
{  
document.selection.createRange().text=str;  
}  
else  
{  
this.setValue(tc.substr(0,this.el.dom.selectionStart)+str  
+tc.substring(this.el.dom.selectionStart,tclen));  
}  
this.collapse();  
this.fireEvent('select',this,record,index);  
}  
},  
onLoad:function(){  
if(!this.hasFocus){  
return;  
}  
if(this.store.getCount()>0){  
this.expand();  
this.restrictHeight();  
if(this.lastQuery==this.allQuery){  
//if(this.editable){  
//this.el.dom.select();為了保持光標(biāo)位置，注釋掉此段代碼  
//}  
if(!this.selectByValue(this.value,true)){  
this.select(0,true);  
}  
}else{  
this.selectNext();  
if(this.typeAhead&&this.lastKey!=Ext.EventObject.BACKSPACE  
&&this.lastKey!=Ext.EventObject.DELETE){  
this.taTask.delay(this.typeAheadDelay);  
}  
}  
}else{  
this.onEmptyResults();  
}  
//this.el.focus();  
},  
initQuery:function(){  
//屏蔽掉下拉列表進(jìn)行匹配查詢的功能  
//this.doQuery(this.getRawValue());  
}  
}); 

清單6.申請(qǐng)人得分計(jì)算公式組件  
      
varcomboData=[  
['AGE','年齡'],  
//省略部分代碼  
['DEPARTMENT','院系']  
];  
varscoreExpression=newExt.ux.form.valueCombo({  
width:250,  
listWidth:120,  
fieldLabel:‘得分計(jì)算公式’,  
mode:'local',  
valueField:'value',  
displayField:'text',  
triggerAction:'all',  
store:newExt.data.SimpleStore({  
fields:['value','text'],  
data:comboData  
}),  
triggerConfig:{tag:"img",src:"../images/score-element.jpg",  
cls:"x-textfield-button-trigger"}  
}); 

該計(jì)算公式體現(xiàn)了對(duì)青年教職工和女性教職工的鼓勵(lì)和扶助。此部分的代碼請(qǐng)參考示例代碼中的Example2.js。

 #p#

實(shí)現(xiàn)帶ComboBox的TwinTriggerField

在上述的教職工科研基金管理系統(tǒng)中，需要一個(gè)查詢員工詳細(xì)信息的控件。只要輸入員工號(hào)或者從下拉列表中選擇一個(gè)員工號(hào)，就能自動(dòng)載入該員工所有的信息。同時(shí)希望能根據(jù)搜索條件查詢符合條件的員工，從中選擇某個(gè)員工，查看他的詳細(xì)信息。

依據(jù)這個(gè)需求，我們要構(gòu)建一個(gè)查詢員工的組件，當(dāng)在文本框中輸入員工號(hào)前幾位能自動(dòng)列出所有相關(guān)員工號(hào)，或者直接從下拉框中選擇一個(gè)員工號(hào)，隨后自動(dòng)載入員工信息；當(dāng)點(diǎn)擊文本框右邊的搜索按鈕，打開新的窗口，在新窗口中能夠根據(jù)員工職位、院系、出生日期所在范圍等進(jìn)行搜索，選中員工之后，也會(huì)自動(dòng)載入該員工的信息。如果能將ComboBox和TwinTriggerField的功能結(jié)合起來(lái)，將是實(shí)現(xiàn)此需求的最直接、最便利的方法。

清單7是我們?yōu)闈M足上述需求而擴(kuò)展的新類ComboSearchField的部分代碼，清單8是使用ComboSearchField構(gòu)造了一個(gè)Form作為教職工信息查詢控件。此部分的完整代碼請(qǐng)參考Example3.js。效果如圖8和圖9所示。

 
圖8. TwinTrigger 之下拉列表

 
圖9. 載入員工信息

清單7.定義新類ComboSearchField  
      
Ext.ns('Ext.ux.form');  
 
ExtExt.ux.form.ComboSearchField=Ext.extend(Ext.form.ComboBox,{  
initComponent:function(){  
Ext.ux.form.ComboSearchField.superclass.initComponent.call(this);  
this.triggerConfig={  
//使用TwinTrigger的樣式  
tag:'span',cls:'x-form-twin-triggers',cn:[  
{tag:"img",src:Ext.BLANK_IMAGE_URL,cls:"x-form-trigger"+  
this.triggerClass},//使用默認(rèn)ComboBox的樣式  
{tag:"img",src:Ext.BLANK_IMAGE_URL,cls:"x-form-trigger"+  
this.trigger2Class}//自定義Trigger2的樣式  
]};  
},  
getTrigger:function(index){  
returnthis.triggers[index];  
},  
initTrigger:function(){  
varts=this.trigger.select('.x-form-trigger',true);  
this.wrap.setStyle('overflow','hidden');  
vartriggerField=this;  
ts.each(function(t,all,index){  
t.hide=function(){  
varw=triggerField.wrap.getWidth();  
this.dom.style.display='none';  
triggerField.el.setWidth(w-triggerField.trigger.getWidth());  
};  
t.show=function(){  
varw=triggerField.wrap.getWidth();  
this.dom.style.display='';  
triggerField.el.setWidth(w-triggerField.trigger.getWidth());  
};  
vartriggerIndex='Trigger'+(index+1);  
 
if(this['hide'+triggerIndex]){  
t.dom.style.display='none';  
}  
//this.mon(t,'click',this['on'+triggerIndex+'Click'],this,  
{preventDefault:true});  
//定義***個(gè)trigger的觸發(fā)事件  
if(index==0)  
t.on("click",this['onTriggerClick'],this,{preventDefault:true});  
//定義第二個(gè)trigger的觸發(fā)事件  
if(index==1)  
t.on("click",this['onTrigger2Click'],this,{preventDefault:true});  
t.addClassOnOver('x-form-trigger-over');  
t.addClassOnClick('x-form-trigger-click');  
},this);  
this.triggers=ts.elements;  
},  
 
validationEvent:false,  
validateOnBlur:false,  
trigger2Class:'x-form-search-trigger',  
width:180,  
hasSearch:false,  
paramName:'query',  
onTrigger2Click:Ext.emptyFn  
}); 

清單8.教職工信息查詢控件  
      
Ext.onReady(function(){  
varemployeeData=[  
['20001234'],  
//省略部分代碼  
['20091546']  
];  
varsearchField=newExt.ux.form.ComboSearchField({  
id:"employeeId",  
fieldLabel:'員工編碼'+'<fontcolorfontcolor="red">*</font>',  
store:newExt.data.SimpleStore({  
fields:['value'],  
data:employeeData  
}),  
valueField:'value',  
displayField:'value',  
typeAhead:false,  
allowBlank:false,  
mode:'local',  
triggerAction:'all',  
//打開客戶查詢窗口，代碼從略  
onTrigger2Click:_searchCustomer.createDelegate(this),  
listeners:{  
//根據(jù)選中客戶編碼加載客戶信息，代碼從略  
select:_select_customer_id.createDelegate(this)  
}  
});  
 
//以下代碼僅在Firefox中運(yùn)行有效  
//初始化生成表格  
varemployeeForm=newExt.FormPanel({  
id:"employeeForm",  
frame:true,  
title:"教職工信息查詢",  
autoScroll:true,  
items:[{  
layout:'column',  
border:false,  
autoHeight:true,  
defaults:{  
layout:'form',  
border:false,  
width:100,  
bodyStyle:'padding:4px'  
},  
items:[{  
columnWidth:0.33,  
name:"form1",  
id:"form1",  
defaultType:'textfield',  
defaults:{  
width:200  
},  
items:[searchField,  
{  
fieldLabel:'職稱',  
name:'title',  
id:'title',  
disabled:true  
},{  
fieldLabel:'出生日期',  
name:'birthday',  
id:'birthday',  
disabled:true  
},{  
fieldLabel:'聯(lián)系電話',  
name:'tel',  
id:'tel',  
disabled:true  
}]},{  
columnWidth:0.33,  
//從略  
},{  
columnWidth:0.33,  
//從略  
}]  
}],  
renderTo:'example3'  
});  
}); 

總結(jié)

本文在介紹了Ext的基本概念以及擴(kuò)展Ext的一般方法后，以三個(gè)應(yīng)用場(chǎng)景為例，詳細(xì)描述了如何從已有的Ext控件出發(fā)，借鑒其他控件的功能，開發(fā)出滿足實(shí)際需要的新控件。對(duì)于初學(xué)者來(lái)說(shuō)，這種“移花接木”式的開發(fā)方式，不僅能使開發(fā)者深入了解每個(gè)控件背后的實(shí)現(xiàn)方式，而且能迅速助其實(shí)現(xiàn)新的功能、新的需求?？梢哉f(shuō)，它是一種值得推薦的創(chuàng)新方式。

【編輯推薦】

1. ExtJS Grid Tooltip的3+1種實(shí)現(xiàn)方式總結(jié)
2. ExtJS在Android模擬器上的運(yùn)行效果
3. WCF與ExtJs實(shí)現(xiàn)項(xiàng)目分析