Sencha Touch 列表批量选择扩展

Posted 周一, 07/29/2013 - 00:25 by admin

效果如下图:

/*
*list多选扩展
*/
Ext.define('ux.SimpleList', {
    alternateClassName: 'simpleList',
    extend: 'Ext.List',
    xtype: 'simpleList',
    config: {
        editCls: 'simpleList',
        //是否在多选状态（不可更改）
        isSimple: false,
        //设置数据主键(可配置)
        ckId: 'id',
        //多选时弹出菜单栏(可配置)
        simpleToolBar: {
            //默认位置
            docked: 'bottom',
            //默认标题
            title: '删除',
            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');
                        //移除多选栏
                        this.getParent().getParent().hide();
                        this.getParent().getParent().destroy();
                        //结束多选
                        list.endSimple();
                    }
                }
            },
            {
                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[.config.ckId]);
                        }
                        //移除多选边栏
                        this.getParent().getParent().hide();
                        this.getParent().getParent().destroy();
                        //结束多选
                        list.endSimple();
                        //触发选择成功事件
                        list.fireEvent('simpleSuccess', ids);
                    }

                }
            }]
        },
        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 () {
        if (!this.config.isSimple) {
            //取消全选
            this.deselectAll();
            //进入多选模式
            this.setMode('SIMPLE');
            //添加css
            this.addCls(this.config.editCls);
            //显示OnItemDisclosure
            this.setOnItemDisclosure(true);
            //加入标记，以便在itemtap事件中进行判定
            this.config.isSimple = true;
            //添加多选边栏
            this.add(this.getSimpleToolBar());
        }
    },
    //结束多选模式
    endSimple: function () {
        console.log('endSimple');
        //取消全选
        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 (ids) {
                    console.log(ids);
                }
            }
        }
    }
});

确定后触发simpleSuccess事件，输出ids