為了方便對多條數據進行修改，多選，全選功能是不可少的，本文是在我發表的 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,多選，全選