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