Extjs4---Checkbox,多选，全选

为了方便对多条数据进行修改，多选，全选功能是不可少的，本文是在我发表的 Extjs4---grid添加搜索功能 上进行修改的

html代码：

同 Extjs4---grid添加搜索功能 上的html代码

只需修改引用即可

gridCheck.js代码：

    //下面两行代码必须要，不然会报404错误
Ext.Loader.setConfig({enabled:true});
//我的searchGrid和ext4在同一目录下，所以引用时要到根目录去"../"
Ext.Loader.setPath('Ext.ux','../ext4_example/ext4/examples/ux');

//预加载
Ext.require(
		[
		 	'Ext.grid.*',
		 	'Ext.toolbar.Paging',
		 	'Ext.util.*',
		 	'Ext.data.*',
		 	//注意引用
		 	'Ext.ux.form.SearchField',
		 	//Checkbox需要引用
		 	'Ext.selection.CheckboxModel' 
		 ]
		 
);

Ext.onReady(
		function(){
			//创建Model
			Ext.define(
					'User',
					{
						extend:'Ext.data.Model',
						fields:[
						        {name:'id',mapping:'id'},
						        {name:'name',mapping:'name'},
						        {name:'sex',mapping:'sex'},
						        {name:'age',mapping:'age'}
						]
					}
			)
			//创建数据源
			var store = Ext.create(
					'Ext.data.Store',
					{
						model:'User',
						
						//设置分页大小
						pageSize:5,
						proxy: {
					        type: 'ajax',
					        url : 'users',
					        reader: {
								//数据格式为json
					            type: 'json',
					            root: 'bugs',
					            //获取数据总数
					            totalProperty: 'totalCount'
					        }
					    },
						autoLoad:true
					}
			);
			
			//创建多选框
			varcheckBox=Ext.create('Ext.selection.CheckboxModel'); 
			
			//创建grid
			var grid = Ext.create('Ext.grid.Panel',{
					store:store,
					//添加到grid
					selModel:checkBox,
					disableSelection:false,//表示可以选择行
					columnLines:true, 
					loadMask:true, 
					columns:[
					         {text:'编号',width:40,dataIndex:'id',sortable:true},
					         {text:'姓名',width:120,dataIndex:'name',sortable:true},
					         {text:'性别',width:120,dataIndex:'sex',sortable:true},
					         {text:'年龄',width:120,dataIndex:'age',sortable:true}
					],
					height:250, 
			        width:480, 
			        x:20, 
			        y:40, 
			        title: 'ExtJS4 Grid分页查询多选示例', 
			        renderTo: 'grid', 
			       
			        dockedItems:[
			                     //多选框控件
			                     {
			                    	 dock:'top',
			                    	 xtype:'toolbar',
			                    	 items:[
			                    	        {
			                    	        	itemId:'Button',
			                    	        	text:'显示所选',
			                    	        	//tooltip:'Add a new row',
			                    	        	//iconCls:'add',
			                    	        	handler:function(){
			                    	        		varrecord=grid.getSelectionModel().getSelection(); 
			                    	        		if(record.length==0){
			                    	        			Ext.MessageBox.show({ 
    	        				title:"提示", 
    	        				msg:"请先选择您要操作的行!" 
    	        				//icon:Ext.MessageBox.INFO 
    	        				 })
    	        										return;
			                    	        		}else{
			                    	        			varids=""; 
        	        			for(vari=0;i<record.length;i++){ 
        	        			ids+=record[i].get("id") 
        	        			if(i<record.length-1){ 
        	        			ids=ids+","; 
        	        			} 
        	        			}
        	        									Ext.MessageBox.show({ 
        	        				title:"所选ID列表", 
        	        				msg:ids 
        	        										}
        	        									)
			                    	        		}
			                    	        	}
			                    	        }
			                    	 ]
			                     },
			                     
			                     
			                     //添加搜索控件
			                     {
			                    	 dock:'top', 
                    	 xtype:'toolbar', 
                    	 items:{ 
                    	 width:200, 
                    	 fieldLabel:'搜索姓名', 
                    	 labelWidth:70, 
                    	 xtype:'searchfield', 
                    	 store:store 
			                     	}
			                     },{ 
                    	 dock:'bottom', 
                    	 xtype:'pagingtoolbar', 
                    	 store:store, 
                    	 displayInfo:true, 
                    	 displayMsg:'显示{0}-{1}条，共计{2}条', 
                    	 emptyMsg:'没有数据' 
			                    }
			        ],
				}
			)
			store.loadPage(1); 
		}
)


  

Servlet,java后台代码也和 Extjs4---grid添加搜索功能 相同

效果图：

点击“显示所选”

Extjs4---Checkbox,多选，全选