修正補充：
後來仔細查找Sencha API，發現dataview和listview中有配置字段“mode”，對於該字段的說明：
Modes of selection. Valid values are 'SINGLE', 'SIMPLE', and 'MULTI'. Defaults to: 'SINGLE'. Available since:
2.0.0
MULTI就是多選
此外還提供了各種‘%select%’相關的方法，在API中搜索即可看到。
問題：
list無法像表單中checkbox一樣，點擊item進行選擇和提交。
目標：
結合了list數據處理的優勢，完成表單checkbox的提交。
解決：
與一般list的用法沒有多大區別。只是在model中添加了一個字段“isSelected”，該字段表示當前item是否被選中。
通過store的數據來控制list item上 選中和未被選中 的狀態，修改每條item的record中isSelected字段就可以直接改變選中的狀態。
注意：model、view、css需仔細查看，controller則是動作的監聽
項目代碼：
ListSelectedView.js
Ext.define("ListSelected.view.ListSelectedView", {
extend : 'Ext.List',
xtype : 'listSelectedView',
id : 'listSelectedView',
config : {
fullscreen : true,
disableSelection : true,
store : 'ListSelectedStore',
itemTpl : new Ext.XTemplate("<div ><div class='workconfItemCls'>\[{wcid}\]、{content}</div>"
+ "<div class='itemCheckCls'><img src='{[this.getCheckState(values)]}' /></div></div>", {
compiled : true,
getCheckState : function(value) {
if (value.isChecked == null || value.isChecked == 0) {
//未選中
return "images/btn_check_buttonless_off.png";
} else {
//選中
return "images/btn_check_buttonless_on.png";
}
},
}),
items : [
{
xtype : "panel",
layout : "hbox",
height : 60,
docked : "bottom",
items : [
{
xtype : "button",
id : "changeBtn",
flex : 1,
text : "反選",
}, {
xtype : "button",
id : "selectAllBtn",
flex : 1,
text : "全選",
}, {
xtype : "button",
id : "submitBtn",
flex : 1,
text : "提交",
},
],
},
],
},
});ListSelectedStore.js
/**
* 與list幫定的Store
*/
Ext.define("ListSelected.store.ListSelectedStore", {
extend: 'Ext.data.Store',
config: {
model : 'ListSelected.model.ListSelectedModel',
data: [
{wcid: '1', content:'作業現場是否與帶電設備有效隔離',},
{wcid: '2', content:'作業現場是否有序，工器具是否定置擺放，是否合格',},
{wcid: '3', content:'除工作需要和條件允許外，是否有工作人員（包括工作負責人）單獨留在作業現場',},
{wcid: '4', content:'工作過程中安全監督是否到位',},
{wcid: '5', content:'工作現場工作人員是否有違反現場作業紀律的行爲',},
{wcid: '6', content:'工作過程中現場安全措施是否擅自變動，是否擅自擴大工作範圍',},
{wcid: '7', content:'多地點、多班組、多專業工作，互相協調是否有力',},
{wcid: '8', content:'是否嚴格執行標準化作業書',},
{wcid: '9', content:'試驗時是否採取隔離措施和相應的安全隔離，並專人監護',},
{wcid: '10', content:'工作中是否有其他常見違章行爲',},
]
}
});
/**
* 數據模型
*/
Ext.define('ListSelected.model.ListSelectedModel', {
extend : 'Ext.data.Model',
config : {
fields : [ "wcid", "content",
{
//標誌item是否被選中，默認爲0：不選中；1:選中
name : 'isChecked',
type : 'int',
defaultValue : 0
} ],
}
});
MainController.js
/**
* 選擇控制
*/
Ext.define("ListSelected.controller.MainController", {
extend : "Ext.app.Controller",
config : {
/**
* @private
*/
refs : {
listSelectedView : "listSelectedView",
changeBtn : "button[id=changeBtn]",
selectAllBtn : "button[id=selectAllBtn]",
submitBtn : "button[id=submitBtn]",
},
control : {
listSelectedView : {
activate : "onListActivate",
itemtap : "onListItemTap",
},
changeBtn : {
tap : "onChangeBtnTap",
},
selectAllBtn : {
tap : "onSelectAllBtnTap",
},
submitBtn : {
tap : "onSubmitBtnTap",
},
}
},
/**
* 界面進入活動狀態
*/
onListActivate : function() {
var store = Ext.StoreManager.get('ListSelectedStore');
store.each(function (item, index, length) {
//初始化所有item未選中狀態
item.set("isChecked", 0);
});
},
/**
* list的item單擊事件
*/
onListItemTap : function(listView, index, target, record, e, eOpts) {
//更改選中的狀態
if(record.get("isChecked") == null || record.get("isChecked") == 0) {
record.set("isChecked", 1);
} else {
record.set("isChecked", 0);
}
},
/**
* 反選
*/
onChangeBtnTap : function() {
console.log("on Change Btn Tap");
var store = Ext.StoreManager.get('ListSelectedStore');
store.each(function (item, index, length) {
if(item.get("isChecked") == null || item.get("isChecked") == 0) {
item.set("isChecked", 1);
} else {
item.set("isChecked", 0);
}
});
},
/**
* 全選
*/
onSelectAllBtnTap : function() {
console.log("on Select All Btn Tap");
var store = Ext.StoreManager.get('ListSelectedStore');
store.each(function (item, index, length) {
if(item.get("isChecked") == null || item.get("isChecked") == 0) {
item.set("isChecked", 1);
}
});
},
/**
* 提交
*/
onSubmitBtnTap : function() {
var result = "";
var store = Ext.StoreManager.get('ListSelectedStore');
var startIndex = 0;
var index = store.find('isChecked', 1, startIndex, false, true, true);
while (index != -1) {
result += "[" + (index + 1) + "],";
startIndex = index + 1;
index = store.find('isChecked', 1, startIndex, false, true, true);
}
// alert(result);
Ext.Msg.alert('選中了', result);
},
});樣式css
.workconfItemCls{
margin-right: 60px;
height: 60px;
}
.itemCheckCls {
float: right;
position: relative;
top: -70px;
right: 10px;
height: 40px;
width: 30px;
}
.x-list .x-list-item{
background: -webkit-linear-gradient(top, #f2f2f2 0%, #e5e5e5 50%, #d7d7d7 100%)!important;
}
.x-list .x-list-item:active{
background: #e3e3e3 !important;
}
