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"
});