0

我想在 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 数据的列名的可扩展网格

4

1 回答 1

0

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

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

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

于 2017-04-03T05:36:29.617 回答