ExtJS 下拉多選框lovcombo
更新時間：2010年05月19日 23:37:59 作者：
最近一個新需求，要求用下拉多選框?qū)崿F(xiàn)省份、城市的級聯(lián)選擇。
開始以為很簡單，在option里加個input checkbox就行了。哪知行不通，網(wǎng)上搜了一些實現(xiàn)方法，主要是用div層來模擬下拉。本想照著這種思路，再結(jié)合這個項目具體應(yīng)用自己寫一個，發(fā)現(xiàn)太麻煩了。剛好在另外一個項目中使用extjs，找到了一個擴展lovcombo，學(xué)習(xí)了一下它自帶的例子（配合2.3版的extjs，3.x版的貌似有問題）。例子倒不難，關(guān)鍵是要把它添加到現(xiàn)有的代碼中，并且盡量少的改動原有代碼。
下拉多選框的使用過程中處理比較多的邏輯主要集中在數(shù)據(jù)源store的配置和select事件的處理。extjs本身的那種數(shù)據(jù)和UI分離的模式使得級聯(lián)的實現(xiàn)非常輕松。只需在省份下拉框的select事件中去更新城市下拉框的store即可。一個需要注意的小地方是：一個選項被select時，需要額外的通過checkField的值來判斷該選項是被選中還是被取消。還有就是全選、取消全選（這兩個lovcombo自帶有方法selectAll和deselectAll）以及被選中選項數(shù)目（需要遍歷一遍store，并檢測每一項的checkField值）。
//下拉框的select事件
select:function(combo, record, index)
{
//選中
if(record.get(this.checkField))
{
//選中時的處理邏輯
}
else
{
//未選中
}
}
下拉多選框的使用過程中處理比較多的邏輯主要集中在數(shù)據(jù)源store的配置和select事件的處理。extjs本身的那種數(shù)據(jù)和UI分離的模式使得級聯(lián)的實現(xiàn)非常輕松。只需在省份下拉框的select事件中去更新城市下拉框的store即可。一個需要注意的小地方是：一個選項被select時，需要額外的通過checkField的值來判斷該選項是被選中還是被取消。還有就是全選、取消全選（這兩個lovcombo自帶有方法selectAll和deselectAll）以及被選中選項數(shù)目（需要遍歷一遍store，并檢測每一項的checkField值）。
復(fù)制代碼 代碼如下:
//下拉框的select事件
select:function(combo, record, index)
{
//選中
if(record.get(this.checkField))
{
//選中時的處理邏輯
}
else
{
//未選中
}
}
您可能感興趣的文章:
- AngularJS單選框及多選框?qū)崿F(xiàn)雙向動態(tài)綁定
- ExtJS Grid使用SimpleStore、多選框的方法
- JavaScript判斷表單中多選框checkbox選中個數(shù)的方法
- javascript 單選框，多選框美化代碼
- 用原生JS實現(xiàn)簡單的多選框功能
- 兼容ie和firefox版本的js反選 全選 多選框
- 用 Javascript 驗證表單(form)中多選框(checkbox)值
- html+javascript+bootstrap實現(xiàn)層級多選框全層全選和多選功能
- AngularJS 單選框及多選框的雙向動態(tài)綁定
- JS實現(xiàn)多選框的操作
相關(guān)文章
本文將通過一些常見的FAQ來帶大家一起學(xué)習(xí)一下怎么用工具定位javascript里的內(nèi)存問題，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下2022-06-06
這篇文章主要介紹了JavaScript柯里化函數(shù)式編程，JS柯里化是前端面試中最常見的問題之一，它可以讓你的代碼更簡潔，工作更高效，感興趣想要詳細了解可以參考下文2023-05-05
javascript設(shè)計模式 – 簡單工廠模式原理與應(yīng)用實例分析
這篇文章主要介紹了javascript設(shè)計模式 – 簡單工廠模式,結(jié)合實例形式分析了javascript簡單工廠模式基本概念、原理、定義、應(yīng)用場景及操作注意事項,需要的朋友可以參考下2020-04-04
javascript實現(xiàn)導(dǎo)航欄分頁效果
這篇文章主要為大家詳細介紹了javascript實現(xiàn)導(dǎo)航欄分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
這篇文章主要介紹了javascript引用賦值（地址傳值）用法,以一個簡單實例分析了javacript引用賦值的原理與用法,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
取消單選按鈕選中并判斷對象是否為空，在項目中也是比較常見的，下面有個不錯的示例，感興趣的朋友可以參考下2013-11-11
JSDoc 是一種 JavaScript 文檔注釋規(guī)范,它允許開發(fā)者為 JavaScript 代碼添加注釋,下面就跟隨小編一起來學(xué)習(xí)一下它的具體使用吧2024-02-02
本文主要對實現(xiàn)一個簡單的js加載器的步驟進行介紹--主要可以分為解析路徑、下載模塊、解析模塊依賴、解析模塊四個步驟。需要的朋友來看下吧2016-12-12
這篇文章主要介紹了開源一個微信小程序儀表盤組件過程解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
uni-app h5端在jenkins構(gòu)建報錯解決
這篇文章主要為大家介紹了uni-app h5端在jenkins構(gòu)建報錯解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06