sencha list实现多选

修正补充：

后来仔细查找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:'工作中是否有其他常见违章行为',},
]
}
});

ListSelectedModel.js

/**
* 数据模型
*/
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: #e3e3
4000
e3 !important;
}

项目下载地址：http://download.csdn.net/detail/kuailebeihun/7132055

版权所有，转载请注明出处！http://blog.csdn.net/kuailebeihun_/article/details/21322357