extjs rowpander的使用

extpander的使用，一般extpander  tpl里设置的都是xtemplate,如果返回值类型比较一致，比较好，如果返回值分类不一致，可以通过rowexpander的expand方法来控制rowexpander打开时，所显示的值，本例子直接返回html代码

示例:

 

/* 数据读取器
    var logReader = new Ext.data.JsonReader({
                totalProperty : 'count',
                root : 'JsonObjs'
            }, [{
                        name : 'autoId'
                    }, {
                        name : 'currentOperation'
                    },{
                        name : 'startTime'
                    }, {
                        name : 'start_time_i'
                    },  {
                        name : 'end_time_i'
                    },{
                        name : 'attachment'
                    } ,{
                        name : 'duration'
                    } ,{
                        name : 'handleDept'
                    }, {
                        name : 'operator'
                    }, {
                        name : 'detail'
                    }, {
                        name : 'recId'
                    }]);

 

/*rowexpander 创建*/

var d = new Ext.grid.RowExpander({
        tpl:"<div id='ri_s' class='ri_s'></div>"     //里面定义一个div，不定义xtmplate 好放入html代码
    });

 

/*表格头定义*/

/* 表格列头定义 */
    var cm = new Ext.grid.ColumnModel([
           d,
            {
                header : '日志时间',
                dataIndex : 'startTime',// 日志时间
                align : 'center',
                width : 140
            }, {
                header : '当前操作',
                dataIndex : 'currentOperation',// 当前处理
                align : 'center',
                width : 100
            }, {
                header : '开始时间',
                dataIndex : 'start_time_i',// 处理部门
                align : 'left',
                width : 100
            }, {
                header : '结束时间',
                dataIndex : 'end_time_i',// 处理部门
                align : 'left',
                width : 100
            } ,{
                header : '处理部门',
                dataIndex : 'handleDept',// 处理部门
                align : 'left',
                width : 150
            }, {
                header : '操作人',
                dataIndex : 'operator',// 操作人
                align : 'left',
                width : 100,
                renderer : function(value, params, record) {
                    return (record.get('recId') == null || record.get('recId') == '')
                            ? value
                            : value
                                    + "  (<a href='#'><img src='../smallIcons/listen_black.gif' width='24' height='17' border='0'/></a>)";
                }
            }

]);              //此处detail（细节)没显示，让rowpander来显示

 

cm.defaultSortable = false;// 是否支持排序

 

/*rowpander expand方法定义，定义打开时，div里显示的东西

 d.on("expand",function(d,r,body,rowIndex){  //d为rowpander对象，r为单击是当前表格行,body为返回对象，可不用,rowIndex为当前表格是第几行
        var data = Ext.getCmp("grid").getStore().getAt(rowIndex).get("detail"); //通过表格的store获取当前表格行里detail属性的数据
        var h = document.getElementsByName("ri_s"); //获取rowpander里的div，控制div（返回的是一个div数组)
        var m = "暂无内容";  //detail没内容时显示
        if( data != "" && data != null){
            var f = eval('('+data+')');  //把{"name":1,"value":2}类型的字符串转化为json
            if(f.jt_operator){  //如果f中存在jt_operator属性，则显示该内容的样式,以下类此
                m = "<table><tr><td style='width:80px;height:20px'>类型:</td><td style='width:250px'>"+f.jt_type
                +"</td></tr><tr><td>金额:</td><td>"+f.jt_je
                +"</td></tr><tr><td>经办人:</td><td>"+f.jt_operator
                +"</td></tr><tr><td>操作时间:</td><td>"+f.jt_date
                +"</td></tr></table>";
            };
            if(f.sj_content){
                m = "<table><tr><td style='width:80px;height:20px'>处理结果:</td><td style='width:250px'>"+f.textarea_c
                +"</td></tr><tr><td>设计内容和要求:</td><td>"+f.sj_content
                +"</td></tr><tr><td>领导审核意见:</td><td>"+f.sj_sign
                +"</td></tr><tr><td>完成时间:</td><td>"+f.sj_time
                +"</td></tr><tr><td>预算金额:</td><td>"+f.sj_money
                +"</td></tr><tr><td>设计要求:</td><td>"+f.sj_combo
                +"</td></tr><tr><td>附件下载:</td><td>aa"
                +"</td></tr><tr><td>Excel下载:</td><td><a href=projectManage!projectPoi.action?data="+encodeURI(data)+">工商及开发配套客户施工图设计流转单.xls</a></td></tr></table>";
            };
        };               
        h[rowIndex].innerHTML = m; //设置跟rowIndex配套的div的显示
     });

 

/* 数据Store */
    var logStore = new Ext.data.Store({
                proxy : new Ext.data.HttpProxy({
                            url : 'projectManage!loadOrderActivities.action'
                        }),
                reader : logReader,
                sortInfo : {
                    field : 'autoId',
                    direction : "desc"
                } // 排序
            });

 

/*store load前参数导入*/

logStore.on('beforeload ', function() {
                Ext.apply(this.baseParams, {
                            orderId : Ext.getCmp('orderId').getValue()
                        });
            });

 

/*表格定义*/

var grid = new Ext.grid.GridPanel({
                store : logStore,
                cm : cm,
                id:"grid",
                loadMask : {
                    msg : label_grid.loadMsg
                }, // 加载时显示的等待信息
                stripeRows : true,
                viewConfig : {
                    forceFit : true,
                    autoScroll : true
                },
                plugins:[d],
                autoExpandColumn : "detail"

});