ExtJS 下拉多選框lovcombo

更新時間：2010年05月19日 23:37:59 作者：

最近一個新需求，要求用下拉多選框實現(xiàn)省份、城市的級聯(lián)選擇。

開始以為很簡單，在option里加個input checkbox就行了。哪知行不通，網(wǎng)上搜了一些實現(xiàn)方法，主要是用div層來模擬下拉。本想照著這種思路，再結合這個項目具體應用自己寫一個，發(fā)現(xiàn)太麻煩了。剛好在另外一個項目中使用extjs，找到了一個擴展lovcombo，學習了一下它自帶的例子（配合2.3版的extjs，3.x版的貌似有問題）。例子倒不難，關鍵是要把它添加到現(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 
{ 
//未選中 
} 
} 

您可能感興趣的文章:

手把手教你如何排查Javascript內存泄漏
本文將通過一些常見的FAQ來帶大家一起學習一下怎么用工具定位javascript里的內存問題，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下
2022-06-06
JavaScript柯里化函數(shù)式編程面試詳解
這篇文章主要介紹了JavaScript柯里化函數(shù)式編程，JS柯里化是前端面試中最常見的問題之一，它可以讓你的代碼更簡潔，工作更高效，感興趣想要詳細了解可以參考下文
2023-05-05
javascript設計模式 – 簡單工廠模式原理與應用實例分析
這篇文章主要介紹了javascript設計模式 – 簡單工廠模式,結合實例形式分析了javascript簡單工廠模式基本概念、原理、定義、應用場景及操作注意事項,需要的朋友可以參考下
2020-04-04
javascript實現(xiàn)導航欄分頁效果
這篇文章主要為大家詳細介紹了javascript實現(xiàn)導航欄分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-06-06
javascript引用賦值（地址傳值）用法實例
這篇文章主要介紹了javascript引用賦值（地址傳值）用法,以一個簡單實例分析了javacript引用賦值的原理與用法,具有一定參考借鑒價值,需要的朋友可以參考下
2015-01-01
js取消單選按鈕選中并判斷對象是否為空
取消單選按鈕選中并判斷對象是否為空，在項目中也是比較常見的，下面有個不錯的示例，感興趣的朋友可以參考下
2013-11-11
深度探索JavaScript中JSDoc文檔注釋的具體使用
JSDoc 是一種 JavaScript 文檔注釋規(guī)范,它允許開發(fā)者為 JavaScript 代碼添加注釋,下面就跟隨小編一起來學習一下它的具體使用吧
2024-02-02
概述如何實現(xiàn)一個簡單的瀏覽器端js模塊加載器
本文主要對實現(xiàn)一個簡單的js加載器的步驟進行介紹--主要可以分為解析路徑、下載模塊、解析模塊依賴、解析模塊四個步驟。需要的朋友來看下吧
2016-12-12
開源一個微信小程序儀表盤組件過程解析
這篇文章主要介紹了開源一個微信小程序儀表盤組件過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2019-07-07
uni-app h5端在jenkins構建報錯解決
這篇文章主要為大家介紹了uni-app h5端在jenkins構建報錯解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-06-06