Extjs动态生成表头（适用报表）

说明：

　　之前在公司实习的时候，做了一个简单的涉及账务的管理系统，是用Struts2+Hibernate+ExtJS3.2开发的。由于每个月支出的日期是不一样的，所以Ext的表头必须是动态生成的，下面我将自己实现的动态表头和大家分享一下。

 

　　1、ExtJS代码　　

 

Ext.onReady(function() {
    Ext.QuickTips.init();// 初始化
    Ext.form.Field.prototype.msgTarget = 'side';
 4 
    Ext.Ajax.request({
        method:'post',
        url:'report?type=make_grid',
        async : false,  
        success:function(response, opts){
10             
            var limit=10;
            var start=0;
13             
            var obj = Ext.decode(response.responseText);// obj储存响应的数据
            var fieldDatas=(obj.columModle);
            var fieldsNames=(obj.fieldsNames);
            var cm = new Ext.grid.ColumnModel(fieldDatas);
            var store = new Ext.data.JsonStore({
                root : 'root',
                totalProperty : 'totalCount',
                url : 'report?type=report',
                fields: fieldsNames
            });
24             
            var grid = new Ext.grid.GridPanel({
                title:'动态表头',
                layout:'fit',
                stripeRows : true, // 斑马线
                selModel : new Ext.grid.RowSelectionModel({
                    singleSelect : true
                }),// 只允许选中一行
                loadMask : {
                    msg : '正在加载数据，请稍侯……'
                },
                iconCls : 'information',
                trackMouseOver : true,
                frame : true,
                height:200,
                autowidth:true,
                region: 'center',
                split: true,
                border:false,
                store:store,
                viewConfig : {
                    forceFit : true
                },
                cm:cm,
                bbar : new Ext.PagingToolbar({
                    pageSize : limit,
                    store : store,
                    displayInfo : true,// 显示分页按钮
                    displayMsg : '<font size=2>第 {0} 条到 {1} 条,一共 {2} 条记录</font>',
                    emptyMsg : '没有记录'
                })
            });
56             
            new Ext.Viewport({
                layout:'fit',
                items : grid
            });
            // -----装载数据
            store.load({
                params : {
                    start : start,
                    limit : limit
                }
            });
        }
    });
});

 

　　2、后台代码

 

if(this.getType().equals("make_grid")){
 2             
            /**
             * 取到上个月信息
*/
            String nowDate=DateUtil.format(new Date(), "yyyy-MM");
 7             
            String lastTime="";
            lastTime=getTime(nowDate);
            //////////////////////////////////////////////
            StringBuffer sb=new StringBuffer();
            //
            sb.append("{'columModle':[");
            sb.append("{'header': '用户名称','dataIndex': 'username'},");
            sb.append("{'header': '上月节余','dataIndex': 'remainfare'},");
            sb.append("{'header': '本月预交','dataIndex': 'shangjiao'},");
            //活动平摊时间
            ///////////////////////////////////////////
            String fareInf="select distinct(uf.zhichutime) from Userfare uf where substring(uf.zhichutime,1,7)='"+lastTime+"' order by uf.zhichutime";
            List<?> fareInfList=this.activityServiceImpl.query(fareInf);
            if(fareInfList.size()>0){
                for(int i=0;i<fareInfList.size();i++){
                    sb.append("{'header': '"+fareInfList.get(i).toString().substring(5,10)+"','dataIndex': '"+fareInfList.get(i).toString().substring(5,10)+"'},");
                }
            }
            //////////////////////////////////////////
            sb.append("{'header': '合计','dataIndex': 'total'},");
            sb.append("{'header': '余额','dataIndex': 'monthMoney'},");
            sb.append("{'header': '备注','dataIndex': 'remarks'}");
            sb.append("],");
            sb.append("'fieldsNames':[");
            sb.append("{name:'uid'},");
            sb.append("{name:'username'},");
            sb.append("{name:'remainfare'},");
            sb.append("{name:'shangjiao'},");
            /////////////////////////////////////////
            if(fareInfList.size()>0){
                for(int i=0;i<fareInfList.size();i++){
                    sb.append("{'name': '"+fareInfList.get(i).toString().substring(5,10)+"'},");
                }
            }
            ////////////////////////////////////////
            sb.append("{name:'total'},");
            sb.append("{name:'monthMoney'},");
            sb.append("{name:'remarks'}");
            sb.append("]}");
            response.getWriter().write(sb.toString());
        }

 

总结与一些问题：

　　总结：

　　　　我感觉这个是在所有动态生成表头中最简单的一种，应该还有更多的方法可以实现，只是由于技术和能力的问题，理解不太到位，希望各位网友能指导一下。谢谢。

　　问题：　　

　　　　Ajax异步传输的一些问题，不知能不能定义组件的时候能不能不要success方法里写，简单来说就是独立出来，我在解决的时候老是报出fields: fieldsNames中的fieldsNames为undefined,但是写到success的时候就不会。