Question

怎么在ext.grid.rowexpander里显示另一张表的数据

Answer 1

var AsyncRowExpander = Ext.extend(Ext.grid.RowExpander, {
requestFn : null,
onMouseDown : function(e, t) {
if(t.className == 'x-grid3-row-expander'){
e.stopEvent();
var row = e.getTarget('.x-grid3-row');
var viewRow = row;
if(typeof viewRow == 'number'){
viewRow = this.grid.view.getRow(viewRow);
}
var record = this.grid.store.getAt(viewRow.rowIndex);
//如果该行处于collapse状态，并且要扩展显式的数据尚未加载，则调用requestFn来加载数据
if (!this.state[record.id]) {
if (record.data == '' && record.data == '') {
var mk = new Ext.LoadMask(Ext.getBody(), {
msg: '正在读取数据，请稍候...',
removeMask: true
});
mk.show();
this.requestFn(record, this, function(expander) {
//展开该行
expander.toggleRow(row);
mk.hide();
}
);

return;
}
}

this.toggleRow(row);
}
}
});

var GetModifyDetail = function(record, expander, callback) {
Ext.Ajax.request({
url :ctx+'/hostInterfaceIO/list?hostInterID=',
/*
params : {
'objectkey' : record.data.modifyKey,
'fieldName' : record.data.fieldName,
'modifyDate': record.data.modifyDate
},
*/
success : function(response) {
//var obj = eval('(' + response.responseText + ')');
var obj = Ext.decode(response.responseText);
console.log("-----------------" + obj);
//设置模板中所需要的record数据，并展开该行
//record.data.oldValue = obj.oldValue;
//record.data.newValue = obj.newValue;
record.data.id = obj.id;
record.data = obj;
if (callback) {
callback(expander);//一定要回调该函数，否则不能展开
}
},
failure : function() {
if (callback) {
callback(expander);
}
}
});
}

// row expander
var expander = new AsyncRowExpander({
tpl : new Ext.XTemplate(
'<tpl for="">',
'<p><b><font color=blue>原始值:</font></b><br> {id}</p><br>',
'<p><b><font color=blue>变更值:</font></b><br> {id}</p>',
'</tpl>'
),
lazyRender: true,
requestFn: GetModifyDetail //注册回调函数
});

Ext.apply(this,{
gridConfig:{
plugins: expander, // 添加扩展插件
cm:new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
// 行扩展，显示接口的参数
expander,
{header: '交易类别',dataIndex:'type', renderer:dictRenderer },
{header: '交易码',dataIndex:'hostTradingCode'},
{header: '主机',dataIndex:'hostManager', renderer:function(v) { return v.text; }},
{header: '交易名称',dataIndex:'tradingName'},
{header: '服务名',dataIndex:'method'},
{header: '接口状态',dataIndex:'status', renderer:dictRenderer }
]),
storeMapping:[
'hostInterfaceId','type','hostTradingCode','hostManager','tradingName','method','status'
]
}, // end gridConfig

buttonConfig : [
this.addBt = new Ext.app.Button({
text:'新增', // 按钮文字
tooltip:'新增一条新记录', // 鼠标移上去提示的信息
iconCls:'add', // 按钮图标
enableOnEmpty : true, //
privilegeCode:this.funcCode+'_add',
scope:this,
handler:this.prepareAdd
}),

this.delBt = new Ext.app.Button({
text:'删除',
tooltip:'删除选中的已有记录',
iconCls:'remove',
privilegeCode:this.funcCode+'_del',
disabled : true,
scope:this,
handler:this.prepareDel
}),

this.editBt = new Ext.app.Button({
text:'修改',
tooltip:'修改选中的记录',
iconCls:'pencil',
privilegeCode:this.funcCode+'_edit',
scope:this,
disabled : true,
handler:this.edit
}),
{

其他代码省略……