自定义控件Ext.grid.GridPanel

最新推荐文章于 2016-03-30 15:01:00 发布

原创最新推荐文章于 2016-03-30 15:01:00 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #JSP

本文介绍了使用 ExtJS 框架实现 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);
    });