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

来源：互联网发布：金利来钱包淘宝编辑：程序博客网时间：2024/05/22 00:52

选择记忆功能参考：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    }});

效果：

点击全选二字之后

0 0