|
|
日期選擇框在日常項(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編輯器非常簡單，而且?guī)缀醪恍枰~外的配置，默認(rèn)的就很好用：
復(fù)制代碼 代碼如下:
new Ext.form.HtmlEditor({
id:'HtmlContent',
autoHeight:false,
width:500,
fieldLabel:'HTML編輯'
})
遺憾的是這個(gè)編輯器不支持圖文混排，不過對(duì)于輕量級(jí)的應(yīng)用來說還是很好用的。如果需要圖文混排還是使用專門的第三方的插件好了。
3.組合框, ComboBox
這是一個(gè)重量級(jí)的控件，因?yàn)樗趯?shí)際應(yīng)用中起著廣泛而重要的作用。雖然它的使用頻率沒有TextField高，但是它的功能卻比TestField豐富的多，所以把它放在比較靠后的位置來介紹。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，用來指定顯示哪個(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ù)器頁面，新建一個(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ù)客戶端傳來的參數(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ù)的傳遞，因此就直接采用這種方式作為示例。接下來配置下客戶端的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ù)值。效果如下：
在remote模式下，combobox還支持服務(wù)器端分頁，此時(shí)combox會(huì)向服務(wù)器傳遞start和limit參數(shù)，表示要顯示的數(shù)據(jù)范圍，服務(wù)器端代碼做相應(yīng)處理后返回?cái)?shù)據(jù)即可。
JavaScript技術(shù)：Extjs學(xué)習(xí)筆記之三 extjs form更多的表單項(xiàng)，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
