Extjs4---Checkbox,多选，全选

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

html代码：

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

只需修改引用即可

gridCheck.js代码：

[javascript]  view plain copy

1. //下面两行代码必须要，不然会报404错误  
2. Ext.Loader.setConfig({enabled:true});  
3. //我的searchGrid和ext4在同一目录下，所以引用时要到根目录去"../"  
4. Ext.Loader.setPath('Ext.ux','../ext4_example/ext4/examples/ux');  
5.   
6. //预加载  
7. Ext.require(  
8.         [  
9.             'Ext.grid.*',  
10.             'Ext.toolbar.Paging',  
11.             'Ext.util.*',  
12.             'Ext.data.*',  
13.             //注意引用  
14.             'Ext.ux.form.SearchField',  
15.             //Checkbox需要引用  
16.             'Ext.selection.CheckboxModel'   
17.          ]  
18.            
19. );  
20.   
21. Ext.onReady(  
22.         function(){  
23.             //创建Model  
24.             Ext.define(  
25.                     'User',  
26.                     {  
27.                         extend:'Ext.data.Model',  
28.                         fields:[  
29.                                 {name:'id',mapping:'id'},  
30.                                 {name:'name',mapping:'name'},  
31.                                 {name:'sex',mapping:'sex'},  
32.                                 {name:'age',mapping:'age'}  
33.                         ]  
34.                     }  
35.             )  
36.             //创建数据源  
37.             var store = Ext.create(  
38.                     'Ext.data.Store',  
39.                     {  
40.                         model:'User',  
41.                           
42.                         //设置分页大小  
43.                         pageSize:5,  
44.                         proxy: {  
45.                             type: 'ajax',  
46.                             url : 'users',  
47.                             reader: {  
48.                                 //数据格式为json  
49.                                 type: 'json',  
50.                                 root: 'bugs',  
51.                                 //获取数据总数  
52.                                 totalProperty: 'totalCount'  
53.                             }  
54.                         },  
55.                         autoLoad:true  
56.                     }  
57.             );  
58.               
59.             //创建多选框  
60.              var checkBox = Ext.create('Ext.selection.CheckboxModel');   
61.               
62.             //创建grid  
63.             var grid = Ext.create('Ext.grid.Panel',{  
64.                     store:store,  
65.                     //添加到grid  
66.                     selModel:checkBox,  
67.                     disableSelection: false,//表示可以选择行  
68.                     columnLines: true,   
69.                     loadMask: true,   
70.                     columns:[  
71.                              {text:'编号',width:40,dataIndex:'id',sortable:true},  
72.                              {text:'姓名',width:120,dataIndex:'name',sortable:true},  
73.                              {text:'性别',width:120,dataIndex:'sex',sortable:true},  
74.                              {text:'年龄',width:120,dataIndex:'age',sortable:true}  
75.                     ],  
76.                     height:250,   
77.                     width:480,   
78.                     x:20,   
79.                     y:40,   
80.                     title: 'ExtJS4 Grid分页查询多选示例',   
81.                     renderTo: 'grid',   
82.                      
83.                     dockedItems:[  
84.                                  //多选框控件  
85.                                  {  
86.                                      dock:'top',  
87.                                      xtype:'toolbar',  
88.                                      items:[  
89.                                             {  
90.                                                 itemId:'Button',  
91.                                                 text:'显示所选',  
92.                                                 //tooltip:'Add a new row',  
93.                                                 //iconCls:'add',  
94.                                                 handler:function(){  
95.                                                     var record = grid.getSelectionModel().getSelection();   
96.                                                     if(record.length==0){  
97.                                                          Ext.MessageBox.show({   
98.                                                             title:"提示",   
99.                                                             msg:"请先选择您要操作的行!"   
100.                                                             //icon: Ext.MessageBox.INFO   
101.                                                          })  
102.                                                         return;  
103.                                                     }else{  
104.                                                         var ids = "";   
105.                                                         for(var i = 0; i < record.length; i++){   
106.                                                             ids += record[i].get("id")   
107.                                                             if(i<record.length-1){   
108.                                                                 ids = ids + ",";   
109.                                                             }   
110.                                                         }  
111.                                                         Ext.MessageBox.show({   
112.                                                                 title:"所选ID列表",   
113.                                                                 msg:ids   
114.                                                             }  
115.                                                         )  
116.                                                     }  
117.                                                 }  
118.                                             }  
119.                                      ]  
120.                                  },  
121.                                    
122.                                    
123.                                  //添加搜索控件  
124.                                  {  
125.                                      dock: 'top',   
126.                                      xtype: 'toolbar',   
127.                                      items: {   
128.                                          width: 200,   
129.                                          fieldLabel: '搜索姓名',   
130.                                          labelWidth: 70,   
131.                                          xtype: 'searchfield',   
132.                                          store: store   
133.                                     }  
134.                                  },{   
135.                                      dock: 'bottom',   
136.                                      xtype: 'pagingtoolbar',   
137.                                      store: store,   
138.                                      displayInfo: true,   
139.                                      displayMsg: '显示 {0} - {1} 条，共计 {2} 条',   
140.                                      emptyMsg: '没有数据'   
141.                                 }  
142.                     ],  
143.                 }  
144.             )  
145.             store.loadPage(1);   
146.         }  
147. )  

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

效果图：

点击“显示所选”