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'
    }
}




});

Expandable gride with column names from store JSON data

Answer 1

要使列名称成为动态，您可以执行以下操作：

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

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

在渲染器内部，您可以在控制器或视图中编写一个函数：

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

这将设置列的文本，无论你需要什么，或者你在json中得到什么。关于rowexpanders，有一个插件作为网格的rowexpander，您可以在视图中的网格定义中使用如下：

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

希望这会有所帮助。快乐学习：）

EXTJS6.0构建可扩展的行网格，其列名来自商店数据

1 个答案: