EXTJS6.0 使用来自存储数据的列名称构建可展开的行网格

Question

我想构建一个网格表，如 Extjs6.0 中的图像所示，我已经使用静态列名和来自存储的网格数据构建了基本网格，但想从存储中获取列名，并且还具有可扩展的行。任何关于如何处理它的建议将不胜感激。

商店：

Ext.define('Xmlgrid.store.Books', {
extend: 'Ext.data.Store',
alias: 'store.books',
requires: [
'Ext.data.reader.Xml'
],
fiels:['-skillID','name','shortName','description','inspectionSkillInd','passdownInd'
],
data:{
skill: [
{
"-skillId": "skill1",
"name": "B2",
"shortName": "00",
"description": "B2",
"inspectionSkillInd": "false",
"passdownInd": "true"
},
{
"-skillId": "skill2",
"name": "B1",
"shortName": "01",
"description": "B1",
"inspectionSkillInd": "false",
"passdownInd": "true"
},
{
"-skillId": "skill3",
"name": "AIMS",
"shortName": "02",
"description": "AIMS",
"inspectionSkillInd": "false",
"passdownInd": "true"
},
{
"-skillId": "skill4",
"name": "CAT A",
"shortName": "03",
"description": "CAT A",
"inspectionSkillInd": "false",
"passdownInd": "true"
},
{
"-skillId": "skill8",
"name": "RADIO",
"shortName": "07",
"description": "RADIO",
"inspectionSkillInd": "false",
"passdownInd": "true"
},
{
"-skillId": "skill9",
"name": "8",
"shortName": "08",
"description": "TOOL AND DIE",
"inspectionSkillInd": "false",
"passdownInd": "true"
},
{
"-skillId": "skill10",
"name": "9",
"shortName": "09",
"description": "COMPOSITE REPAIR",
"inspectionSkillInd": "false",
"passdownInd": "true"
},
{
"-skillId": "skill11",
"name": "10",
"shortName": "10",
"description": "SHOP SUPPORT",
"inspectionSkillInd": "false",
"passdownInd": "true"
},
{
"-skillId": "8a8a8a612b49030f012b4b1e08060010",
"name": "MECH",
"shortName": "20",
"description": "Mechanic",
"inspectionSkillInd": "false",
"passdownInd": "true"
}
],
},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'skill'
}
}


});

具有来自存储 JSON 数据的列名称的可扩展新娘

Answer 1

要使列名是动态的，可以执行以下操作：

{
text: '',
dataIndex: 'revisedPremiumText',
renderer: 'premiumRenderer',
flex: 1
}

这是网格的示例列，其中 dataindex 将是您在 json 中获取的每一行的数据。

在渲染器内部，您可以在控制器或视图中编写函数，如下所示：

premiumRenderer: function (value, row, record) {
row.column.setText("abc");
}

这将设置列的文本，无论您需要什么，或者你在 json 中获得的任何内容。关于行扩展器，有一个插件作为网格的行扩展器，您可以在视图中的网格定义中按如下方式使用它：

plugins: [
{
ptype: 'rowexpander',
expandOnDblClick: false,
selectRowOnExpand: true,
onKeyDown: Ext.emptyFn,
rowBodyTpl: new Ext.XTemplate(
)
}
],

希望这有帮助。快乐学习:)