Extjs學(xué)習(xí)筆記之三 extjs form更多的表單項(xiàng)

更新時(shí)間：2010年01月07日 18:13:12 作者：

本文接著上講Extjs學(xué)習(xí)筆記之二 Extjs之Form介紹Extjs的表單。Extjs除了類似普通的html form的表單項(xiàng)之外，還有一些功能更為豐富實(shí)用的表單項(xiàng)。

1.日期選擇框，DateField
日期選擇框在日常項(xiàng)目中被廣泛應(yīng)用，一個(gè)方便的日期輸入機(jī)制能夠極大的提高用戶體驗(yàn)。Extjs的DateField非常友好靈活強(qiáng)大?？梢酝ㄟ^如下代碼新建一個(gè)日期選擇框：

復(fù)制代碼代碼如下:

 
new Ext.form.DateField({ 
id: 'diliveryDate', 
format: 'Y年m月d日', 
maxValue: new Date(), 
minValue: '1900-01-01', 
disabledDays: [0, 6], 
disabledDaysText: '禁止選擇該日期', 
fieldLabel: '選擇日期', 
width:200, 
showToday:false 
}) 

效果如下：

注意，默認(rèn)情況下，這個(gè)日歷顯示的是英文，如果需要顯示中文，需要引入?yún)^(qū)域文件：
<script type="text/javascript" src="ext-3.1.0/src/locale/ext-lang-zh_CN.js"></script>對(duì)其他控件應(yīng)該也是類似的。2.HTML編輯器,HTMLEditor
HTML編輯器可以使客戶編輯html文檔。啟用HTML編輯器非常簡(jiǎn)單，而且?guī)缀醪恍枰~外的配置，默認(rèn)的就很好用：

復(fù)制代碼代碼如下:

 
new Ext.form.HtmlEditor({ 
id:'HtmlContent', 
autoHeight:false, 
width:500, 
fieldLabel:'HTML編輯' 
}) 

遺憾的是這個(gè)編輯器不支持圖文混排，不過對(duì)于輕量級(jí)的應(yīng)用來(lái)說還是很好用的。如果需要圖文混排還是使用專門的第三方的插件好了。

3.組合框, ComboBox
這是一個(gè)重量級(jí)的控件，因?yàn)樗趯?shí)際應(yīng)用中起著廣泛而重要的作用。雖然它的使用頻率沒有TextField高，但是它的功能卻比TestField豐富的多，所以把它放在比較靠后的位置來(lái)介紹。Extjs的ComboBox具有下拉提示，自動(dòng)完成等功能，也同時(shí)支持本地和服務(wù)器端的數(shù)據(jù)源。下面先看一個(gè)本地?cái)?shù)據(jù)源的示例。

本地?cái)?shù)據(jù)源可以放在一個(gè)ArrayStore中，這是一個(gè)類似一個(gè)數(shù)組的結(jié)構(gòu)。例如，可以定義下面的store:

復(fù)制代碼代碼如下:

 
var store = new Ext.data.ArrayStore({ 
fields: ['Name', 'Code'], 
data: [['開發(fā)部', 1], ['行政部', 2], ['銷售部', 3], ['質(zhì)檢部', 4], ['售后部', 5]] 
});下面就可以添加一個(gè)combobox，var myform = new Ext.FormPanel({ 
applyTo: 'myform', 
title: 'ComboxBox with local datasource', 
height: 200, 
width: 300, 
frame: true, 
labelSeparator: ':', 
labelWidth: 60, 
labelAlign: 'right', 
items: [new Ext.form.ComboBox({ 
id:'combolocal', 
fieldLabel:'部門', 
triggerAction:'all', 
store:store, 
displayField:'Name', 
mode:'local', 
forceSelection:true, 
typeAhead:true, 
resizable:true}) 
] 
}); 

其中比較重要的配置項(xiàng)有displayField，對(duì)應(yīng)的是datastore中的fields，用來(lái)指定顯示哪個(gè)字段。mode，在這里是local，表示本地?cái)?shù)據(jù)源。typeAhead表示是否自動(dòng)完成，forceSelection表示是否僅允許用戶輸入下拉列表中有的數(shù)據(jù)。效果如下,下圖展示了自動(dòng)完成，我僅在輸入框中輸入了一個(gè)“開”字：

使用遠(yuǎn)程數(shù)據(jù)也是類似的，不過我們首先要準(zhǔn)備好一個(gè)能夠返回?cái)?shù)據(jù)的服務(wù)器頁(yè)面，新建一個(gè)combo.ashx代碼如下：

復(fù)制代碼代碼如下:

 
public class combo : IHttpHandler { 
public void ProcessRequest (HttpContext context) { 
string query = context.Request.Params["search"]; 
StringBuilder sb = new StringBuilder("["); 
foreach (string s in data) 
if (s.Contains(query)||query=="all") sb.Append(s+","); 
if(sb[sb.Length-1]==',') 
sb.Remove(sb.Length - 1, 1); 
sb.Append("]"); 
context.Response.ContentType = "text/plain"; 
context.Response.Write(sb.ToString()); 
} 
string[] data=new string[]{"['開發(fā)部', 1]","['行政部', 2]", "['銷售部', 3]", "['質(zhì)檢部', 4]", "['售后部', 5]"}; 

public bool IsReusable { 
get { 
return false; 
} 
}} 

此段程序根據(jù)客戶端傳來(lái)的參數(shù)進(jìn)行篩選，再傳回?cái)?shù)據(jù)，如果參數(shù)值是all，則返回全部數(shù)據(jù)?？梢姺?wù)器端的自動(dòng)完成可以比本地的更自由，當(dāng)然速度也會(huì)更慢。這個(gè)例子中服務(wù)器傳回的一個(gè)符合格式的javascript數(shù)組，在實(shí)際開發(fā)中，有更好的數(shù)據(jù)傳送格式可以選擇，本文的討論重點(diǎn)不是數(shù)據(jù)的傳遞，因此就直接采用這種方式作為示例。接下來(lái)配置下客戶端的datastore：

復(fù)制代碼代碼如下:

 
var remoteStore=new Ext.data.ArrayStore({ 
fields: ['Name', 'Code'], 
proxy:new Ext.data.HttpProxy({url:'Combo.ashx'}) 
});最后就可以創(chuàng)建一個(gè)使用遠(yuǎn)程數(shù)據(jù)源的combobox了：new Ext.form.ComboBox({ 
id: 'comboremote', 
allQuery:'all', 
fieldLabel: '遠(yuǎn)程部門', 
triggerAction: 'all', 
mode: 'remote', 
queryParam:'search', 
displayField:'Name', 
store:remoteStore, 
minChars:1}) 

其中minChars表示用戶至少要輸入多少字后才開始自動(dòng)完成，queryParam是向服務(wù)器傳遞參數(shù)的名字，allQuery是要求返回全部數(shù)據(jù)時(shí)候的參數(shù)值。效果如下：