extjs的gridPanel

Ext.onReady(function(){
 //多选列
 var sm = new Ext.grid.CheckboxSelectionModel();
 //定义好模型
 var cm = new Ext.grid.ColumnModel([
       new Ext.grid.RowNumberer(),  //序列号栏
      // sm,//多选框栏
       {header:"姓名",width:50,dataIndex:"username",tooltip:"这个是你的名字",sortable:true},//是否排序
       {header:"年龄",width:50,dataIndex:"age",align:"center",fixed:true},//是否固定宽
       {header:"身高",width:80,dataIndex:"hight",align:"center",resizable:false},//是否可以改变宽度
       {header:"体重",width:80,dataIndex:"weight",align:"center",menuDisabled:true},//点击时是否出现菜单栏
       {header:"性别",width:80,dataIndex:"sex",align:"center"},//对齐方式
       {header:"原籍",width:80,dataIndex:"provience",align:"center"},
       {header:"是否独生子",width:120,dataIndex:"alone",align:"center"},
       {id:"memo",header:"备注",width:80,dataIndex:"memo"},
       {header:"操作",width:120,dataIndex:"",align:"center",renderer:function(v){
        return "<span><a href='#' color='red'>编辑</a> &nbsp;<a href='#' color='red' id='delete'>删除</a></span>"
       }}
 ]);
 
 //定好模拟数据
 var json = [
      {
       username:"1朱湘鄂",
       age:"21",
       hight:"170cm",
       weight:"52kg",
       sex:"男",
       provience:"湖南",
       alone:"no",
       memo:"暂无备注"
      },
      {
       username:"2朱湘鄂",
       age:"21",
       hight:"170cm",
       weight:"52kg",
       sex:"男",
       provience:"湖南",
       alone:"no",
       memo:"暂无备注"
      },
      {
       username:"3朱湘鄂",
       age:"21",
       hight:"170cm",
       weight:"52kg",
       sex:"男",
       provience:"湖南",
       alone:"no",
       memo:"暂无备注"
      },
      {
       username:"4朱湘鄂",
       age:"21",
       hight:"170cm",
       weight:"52kg",
       sex:"男",
       provience:"湖南",
       alone:"no",
       memo:"暂无备注"
      },
      {
       username:"5朱湘鄂",
       age:"21",
       hight:"170cm",
       weight:"52kg",
       sex:"男",
       provience:"湖南",
       alone:"no",
       memo:"暂无备注"
      },
      {
       username:"6朱湘鄂",
       age:"21",
       hight:"170cm",
       weight:"52kg",
       sex:"男",
       provience:"湖南",
       alone:"no",
       memo:"暂无备注"
      }
      ,
      {
       username:"7朱湘鄂",
       age:"21",
       hight:"170cm",
       weight:"52kg",
       sex:"男",
       provience:"湖南",
       alone:"no",
       memo:"暂无备注"
      },
      {
       username:"8朱湘鄂",
       age:"21",
       hight:"170cm",
       weight:"52kg",
       sex:"男",
       provience:"湖南",
       alone:"no",
       memo:"暂无备注"
      },
      {
       username:"9朱湘鄂",
       age:"21",
       hight:"170cm",
       weight:"52kg",
       sex:"男",
       provience:"湖南",
       alone:"no",
       memo:"暂无备注"
      },
      {
       username:"10朱湘鄂",
       age:"21",
       hight:"170cm",
       weight:"52kg",
       sex:"男",
       provience:"湖南",
       alone:"no",
       memo:"暂无备注"
      },
      {
       username:"11朱湘鄂",
       age:"21",
       hight:"170cm",
       weight:"52kg",
       sex:"男",
       provience:"湖南",
       alone:"no",
       memo:"暂无备注"
      }
 ];
 
 
 //创建代理
 var proxy = new Ext.data.MemoryProxy(json);
 
 
 //创建record记录集
 var Record = new Ext.data.Record.create([
      {name:"username",type:"String",mapping:"username"},      
      {name:"age",type:"String",mapping:"age"},                
      {name:"hight",type:"String",mapping:"hight"},                
      {name:"weight",type:"String",mapping:"weight"},                
      {name:"sex",type:"String",mapping:"sex"},                
      {name:"provience",type:"String",mapping:"provience"},   
      {name:"alone",type:"String",mapping:"alone"},                
      {name:"memo",type:"String",mapping:"memo"},                
 ]);
 
 
 //创建reader
 var reader = new Ext.data.JsonReader({},Record);
 
 //创建Store
 var store = new Ext.data.Store({
  proxy:proxy,
  reader:reader
 });
 
 
 //显示加载
 store.load();
 
 //创建girdPanel对象
 var gridPanel = new Ext.grid.GridPanel({
  title:"人员详细资料",
  width:1000,//宽度
  autoHeight:true,
  cm:cm,
  //sm:sm,
  store:store,
  autoExpandColumn:true,
  titleCollapse:true,//标题兰是否具备收缩功能
  collapsible:true,//表示panel可以收缩
  renderTo:Ext.getBody(),
  buttons:[
     {
      text:"第一行",
      handler:function(){
        var rsm = gridPanel.getSelectionModel();
        rsm.selectFirstRow();
         }
     }, 
     {
      text:"上一行",
      handler:function(){
        var rsm = gridPanel.getSelectionModel();
        if(!rsm.hasPrevious()){
         Ext.Msg.alert("提示","已经是第一行了");
        }else{
         rsm.selectPrevious();
        }
        
         }
     }, 
     {
      text:"下一行",
      handler:function(){
        var rsm = gridPanel.getSelectionModel();
        if(!rsm.hasNext()){
         Ext.Msg.alert("提示","已经是最后一行了");
        }else{
         rsm.selectNext();
        }
         }
     }, 
     {
      text:"最后一行",
      handler:function(){
        var rsm = gridPanel.getSelectionModel();
        rsm.selectLastRow();
         }
     }, 
     {
      text:"全选",
      handler:function(){
        var view = gridPanel.getView();
        var rsm = gridPanel.getSelectionModel();
        rsm.selectAll();
        //打印选中的行
        var r="";
        for(var i=0;i<view.getRows().length;i++){
         if(rsm.isSelected(i)){
          r+=gridPanel.getStore().getAt(i).get("username");
         }
        }
        Ext.MessageBox.alert(r);
        
         }
     }, 
     {
      text:"反选",
      handler:function(){
        var rsm = gridPanel.getSelectionModel();
        for(var i=gridPanel.getView().getRows().length; i>=0;i--){
         if(rsm.isSelected(i)){
          rsm.deselectRow(i);
         }else{
          rsm.selectRow(i,true);
         }
        }
         }
     }, 
     {
      text:"新增一行到首行",
      handler:function(){
        var view = gridPanel.getView();
        var obj = {
             username:"李理华",
          age:"19",
          hight:"170cm",
          weight:"42kg",
          sex:"男",
          provience:"湖南",
          alone:"no",
          memo:"暂无备注"
        };
        var human = new Record(obj);
        gridPanel.getStore().insert(0,human);
        view.refresh();
         }
     } , 
     {
      text:"全部删除",
      handler:function(){
        var view = gridPanel.getView();
        var store = gridPanel.getStore();
        store.removeAll();
        view.refresh();
         }
     }
  ]
  
 });
 
 //删除按钮
 Ext.get('delete').on('click',function(){
  var rsm = gridPanel.getSelectionModel();
  var store1 = gridPanel.getStore();
  var view = gridPanel.getView();
  
  for(var i=view.getRows().length-1;i>=0;i--){
   if(rsm.isSelected(i)){
    store1.remove(store1.getAt(i));
   }
  }
  view.refresh();
 });
});