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

选择记忆功能参考：https://market.sencha.com/extensions/ext-plugin-rememberselection

插件代码：

 

/*

* 记住列表选择状态

* 如果分组，支持点击全选按钮全选分组

* 需要添加以下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();

        //}

    }

});

 

需要的关键css：

 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

    }

});

效果：

 

点击全选二字之后