ExtJS dataview全选方法

ExtJS版本:4.1.0

在api中发先并未提供全选的直接调用方法,只提供了一个select,

ExtJS dataview全选方法_第1张图片

当然按照select的参数说明,传入一个数组也可以达到全选的效果。
要想全选需要注意的一点是必须设置  multiSelect:true
另外就是通过Ext.selection.Model中的selectAll来实现。具体可以看下方的代码。

var bankStore=Ext.create('Ext.data.Store', {
		    autoLoad: true,
		    fields : [ 'id','name','url','bankCode','type','enable'],
		        proxy           : {
				        type    : 'ajax',
				        url:window.CONTEXT_PATH + '/payment/list',
				        headers : UIConfig.AJAX_HEADERS,
				        reader  : {
				            root          : 'dataList',
				            totalProperty : 'totalCount'
				        }
				    }
		});

		var banksTpl = new Ext.XTemplate(
			'<div class="banks">',
		    '<tpl for=".">',
		        '<div style="margin-bottom: 10px;" class="bank">',
		        '<div class="icon-bank" style="background-position:0 {url}px"></div>',
		        '</div>',
		    '</tpl>',
		    '</div>'
		);
		
		var panel=Ext.widget('panel',{
			renderTo:document.body,
			margin:20,
			title:'支付管理',
			height:500,
			layout:'fit',
			dockedItems: [{
		        xtype: 'toolbar',
		        dock: 'top',
		        items: [{
		            text: '全选',
		            handler:function(){
		            	var banksView=Ext.getCmp('banksView');
		            	banksView.getSelectionModel().selectAll();
		    
		            	// 第二种方法
		            	//banksView.select(bankStore.data.items,true);
		            }
		        },{
		            text: '反全选',
		            handler:function(){
		            	var banksView=Ext.getCmp('banksView');
		            	//banksView.getSelectionModel().deselectAll();
		    
		            	// 第二种方法
		            	banksView.deselect(bankStore.data.items,true);
		            }
		        }]
		    }],
			items:[{
				xtype:'dataview',
				id:'banksView',
				store: bankStore,
				trackOver:true,
			    tpl: banksTpl,
			    multiSelect:true,
			    itemSelector: 'div.bank',
			    selectedItemCls:'bank-selected',
			    overItemCls: 'bank-hover'
			}]
		});
		


效果图

ExtJS dataview全选方法_第2张图片

ExtJS dataview全选方法_第3张图片

你可能感兴趣的:(全选,ExtJs,DATAVIEW)