ExtJS 下拉多選框lovcombo

2024-05-06 14:09:56

字體：大中小

供稿：網(wǎng)友

開始以為很簡單，在option里加個(gè)input checkbox就行了。哪知行不通，網(wǎng)上搜了一些實(shí)現(xiàn)方法，主要是用div層來模擬下拉。本想照著這種思路，再結(jié)合這個(gè)項(xiàng)目具體應(yīng)用自己寫一個(gè)，發(fā)現(xiàn)太麻煩了。剛好在另外一個(gè)項(xiàng)目中使用extjs，找到了一個(gè)擴(kuò)展lovcombo，學(xué)習(xí)了一下它自帶的例子（配合2.3版的extjs，3.x版的貌似有問題）。例子倒不難，關(guān)鍵是要把它添加到現(xiàn)有的代碼中，并且盡量少的改動原有代碼。

下拉多選框的使用過程中處理比較多的邏輯主要集中在數(shù)據(jù)源store的配置和select事件的處理。extjs本身的那種數(shù)據(jù)和UI分離的模式使得級聯(lián)的實(shí)現(xiàn)非常輕松。只需在省份下拉框的select事件中去更新城市下拉框的store即可。一個(gè)需要注意的小地方是：一個(gè)選項(xiàng)被select時(shí)，需要額外的通過checkField的值來判斷該選項(xiàng)是被選中還是被取消。還有就是全選、取消全選（這兩個(gè)lovcombo自帶有方法selectAll和deselectAll）以及被選中選項(xiàng)數(shù)目（需要遍歷一遍store，并檢測每一項(xiàng)的checkField值）。

代碼如下:
//下拉框的select事件
select:function(combo, record, index)
{
//選中
if(record.get(this.checkField))
{
//選中時(shí)的處理邏輯
}
else
{
//未選中
}
}

上一篇：js+css使文本框自動適應(yīng)內(nèi)容的高度

下一篇：JavaScript 語言的遞歸編程