Extjs學習筆記之三 extjs form更多的表單項

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

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

1.日期選擇框，DateField
日期選擇框在日常項目中被廣泛應用，一個方便的日期輸入機制能夠極大的提高用戶體驗。Extjs的DateField非常友好靈活強大。可以通過如下代碼新建一個日期選擇框：

 
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 
}) 

效果如下：

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

復制代碼代碼如下:

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

遺憾的是這個編輯器不支持圖文混排，不過對于輕量級的應用來說還是很好用的。如果需要圖文混排還是使用專門的第三方的插件好了。

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

本地數(shù)據源可以放在一個ArrayStore中，這是一個類似一個數(shù)組的結構。例如，可以定義下面的store:

復制代碼代碼如下:

 
var store = new Ext.data.ArrayStore({ 
fields: ['Name', 'Code'], 
data: [['開發(fā)部', 1], ['行政部', 2], ['銷售部', 3], ['質檢部', 4], ['售后部', 5]] 
});下面就可以添加一個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}) 
] 
}); 

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

使用遠程數(shù)據也是類似的，不過我們首先要準備好一個能夠返回數(shù)據的服務器頁面，新建一個combo.ashx代碼如下：

復制代碼代碼如下:

 
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]", "['質檢部', 4]", "['售后部', 5]"}; 

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

此段程序根據客戶端傳來的參數(shù)進行篩選，再傳回數(shù)據，如果參數(shù)值是all，則返回全部數(shù)據?？梢姺掌鞫说淖詣油瓿煽梢员缺镜氐母杂桑斎凰俣纫矔?。這個例子中服務器傳回的一個符合格式的javascript數(shù)組，在實際開發(fā)中，有更好的數(shù)據傳送格式可以選擇，本文的討論重點不是數(shù)據的傳遞，因此就直接采用這種方式作為示例。接下來配置下客戶端的datastore：

復制代碼代碼如下:

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

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