Extjs—checkbox的取值以及修改時已選項的回顯問題

注：我也是第一次在CSDN寫文章，格式什麼的各位就不要在意了，解決問題才是關鍵啊

 

最近在公司做專案的時候，在前段頁面中用到了extjs，以前都是使用其它的前端框架，這次也是第一次接觸extjs，

在實現程式碼的過程中遇到了各種各樣的問題，其中就包括了extjs中多選框的取值以及修改時已選擇項的回顯問題

1.怎樣取值？

2.怎樣在修改時回顯？

 

現在看來這個問題很簡單但當時困擾了我很久，也是百度各種網站找到的都是怎樣取值，至於怎樣回顯找了各個網站沒有一個答案………………

 

下面給出我在實際專案中的解決方法，希望對遇到同樣問題的同學有所幫助

 

 

以上程式碼就是一個checkbox，具體程式碼請各位根據自己實際情況修改

注：本例項中多選框為四個 若想讓其兩兩一行 需要採用table佈局

此處有一個問題，不知道什麼原因使用F12檢視checkbox元素髮現extjs.css預設用了圓形圖示，而不是方形。由於公司extjs.css沒在專案中引入。最後測試組讓修改但涉及到原始檔最後協商不做修改。

 

1.checkbox的取值：

 

此處 ‘smlx’就是圖1中定義的checkbox id，根據id獲取選中項，定義一個smlx（名字隨便起）變數用於取值

通過遍歷取得選中項，例如選擇了第一，第二個    那麼 smlx=1,2

 

取到了選中的值就是向資料庫儲存了，下圖中：

ordernumberScanType是實體類中的欄位  smlx 就是上圖中我們定義的變數，用於取值：

 

相當於： id : Ext.getCmp("id_input").getValue(),

 

 

 

2.修改時回顯問題

 

 

下面就是我遇到的當時讓我困擾的問題 ，修改時回顯問題

 

1.在點選修改的時候，首先將預設選中的checkbox也恢復到未選中狀態，這樣就可以根據從資料庫查到的資料進行準確的回顯

2.record.data.ordernumberScanType：在我這邊是表示從資料庫獲取到的ordernumberScanType資料，具體情況請根據自己業務修改

 

坑：此處的id是後來才加的，當時寫checkbox是我想的是已經有一個id=‘smlx’裡面應該不能在定義id了要不然等取值的時候萬一根據id=‘smlx’取不到值怎麼辦，所以就沒試，可把我坑慘了

 

id:'lx1_id' 是必須的，不然在修改時是無法準確回顯的

record.data.ordernumberScanType.indexOf("1,")>-1 ：是說根據索引判斷1，是否在record.data.ordernumberScanType中，如果在就將1選中，以此類推。

 

以上就是我第一次用extjs遇到的問題，希望對遇到同樣問題的你有所幫助。