修正补充：
后来仔细查找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;
}
