Ext4.1.1使用rowexpander

这个RowExpander到底在什么地方，找了半天，在extjs-4.1.1\examples\ux下，然后拷出来到程序目录下，在主页面中引入。
然后在主grid页面引用

Ext.require([ 
    'Ext.grid.*', // not needed with ext-all, -debug 
    'Ext.data.*', // not needed with ext-all, -debug 
    'Ext.ux.RowExpander'
]);

下面是主view页是交易列表每行交易表可能会展开好几行支付表

Ext.define('xxx.xxx.QuerySourceTransList',{
    extend:'Ext.grid.Panel',
    alias:'widget.querySourceTransList',
    store:'queryTrans.QuerySourceTrans',
    id:'querySourceTransList1',
    viewConfig:{  
        enableTextSelection:true    //可复制
    },

    plugins: [{ 
        ptype: 'rowexpander', 
        id:'rowexpander1',
        lazyRender : false, 
        enableCaching : false,
        rowBodyTpl : [ 
        '<div id="transPay{Id}">',    
        //仅仅使用Id作为 div的id值的话 好像是重复还是怎么回事 展开时一直提示找不到dom 
        //这个Id对应下面的dataIndex，即一个唯一值 用来取展开数据用
        '</div>' 
        ] 
        }], 
    collapsible: true,  
    animCollapse: false, 
    initComponent: function () {  
        var me = this;  
        this.callParent(arguments);  
    }  ,

    columns:[
            {header:'交易id',dataIndex:'Id',flex:3,sortable: true}, //20170920增加 支付交易的transId需要对应此值
            {header:'站点编号',dataIndex:'stationId',flex:3,sortable: true},
            {header:'枪号',dataIndex:'nozzleNum',flex:1,sortable: true},
...
    ],


});

展开view页是支付列表

Ext.define('xxx.xxx.QueryPayTransList',{
    extend:'Ext.grid.Panel',
    alias:'widget.queryPayTransList',
    store:'queryTrans.QueryPayTrans',
    id:'queryPayTransList1',
    viewConfig:{  
        enableTextSelection:true    //可复制
    },
    columns:[
            {header:'交易id',dataIndex:'transId',flex:3,sortable: true},
            {header:'站点编号',dataIndex:'stationId',flex:3,sortable: true},
            {header:'枪号',dataIndex:'nozzleNum',flex:1,sortable: true},
            ...
    ],
});

model省略 store省略 store使用的是ajax
以下是controller页
只在对应QuerySourceTransList的controller中实现代码

Ext.define('xxx.xxx.QuerySourceTrans', {
    extend: 'Ext.app.Controller',
    //将Viewport.js添加到控制器
    views: ['xxx.QuerySourceTransList','xxx.QueryPayTransList'],
    stores:['xxx.QuerySourceTrans','xxx.QueryPayTrans'],
    model:['xxx.QuerySourceTrans','xxx.QueryPayTrans'],
    getQuerySourceTransStore:function(){  //返回特定store
        return this.getStore('xxx.QuerySourceTrans');
    },
    getQueryPayTrans:function(){  //返回特定store
        return this.getStore('xxx.QueryPayTrans');
    },
    //通过init函数来监听视图事件，控制视图与控制器的交互
    init:function(){
        var store = this.getQuerySourceTransStore();//获取store 用来刷新   20170529应该是每次获取都是刷新
        var payTransStore = this.getQueryPayTrans();
        //init函数通过this.control来负责监听
        this.control({
            'querySourceTransList':{
                afterrender:function(feeGrid){
                    console.log('加载完成后会出现');
                    feeGrid.view.on('expandBody', function (rowNode, record, expandRow, eOpts) {
                        console.log('展开');
                        displayInnerGrid(record.get('Id'),'transPay'+record.get('Id'),this,payTransStore);  
                    });
                    feeGrid.view.on('collapsebody', function (rowNode, record, expandRow, eOpts) {
                        console.log('折叠');
                        destroyInnerGrid(record,this);
                    });
                },
            },

        });
    },

});

/**
 * 自定义展开函数  展开已定义好的列表
 */
function displayInnerGrid(Id,renderId,getThis,payTransStore){
//  //先销毁上一个div  再展开这个div  同时只展开一个   这个一直不能实现??? 好像已经销毁了 
//  if(defaultTransId!=0){
//      var desRecord = {
//              data:{
//                  id:'transPay'+defaultTransId
//              }
//      };
//      console.log(document.getElementById('transPay'+desRecord.data.Id)); //找不到这个 好像已经销毁了
////        destroyInnerGrid(desRecord,getThis);
//  }

      innerGrid = Ext.widget('queryPayTransList',{  //展开支付交易列表  并将参数赋予该列表
        title:'支付列表',
        columnLines: true,  
        autoWidth: true,  
        autoHeight: true,  
        frame: false,
        renderTo: renderId  
      }); 
      //在父列表加载时 其实 展开列表已经加载过了 只是没有显示出来  即store已经加载过一次   我们需要的是在展开时 在手动加载一次  因为每一行得到的数据是不一样的 
      //现在是需要在触发此函数时 再更新payTransStore
      defaultTransId = Id;  //这个defaultTransId 是一个全局变量
      payTransStore.load();  //payTransStore这个store会通过defaultTransId 从服务端取支付  console.log(document.getElementById('transPay'+defaultTransId));

    innerGrid.getEl().swallowEvent([  
                'mousedown', 'mouseup', 'click',  
                'contextmenu', 'mouseover', 'mouseout',  
                'dblclick', 'mousemove'  
            ]);  

}

/**
 * 自定义销毁函数  通过record.get('transNum') 作为组件ID销毁
 */
function destroyInnerGrid(record,getThis) {
    console.log('进入销毁函数');
    console.log(record);
    var parent = document.getElementById('transPay'+record.data.Id);   
    var child = parent.firstChild;  

    while (child) {  
        child.parentNode.removeChild(child);  
        child = child.nextSibling;  
    }  

}

结果
展开前

展开后
这里写图片描述
再展开一个

问题来了。。
打开了第二个，怎么把第一个折叠了？！
这是个问题！！！
我代码里也尝试去销毁上一个，但是上一个div其实已经不存在了。
我原来还以为会出现，只要展开过列表的同时显示后面那个更新过的store,但是并没有！！
以后再说吧，现在先这样。。
ps:之前的能搜到的几个文章都参考了，就不一一列举了

Ext4.1.1使用rowexpander

猜你喜欢