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
					}
			);
			
			//创建多选框
			 var checkBox = 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(){
			                    	        		var record = grid.getSelectionModel().getSelection(); 
			                    	        		if(record.length==0){
			                    	        			 Ext.MessageBox.show({ 
    	        				                            title:"提示", 
    	        				                            msg:"请先选择您要操作的行!" 
    	        				                            //icon: Ext.MessageBox.INFO 
    	        				                         })
    	        										return;
			                    	        		}else{
			                    	        			var ids = ""; 
        	        			                        for(var i = 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添加搜索功能相同

效果图：

点击“显示所选”