注(
原创地址:http://www.cnblogs.com/mlzs/archive/2013/06/09/3128318.html
原创作者:魔狼再世
)
修改后的代码:
/*
*list多选扩展
*/
Ext.define('ux.SimpleList', {
alternateClassName: 'simpleList',
extend: 'Ext.List',
xtype: 'simpleList',
config: {
editCls: 'simpleList',
//不加在长按时可能没反应
onItemDisclosure: false,
//是否在多选状态(不可更改)
isSimple: false,
//设置数据主键(可配置)
ckId: 'id',
//默认选择类型,用以应对多种选择情况
defSimpleType: 0,
//多选时弹出菜单栏(可配置)
simpleToolBar: {
//默认位置
docked: 'bottom',
//默认标题,用以应对多种选择情况
defTitle: '删除',
items: [{
xtype: 'button',
text: '全选',
align: 'left',
//标志是全选还是取消全选
isSimple: true,
listeners: {
tap: function (button) {
var list = button.up('list');
if (this.isSimple) {
this.setText('取消全选');
list.selectAll();
} else {
this.setText('全选');
list.deselectAll();
}
this.isSimple = !this.isSimple;
}
}
},
{
cls: 'moreButton',
xtype: 'button',
text: '取消',
align: 'right',
listeners: {
tap: function (button) {
var list = button.up('list');
//结束多选
list.endSimple(list);
}
}
},
{
cls: 'moreButton',
xtype: 'button',
text: '确定',
align: 'right',
listeners: {
tap: function (button) {
var list = button.up('list');
var items = list.getSelection();
//获取选中项
var ids = [];
for (var i = 0,
item; item = items[i]; i++) {
ids.push(item.data[list.config.ckId]);
}
if (ids.length>0) {
//触发选择成功事件list:list本身,items:被选中的行,ids:被选中key集合,list.config.simpleType:自定义配置状态
list.fireEvent('simpleSuccess', list, items, ids, list.config.simpleType);
//结束多选
list.endSimple(list);
}
}
}
}]
},
listeners: {
//监控是否在多选状态
itemtap: function (list, index, target, record, e) {
//如果在多选状态停止后续事件的执行
if (this.config.isSimple) {
e.stopEvent();
}
},
//只要按键长按住就会触发,和按键是否离开没有关系
itemtaphold: function (list, index, target, record, e) {
//开始多选
this.beginSimple();
}
}
},
//获取多选边栏
getSimpleToolBar: function () {
var simpleToolBar = Ext.create('Ext.TitleBar', this.config.simpleToolBar);
return simpleToolBar;
},
//进入多选状态
beginSimple: function (simpleType, title) {
if (!this.config.isSimple) {
//取消全选
this.deselectAll();
//进入多选模式
this.setMode('SIMPLE');
//添加css
this.addCls(this.config.editCls);
//显示OnItemDisclosure
this.setOnItemDisclosure(true);
//加入标记,以便在itemtap事件中进行判定
this.config.isSimple = true;
//应对多种选择需求
if (simpleType) {
this.config.simpleType = simpleType;
} else {
this.config.simpleType = this.config.defSimpleType;
}
//改变标题
if (title) {
this.config.simpleToolBar.title = title;
} else {
this.config.simpleToolBar.title = this.config.simpleToolBar.defTitle;
}
//添加多选边栏
this.add(this.getSimpleToolBar());
}
},
//结束多选模式
endSimple: function () {
var titlebar = this.down('titlebar');
if (titlebar) {
//移除多选边栏
titlebar.hide();
titlebar.destroy();
//取消全选
this.deselectAll();
//进入单选模式
this.setMode('SINGLE');
//移除css
this.removeCls(this.config.editCls);
//隐藏OnItemDisclosure
this.setOnItemDisclosure(false);
//加入标记,以便在itemtap事件中进行判定
this.config.isSimple = false;
}
},
//更新OnItemDisclosure需要
updateOnItemDisclosure: function (newConfig, oldConfig) {
if (oldConfig == null) {
return;
}
var items = this.listItems;
for (var i = 0,
ln = items.length; i < ln; i++) {
var dItem = items[i].getDisclosure();
newConfig === false ? dItem.hide() : dItem.show();
}
}
});
需要加入的css:
.simpleList .x-list-disclosure {
-webkit-mask-size:100%;
-webkit-mask-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAE+klEQVRoBe2aS28URxRGsY0h2FmwCQuEWLHjvUNgZAQ4PMwrEkIRIGEgySKwB8QvYIvEP+ANO0CwsJAA88wGBEKBZJUVQkJCQrwJ5nxN31Z5pnpc7e4ZT9vT0peqqanquqfurVvlIW3Dw8NTJtPTPplgxdoCnugeb3m45eEJtgJTJwJPGw8cP8V6TfmC4/Z/H9uEAAZsIdqHZiMBn2UNbvigSw8M2AIAD6PtqBPpmYe+8t1NoL9GLfYf3bTKKhiWo9PoA9KV0dUgn/tRh8tXWg/Hnj0KUB8yz1JNnjXUuhFd264A/f0O7dKXpQ7EIiTPfkKuVyvrSlx3US+KPF26cMbwxeg8Gg3W4LWHFd6rUUepQprQnI/Rh9A25AtjmqseHVkK7w59UxpgYFdg7wH0CwqFpWvyrKI23GZ7OWluwgqwOnqOobVoWh4Tm97DwCpBHUFp2TiUX3v5QVMnLQzMmqAsUVWWyta3UX/TAmOcwjjk6KmE830W7GbU0ZTAGKYEJdj3yAcQ2qYw1jmsG9e0KF8122UDw/SHwFX0EYWC+fpZGG/hPcn1sqk8jGHas+dQ6KXCB6o2g91IPfKsObZpgDGsqAT1hXdpz25A7QZqZU1gBsxFSh5zbEA9yniOU5R5PSvvCnYTSsLYtdkLTGf9uKdD/gS6gI6jPndgUXXe24OKSFAK4zsoSVA+G6uAGaC758/oBrIs+Zb6rbg9up35Xpa1jffpUqEEldezysbJ0VPLjhHADOpEfUiw2gtuUtAKDiGtYNXeqDWJ7zveYQnqM3V3nqx1s2s97xmRoLzzWqMgkLLaTVQJa0ZoJe+hXjRmaMYKVlslr2dlp5wgu4PsiTyszmg5qgVr0CqvoZW2WFlKxhV5gxJsdIMKtYH+Eew6yksoNLy0soJeFzqR+vEI9gx6h9wFzFoPSlA+25g3SlChnnUNU3grkWmxRg0n+ihBnUR5w9j2bCbPGjzzR3sgbc+6gL66TV4zkTHHEqSfZSzr+94V0mbzKUF1GkSWknG5QktGyoj7qBdVeZo2S1Ch2yUNXOMVUcEJyrcQjOeP4vzQCu9BpBtOck5T70HybN4w1iJcR7ouem9QPjhfG+On7EBPUNrKhrYLWp7+FS1FCjtdKvJ6VvM/Q9o2uWC1AHq60QB6hELh0voJ+im6iHReF+FZwe5HP/g8lrXNzuEfeeFu9C9Kg8nSrr9lBZ9ljK/v37xjL5qRFSytf3K15KXy9EH0D/JN3ui2Qj1rC5AAq4FnJvoDPUSNBnTnUy4YQF1maFHlCOAYuouJFN6PkWtEo+ryrH5sL2TPVi5UFXAMrfDegxrtae3ZfWh6paFFffYCx9BKZLtQo/a0YLXIhSUo3yKlAsfQ8vSBBkALtrCjxwdqbTWBY2glst9REee0Lw/ULUEZpFuOChxD1yuRybNbUV0SlAtq9SDgGFp7ushEJlhdKuqWoAzSLYOBHeidGPkc+cIztE2wA6iuCcoFtXom4Bha4f0nGmv2FqyOnoaFscFG9rsfQusYq0T2G8qayASrbdEdOlfR/TJ72AzAaHla5/QD9BnVCucvfK/fjZXtx8WzZneu/+WBf53XOb0G6XetHjQXyfv2vKLyH7qLLqMhJn5DOW5PLmBZDfRUilloGUoD/ovvXgIrT4/rkxt4XK0fw+TtYxhT6iEt4FK7L8D4locDFqnUXSadh78Bx5bEl2CLG+8AAAAASUVORK5CYII=);
background-color:#ddd;
background-image:none;
}
.simpleList .x-item-selected .x-list-disclosure {
background-color:#006bb6;
}
使用示例js
Ext.define('app.view.new.List', {
alternateClassName: 'newList',
extend: 'ux.SimpleList',
requires: ['app.view.new.Info'],
xtype: 'newList',
config: {
store: 'newList',
cls: 'list', //自定义css
itemTpl: new Ext.XTemplate('<div class="left w20"><div class="img" style="background: url({litpic}) no-repeat center;background-size: 100%;"></div></div>', '<div class="right w80"><div class="row">{title}</div><div class="row grayF">{time}</div></div>')
}
});
控制器js
/*
*新闻类
*/
Ext.define('app.controller.New', {
extend: 'Ext.app.Controller',
config: {
models: ['New'],
stores: ['NewList'],
views: ['new.List'],
refs: {
newList: 'newList'
},
control: {
//新闻列表
newList: {
initialize: function (list) {
MyUtil.showListByParams('newList', MyUtil.newParams, MyUtil.isNewLoad);
},
//itemtap事件被用来处理检测是否在编辑状态,所以这里使用itemsingletap而不能使用itemtap
itemsingletap: function (list, index, target, record, e) {
this.redirectTo('newInfo');
MyUtil.showInfo(record, 'newInfo', 'NewInfo.ashx', 'body', {
id: record.data.id
});
},
//结束多选事件触发
simpleSuccess: function (list, items, ids, type) {
console.log(ids);
}
}
}
}
});
效果:
单击
长按
确定后触发simpleSuccess事件,输出ids