sencha touch list 批量选择扩展

修改后的代码：

?

/*

*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;base 64 ,iVBORw 0 KGgoAAAANSUhEUgAAADwAAAA 8 CAYAAAA 6 /NlyAAAE+klEQVRoBe 2 aS 28 URxRGsY 0 h 2 FmwCQuEWLHjvUNgZAQ 4 PMwrEkIRIGEgySKwB 8 QvYIvEP+ANO 0 CwsJAA 88 wGBEKBZJUVQkJCQrwJ 5 nxN 31 Z 5 pnpc 7 e 4 ZT 9 vT 0 peqqanquqfurVvlIW 3 Dw 8 NTJtPTPplgxdoCnugeb 3 m 45 eEJtgJTJwJPGw 8 cP 8 V 6 TfmC 4 /Z/H 9 uEAAZsIdqHZiMBn 2 UNbvigSw 8 M 2 AIAD 6 PtqBPpmYe+ 8 t 1 NoL 9 GLfYf 3 bTKKhiWo 9 PoA 9 KV 0 dUgn/tRh 8 tXWg/Hnj 0 KUB 8 yz 1 JNnjXUuhFd 264 A/f 0 O 7 dKXpQ 7 EIiTPfkKuVyvrSlx 3 US+KPF 26 cMbwxeg 8 Gg 3 W 4 LWHFd 6 rUUepQprQnI/Rh 9 A 25 AtjmqseHVkK 7 w 59 UxpgYFdg 7 wH 0 CwqFpWvyrKI 23 GZ 7 OWluwgqwOnqOobVoWh 4 Tm 97 DwCpBHUFp 2 TiUX 3 v 5 QVMnLQzMmqAsUVWWyta 3 UX/TAmOcwjjk 6 KmE 830 W 7 GbU 0 ZTAGKYEJdj 3 yAcQ 2 qYw 1 jmsG 9 e 0 KF 8122 UDw/SHwFX 0 EYWC+fpZGG/hPcn 1 sqk 8 jGHas+dQ 6 KXCB 6 o 2 g 91 IPfKsObZpgDGsqAT 1 hXdpz 25 A 7 QZqZU 1 gBsxFSh 5 zbEA 9 yniOU 5 R 5 PSvvCnYTSsLYtdkLTGf 9 uKdD/gS 6 gI 6 jPndgUXXe 24 OKSFAK 4 zsoSVA+G 6 uAGaC 758 /oBrIs+Zb 6 rbg 9 up 35 Xpa 1 jffpUqEEldezysbJ 0 VPLjhHADOpEfUiw 2 gtuUtAKDiGtYNXeqDWJ 7 zveYQnqM 3 V 3 nqx 1 s 2 s 97 xmRoLzzWqMgkLLaTVQJa 0 ZoJe+hXjRmaMYKVlslr 2 dlp 5 wgu 4 PsiTyszmg 5 qgVr 0 CqvoZW 2 WFlKxhV 5 gxJsdIMKtYH+Eew 6 yksoNLy 0 soJeFzqR+vEI 9 gx 6 h 9 wFzFoPSlA+ 25 g 3 SlChnnUNU 3 grkWmxRg 0 n+ihBnUR 5 w 9 j 2 bCbPGjzzR 3 sgbc+ 6 gL 66 TV 4 zkTHHEqSfZSzr+ 94 V 0 mbzKUF 1 GkSWknG 5 QktGyoj 7 qBdVeZo 2 S 1 Ch 2 yUNXOMVUcEJyrcQjOeP 4 vzQCu 9 BpBtOck 5 T 70 HybN 4 w 1 iJcR 7 ouem 9 QPjhfG+On 7 EBPUNrKhrYLWp 7 +FS 1 FCjtdKvJ 6 VvM/Q 9 o 2 uWC 1 AHq 60 QB 6 hELh 0 voJ+im 6 iHReF+FZwe 5 HP/g 8 lrXNzuEfeeFu 9 C 9 Kg 8 nSrr 9 lBZ 9 ljK/v 37 xjL 5 qRFSytf 3 K 15 KXy 9 EH 0 D/JN 3 ui 2 Qj 1 rC 5 AAq 4 FnJvoDPUSNBnTnUy 4 YQF 1 maFHlCOAYuouJFN 6 PkWtEo+ryrH 5 sL 2 TPVi 5 UFXAMrfDegxrtae 3 ZfWh 6 paFFffYCx 9 BKZLtQo/a 0 YLXIhSUo 3 yKlAsfQ 8 vSBBkALtrCjxwdqbTWBY 2 glst 9 REee 0 Lw/ULUEZpFuOChxD 1 yuRybNbUV 0 SlAtq 9 SDgGFp 7 ushEJlhdKuqWoAzSLYOBHeidGPkc+cIztE 2 wA 6 iuCcoFtXom 4 Bha 4 f 0 nGmv 2 FqyOnoaFscFG 9 rsfQusYq 0 T 2 G 8 qayASrbdEdOlfR/TJ 72 AzAaHla 5 /QD 9 BnVCucvfK/fjZXtx 8 WzZneu/+WBf 53 XOb 0 G 6 XetHjQXyfv 2 vKLyH 7 qLLqMhJn 5 DOW 5 PLmBZDfRUilloGUoD/ovvXgIrT 4 /rkxt 4 XK 0 fw+TtYxhT 6 iEt 4 FK 7 L 8 D 4 locDFqnUXSadh 78 Bx 5 bEl 2 CLG+ 8 AAAAASUVORK 5 CYII=);

     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