Extjs4---Checkbox,多选，全选

本文主要是介绍Extjs4---Checkbox,多选，全选，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
为了方便对多条数据进行修改，多选，全选功能是不可少的，本文是在我发表的Extjs4---grid添加搜索功能上进行修改的
html代码：
同Extjs4---grid添加搜索功能上的html代码
只需修改引用即可
gridCheck.js代码：
[javascript]  view plain copy  
 //下面两行代码必须要，不然会报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);   
         }  
 )  