sencha touch list 选择插件，可记忆已选项，可分组全选

/*
* 记住列表选择状态
* 如果分组，支持点击全选按钮全选分组
* 需要添加以下css
.select .x-list-header:before {
content:"全选";
right:0;
position:absolute;
width:3em;
text-align:center;
}
*/

Ext.define('ux.plugin.Remember', {
extend: 'Ext.Component',
alias: 'plugin.remember',
xtype: 'remember',
config: {
//Reference a function in the plugin configuration to specify a default selection. It should return an Array or Mixed Collection of records whose corresponding list items will be selected by default.
getDefaultSelectionRecords: Ext.emptyFn,

//Setting this property to true will supress the selection event when restoring default or "remembered" selections
supressEvent: false,

//Private
list: null,
},

//Establishes the event handlers
init: function (list) {
var me = this;
me.setList(list);
var store = list.getStore();
if (list.getGrouped()) {
list.addCls('select');
//如果支持分组，监听表头点击事件
list.container.element.on({
delegate: 'div.x-list-header',
tap: 'onHeaderTap',
scope: me
});
list.setScrollToTopOnRefresh(false);
list.handlePinnedHeader = function () { };
}
//监听选中项，在选中之前执行
list.onBefore({
selectionchange: 'rememberSelections',
painted: 'restoreSelections',
scope: me
});

//监听数据源,在数据load之后执行,用以支持远程数据
store.onAfter(({
load: 'restoreSelections',
scope: me
}));
},
//点击表头
onHeaderTap: function (e, node) {
//根据节点css判断点击元素，也可以通过node.clientWidth - e.pageX计算点击位置来判断
var me = this, list = me.getList();
if (node.classList.length >= 4) {
var header = e.getTarget('div.x-list-header', 2, true),
scroller = e.getTarget('div.x-scroll-scroller', 3, true),
headers = scroller.query('div.x-list-header'),
index = header ? headers.indexOf(header.dom) : false,
store = list.getStore(),
groups = store.getGroups(),
group = groups[index],
records = group.children,
record,
i,
ln;
//进行全选操作
list.select(records, true);
}
},
//恢复选择状态
restoreSelections: function () {
var me = this,
list = me.getList();

//获取选中项
var selected = list.getStore().queryBy(function (record, id) {
return record.get('selected');
}).getRange();

if (!Ext.isEmpty(selected)) {
//开始选择
//重置选择状态，用以触发事件
list.deselectAll(true);
list.select(selected, false, me.getSupressEvent());
} else {
//如果没有“记住”选项，恢复所有默认选项
var fn = me.getGetDefaultSelectionRecords();
var defaultselectionrecords = fn(list);
if (!Ext.isEmpty(defaultselectionrecords)) {
list.select(defaultselectionrecords, false, me.getSupressEvent());
}
}
},

//记住选择状态
rememberSelections: function (list, records) {
var store = list.getStore();
var proxy = store.getProxy();

//如果是单选状态，重置选择标识状态
if (list.getMode() == 'SINGLE') {
store.each(function (record) {
if (record.get('selected')) {
record.set('selected', false);
}
});
}

//记住选择状态
Ext.each(records, function (record) {
//可能会出错，抛出异常
try { record.set('selected', list.isSelected(record)); } catch (e) { }
}, this);

////重置筛选器
//if (!Ext.isEmpty(store.getFilters())) {
//    store.filter();
//}
}
});

1 .select .x-list-header {
2     padding:0.5em 1.02em;
3 }
4 .select .x-list-header .x-innerhtml {
5     color:#32BBC1;
6 }
7 .select .x-list-header:before {
8     content:"全选";
9     right:0;
10     position:absolute;
11     width:3em;
12     text-align:center;
13     color:#8C8C8A;
14 }
15 .select .x-list-header,.select .x-list-item.x-list-item-tpl,.select .x-list-item.x-list-item-tpl.x-list-footer-wrap {
16     border-top:0;
17     border-bottom:1px solid #F2F2E8;
18     background-image:none;
19     background-color:#E7E4DD;
20     background-image:linear-gradient(#E6E6DE,#DEDDD4);
21 }
22 .select .x-list-item.x-list-item-tpl.list-item-selected {
23     background-image:none;
24     background-color:#D9D5CC;
25 }
26 .select .x-list-item-tpl .x-list-disclosure {
27     border-radius:0;
28     border:1px solid #D8D8D7;
29     background-image:none;
30     background-color:#E2E2E2;
31     background-image:linear-gradient(#E0E0E0,#EAEAEA);
32 }
33 .select .x-list-disclosure:before {
34     content:'3';
35     font-size:20px;
36     color:white;
37 }
38 .select .list-item-selected .x-list-disclosure {
39     border:1px solid #ADD157;
40     background-image:none;
41     background-color:#AEE03D;
42     background-image:linear-gradient(#AEE03E,#AEE03E);
43 }

/*
*选择对象
*/
Ext.define('app.view.tiny.People', {
alternateClassName: 'tinyPeople',
extend: 'Ext.List',
xtype: 'tinyPeople',
requires: ['ux.plugin.Remember'],
config: {
cls: 'list',
title: '对象选择',
cls: 'select',
mode: 'SIMPLE',
plugins: ['remember'],
selectedCls: 'list-item-selected',
itemTpl: '<div>{StudentName}</div>',
store: 'peopleList',
onItemDisclosure: true,
grouped: true
}
});