sencha touch list 批量选择扩展(2013-7-29)

扩展js代码

 /*
 *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