javascript - 多级行扩展器网格
问题描述
我正在创建一个应该是多级的网格。因此,当我使用静态时,我能够得到它,这是在提琴手中工作的代码。
Ext.create('Ext.data.Store', {
storeId:'nestedStore1',
fields:['productid', 'productName', 'qty'],
data:{'items':[
{ 'productid': 'pr-1', "productName":"Orange", "qty":"5" },
{ 'productid': 'pr-2', "productName":"Apple", "qty":"6" },
{ 'productid': 'pr-3', "productName":"papaya", "qty":"3" },
{ 'productid': 'pr-4', "productName":"Mango", "qty":"9" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
Ext.create('Ext.data.Store', {
storeId:'orderstore',
fields:['orderid', 'amt', 'date'],
data:{'items':[
{ 'orderid': 'O12', "amt":"1000", "date":"29/05/2015" },
{ 'orderid': 'O121', "amt":"1200", "date":"29/05/2015" },
{ 'orderid': 'O122', "amt":"1100", "date":"29/05/2015" },
{ 'orderid': 'O123', "amt":"900", "date":"29/05/2015" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
Ext.define('EkaTRM.view.base.grid.ContractPanelGrid',{
extend:'Ext.grid.Panel',
alias:'widget.contractpanelgrid',
requires:['Ext.grid.Panel','EkaTRM.view.base.grid.RowExpanderGrid'],
title: 'Contract Application',
autoHeight: true,
store: Ext.data.StoreManager.lookup('orderstore'),
columns: [
{ text: 'Order Id', dataIndex: 'orderid' },
{ text: 'Amount', dataIndex: 'amt', flex: 1 },
{ text: 'Date', dataIndex: 'date' }
],
plugins:[{
ptype: 'rowexpandergrid',
gridConfig: [{
store: 'nestedStore1',
columns: [
{ text: "Product ID", dataIndex: 'productid' ,menuDisabled : false,resizable:true,editor:'textfield'},
{ text: "Product Name", dataIndex: 'productName' ,menuDisabled : true,resizable:false,editor:'textfield'},
{ text: "Qty", dataIndex: 'qty' ,menuDisabled : true,resizable:false,editor:'numberfield'}
],
columnLines: false,
border: true,
autoWidth: true,
autoHeight: true,
frame: false,
header: false,
plugins:[{
ptype: 'rowexpandergrid',
gridConfig: [{
store: 'nestedStore1',
columns: [
{ text: "Product ID", dataIndex: 'productid' ,menuDisabled : false,resizable:true,editor:'textfield'},
{ text: "Product Name", dataIndex: 'productName' ,menuDisabled : true,resizable:false,editor:'textfield'},
{ text: "Qty", dataIndex: 'qty' ,menuDisabled : true,resizable:false,editor:'numberfield'}
],
columnLines: false,
border: true,
autoWidth: true,
autoHeight: true,
frame: false,
header: false
}]
}]
}]
}]
});
现在我想让它动态化。所以我正在做的是我正在添加
plugins : [{
ptype : 'rowexpandergrid',
gridConfig: [{
columns:[]
}]
}],
在我的网格和展开时,我正在添加另一个网格。这是展开的代码。
init:function(nestedGrid){
var me = this;
this.callParent(arguments);
nestedGrid.getView().on('expandbody',me.addInnerGridOnExpand,me);
},
addInnerGridOnExpand : function (rowNode, record, expandRow, eOpts) {
var me=this;
if( Ext.fly(rowNode).down('.x-grid-view')){
return;
}
var parentGrid = this.getCmp();
me.recordsExpanded[record.internalId] = false;
var detailData = Ext.DomQuery.select("div.detailData", expandRow);
var innerGrid=Ext.create('Ext.grid.Panel',
me.gridConfig[0],
);
innerGrid.setColumns(parentGrid.Column);
innerGrid.getStore().loadData(SalesStore);
innerGrid.render(detailData[0]);
},
现在这在一个级别上工作得很好。现在我希望第二个网格也应该是可扩展的。我被困在这里。任何帮助如何在 extJS 中通过行扩展来制作多级网格。
这是我想要做的是在内部添加一个网格,但没有得到。
解决方案
使用RowWidget插件而不是 rowexpander。您为其提供一个widget
配置,该配置将成为展开的行主体。
Ext.create('Ext.data.Store', {
storeId: 'orderstore',
fields: ['orderid', 'amt', 'date'],
data:[
{ 'orderid': 'O12', "amt":"1000", "date":"29/05/2015" },
{ 'orderid': 'O121', "amt":"1200", "date":"29/05/2015" },
{ 'orderid': 'O122', "amt":"1100", "date":"29/05/2015" },
{ 'orderid': 'O123', "amt":"900", "date":"29/05/2015" }
]
});
Ext.define('EkaTRM.view.base.grid.ContractPanelGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.contractpanelgrid',
title: 'Contract Application',
minHeight: 100,
//maxHeight: 600,
autoHeight: true,
scrollable: true,
store: 'orderstore',
viewConfig: {
scrollable: true,
reserveScrollbar: true
},
columns: [
{ text: 'Order Id', dataIndex: 'orderid' },
{ text: 'Amount', dataIndex: 'amt', flex: 1 },
{ text: 'Date', dataIndex: 'date' }
],
plugins: [{
ptype: 'rowwidget',
widget: {
xtype: 'contractpanelgrid'
}
}]
});
Ext.application({
name: 'Fiddle',
launch: function () {
parent.grid = grid = Ext.create('EkaTRM.view.base.grid.ContractPanelGrid', {
height: innerHeight,
renderTo: Ext.getBody()
})
}
});
在Sencha Fiddle上查看它的实际效果。
设置嵌套网格的正确高度很繁琐。也许可以在事件侦听器中处理这个问题。
推荐阅读
- javascript - 一些 javascript 代码阻止表单提交
- javascript - 在 jQuery 或 JavaScript 中暂停函数
- spring - 使用 Spring Boot 获取实际用户详细信息
- python - 我写了一个大约 100 行的 Python 程序,它只是没有从某个点运行
- python - 为什么这个 ID 生成代码会产生 KeyError: -1
- flutter - 如何同时在多个按钮上设置属性?
- kdb - 在 kdb 中展开后,在列上应用 parted 属性而不丢失另一列上的排序属性
- angular - 材质组件不是已知元素,但它们由模块导出并导入
- apache-kafka - 如何连接融合云模式注册表?
- uwp - 如何让我的 UWP 应用区分两个相同的 USB 设备?