这个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:之前的能搜到的几个文章都参考了,就不一一列举了