自定义控件Ext.grid.GridPanel

gridPanel.js  代码

 

gridPanel=function(view,config){
 Ext.apply(this,view);
 this.init(config);
 this.bbar=new Ext.PagingToolbar({
  store:this.store,
  emptyMsg : '当前没有任何数据',
  pageSize:10,
  displayInfo : true, 
  displayMsg : "显示 {0} 到 {1}条数据 总共{2}条数据"
 });
 gridPanel.superclass.constructor.call(this,{});
};
Ext.extend(gridPanel,Ext.grid.GridPanel,{
 init:function(config){
     var sm=new Ext.grid.CheckboxSelectionModel();
     var code=new Ext.grid.RowNumberer();
     var col=[sm,code,config.expander],render=[];
     for(var i=0;i<config.column.length;i++){
      col.push(config.column[i]);
      render.push({name:config.column[i].dataIndex});
     }
     this.sm=sm;                      //复选框
     this.columns=col;                //设置表头
     this.plugins=config.expander;    //插件
     this.store=new Ext.data.Store({
      url :config.url,
   reader :  new Ext.data.JsonReader( {
          totalProperty : 'count',
          root : 'rows'
             },Ext.data.Record.create(render)),  
   baseParams: {limit : 10, start : 0},    
      autoLoad : true 
     });
    }
});

 

 

 

 

GridPanel.jsp  代码

 

Ext.onReady(function(){
        var config={};
        config.url="GridPanelServlet";
        config.expander = new Ext.ux.grid.RowExpander({       
              tpl : new Ext.Template(
              '<table>'+
                 '<tr><td>年龄:{age}</td>'+
        '<td>姓名:{name}</td>'+
        '<td>性别:{sex}</td>'+
        '</tr>'+
              '</table>'
               ),
         lazyRender : false,
         enableCaching : false  //表格插件的 自动刷新 ，可以刷新图片,文字
        });
        config.column=[{header:'姓名',width:100,sortable:true,dataIndex:'name'},
                        {header:'性别',width:100,sortable:true,dataIndex:'sex'},
                        {header:'年龄',width:100,sortable:true,dataIndex:'age'}];
        new gridPanel({title:'表格',name:'grid',renderTo:Ext.getBody(),height:600},config);
    });

 

 

 

没事随便弄一下的..有什么不好的地方请大家提下....