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

ubuntuvim 发布于 2015/04/09 09:46
阅读 949
收藏 0

我使用的是Extjs 3.3.1 版本,我怎么在ext.grid.rowexpander行扩展里显示跟grid里显示的不是一张表的数据?网上找了好多方法都不行,求助各位大神。

想要实现的功能是在位置 1 显示另一张表的数据,而不是跟位置 2 的数据是同一张表的数据,下面是我的代码


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
}),
{

其他代码省略……



加载中
返回顶部
顶部