extjs实例---生成漂亮的表格

 Ext.onReady(function(){ 
 
      var cm=new Ext.grid.ColumnModel([
     {header:"姓名",width:80,dataIndex:"name"},
     {header:"性别",width:40,dataIndex:"sex",
     renderer:function(v){
        if(v=="男")
        {
           return "<img src='img/nan.gif'>";
        }else{
          return "<img src='img/nv.gif'>";
        }
     }},
     {header:"生日",width:150,format:"Y-m-d",dataIndex:"birthday"},
     {header:"学历",width:80,dataIndex:"edu"},
     {header:"备注",width:100,dataIndex:"memo"},
     {id:"zl",header:"完整度",dataIndex:"zl",renderer:function(v){
        var str="";
         for(var i=0;i<v;i++)
         {
            str+="<img src='img/tang.gif'>";
         }
           return str;
     }}
    ]);
        //准备数据
       
        var data=[{name:"李赞红",sex:"男",birthday:Date.parseDate("1987-04-11","Y-m-d"),edu:"本科",memo:"无备注",zl:3},
              {name:"陈南",sex:"男",birthday:Date.parseDate("1987-04-11","Y-m-d"),edu:"本科",memo:"一个小帅个",zl:4},
              {name:"易珊静",sex:"女",birthday:Date.parseDate("1987-04-11","Y-m-d"),edu:"本科",memo:"无备注",zl:2},
              {name:"张海军",sex:"男",birthday:Date.parseDate("1987-04-11","Y-m-d"),edu:"本科",memo:"无备注",zl:1}];

              var proxy=new Ext.data.MemoryProxy(data);      
              var Human=Ext.data.Record.create([
              {name:"name", type:"string",mapping:"name" },
              {name:"sex",type:"string",mapping:"sex"},
              {name:"birthday",type:"date",mapping:"birthday"},
              {name:"edu",type:"string",mapping:"edu"},
              {name:"memo",type:"string",mapping:"memo"},
              {name:"zl",type:"int",mapping:"zl"}
              ]);
             var reader=new Ext.data.ArrayReader({},Human);
              var store=new Ext.data.Store({
                proxy:proxy,
                reader:reader
              });
              store.load();
             
    /* Ext.grid.RowNumberer.prototype={
     header:"",
     width:23,
     sortable:false,
     fixed:true,
     menuDisabled:true,
     dataIndex:'',
     id:'numberer',
     rowspan:undefind,
     renderer:function(v,p,record,rowIndex){
        if(this.rowspan)
        {
            p.cellAttr='rowspan=';
        }
     }
     }    */  
     
    var grid=new Ext.grid.GridPanel({
       title:"中国公民",
       width:1000,
       cm:cm,
       height:300,
       renderTo:"aa",
        store : store,
        buttons:[{text:"第一行",handler:function(){pd('1')}},
                  {text:"上一行",handler:function(){pd('2')}},
                  {text:"下一行",handler:function(){pd('3')}},
                  {text:"最后一行",handler:function(){pd('4')}},
                  {text:"全选",handler:function(){pd('5')}},
                  {text:"全不选",handler:function(){pd('6')}},
                  {text:"反选",handler:function(){pd('7')}}]
    }); 
     function pd(zhi)
      {
         var rsm=grid.getSelectionModel();
          switch(zhi)
          {
             case '1':
               rsm.selectFirstRow();
               break;
             case '2':
               if(!rsm.hasPrevious())
               {
                  Ext.Msg.alert("警告","已经到达第一行");
               }else{
                  rsm.selectPrevious();
               }
               break;
             case '3':
               if(!rsm.hasNext())
               {
                  Ext.Msg.alert("警告","已经到达最后一行");
               }else{
                  rsm.selectNext();
               }
               break;
             case '4':
              rsm.selectLastRow();
              break;
             case '5':
               rsm.selectAll();
               break;
             case '6':
               rsm.deselectRange(0,grid.getView().getRows().length-1);
               break;
             case '7':
               for(var i=grid.getView().getRows().length-1;i>=0;i--)
               {
                  if(rsm.isSelected(i))
                  {
                     rsm.deselectRow(i);
                  }else{
                     rsm.selectRow(i,true);
                  }
               }
               break;
             defaule:break
          }
      };
      //name:"李赞红",sex:"男",
      //增加新行
       var view=grid.getView();
      var obj={
         name:"cs",
         sex:"女",
         birthday:Date.parseDate("1989-04-11","Y-m-d"),
         edu:"本科",
         memo:"无备注",
         zl:4
      };
      var human=new Human(obj);
      grid.getStore().insert(0,human);
      view.refresh();
})
 

 

 

html代码

<div id="aa"></div>