|
|
日期選擇框在日常項目中被廣泛應用，一個方便的日期輸入機制能夠極大的提高用戶體驗。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
})
效果如下：
注意，默認情況下，這個日歷顯示的是英文，如果需要顯示中文，需要引入區域文件：
<script type="text/Javascript" src="ext-3.1.0/src/locale/ext-lang-zh_CN.js"></script>對其他控件應該也是類似的。2.HTML編輯器,HTMLEditor
HTML編輯器可以使客戶編輯html文檔。啟用HTML編輯器非常簡單，而且幾乎不需要額外的配置，默認的就很好用：
復制代碼 代碼如下:
new Ext.form.HtmlEditor({
id:'HtmlContent',
autoHeight:false,
width:500,
fieldLabel:'HTML編輯'
})
遺憾的是這個編輯器不支持圖文混排，不過對于輕量級的應用來說還是很好用的。如果需要圖文混排還是使用專門的第三方的插件好了。
3.組合框, ComboBox
這是一個重量級的控件，因為它在實際應用中起著廣泛而重要的作用。雖然它的使用頻率沒有TextField高，但是它的功能卻比TestField豐富的多，所以把它放在比較靠后的位置來介紹。Extjs的ComboBox具有下拉提示，自動完成等功能，也同時支持本地和服務器端的數據源。下面先看一個本地數據源的示例。
本地數據源可以放在一個ArrayStore中，這是一個類似一個數組的結構。例如，可以定義下面的store:
復制代碼 代碼如下:
var store = new Ext.data.ArrayStore({
fields: ['Name', 'Code'],
data: [['開發部', 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，表示本地數據源。typeAhead表示是否自動完成，forceSelection表示是否僅允許用戶輸入下拉列表中有的數據。效果如下,下圖展示了自動完成，我僅在輸入框中輸入了一個“開”字：
使用遠程數據也是類似的，不過我們首先要準備好一個能夠返回數據的服務器頁面，新建一個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[]{"['開發部', 1]","['行政部', 2]", "['銷售部', 3]", "['質檢部', 4]", "['售后部', 5]"};
public bool IsReusable {
get {
return false;
}
}}
此段程序根據客戶端傳來的參數進行篩選，再傳回數據，如果參數值是all，則返回全部數據。可見服務器端的自動完成可以比本地的更自由，當然速度也會更慢。這個例子中服務器傳回的一個符合格式的Javascript數組，在實際開發中，有更好的數據傳送格式可以選擇，本文的討論重點不是數據的傳遞，因此就直接采用這種方式作為示例。接下來配置下客戶端的datastore：
復制代碼 代碼如下:
var remoteStore=new Ext.data.ArrayStore({
fields: ['Name', 'Code'],
proxy:new Ext.data.HttpProxy({url:'Combo.ashx'})
});最后就可以創建一個使用遠程數據源的combobox了：new Ext.form.ComboBox({
id: 'comboremote',
allQuery:'all',
fieldLabel: '遠程部門',
triggerAction: 'all',
mode: 'remote',
queryParam:'search',
displayField:'Name',
store:remoteStore,
minChars:1})
其中minChars表示用戶至少要輸入多少字后才開始自動完成，queryParam是向服務器傳遞參數的名字，allQuery是要求返回全部數據時候的參數值。效果如下：
在remote模式下，combobox還支持服務器端分頁，此時combox會向服務器傳遞start和limit參數，表示要顯示的數據范圍，服務器端代碼做相應處理后返回數據即可。
JavaScript技術：Extjs學習筆記之三 extjs form更多的表單項，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
