0

I want to build a grid table as shown in the image in Extjs6.0, i have built basic grid with static column names and grid data coming from store but want to fetch column names from store and also have expandable rows. Any suggestions on how to approach it would be grateful.

Store:

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

1 Answers1

0

For column names to be dynamic, you can do the following:

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

This is an example column of a grid where dataindex will be the data of each rows that you get in the json.

Inside renderer, you can write a function in controller or in view as:

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

This will set the text of your column whatever u need or whatever you get in json. And about the rowexpanders, there is a plugin as rowexpander for the grid that you can use as follows inside the grid definition in view:

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

Hope this helps. Happy Learning :)

Harshit Shah
  • 266
  • 2
  • 7
  • Can you also mention about the store i have kept my store above for reference.I am learning extjs6.0 for 10 days now can't get hang of it feel there is lack of proper documentation and open source help can you ping me in person so that i can get help from you in your free time email:nandeeshtank@gmail.com. –  Apr 03 '17 at 13:55
  • if you find the answer successful please give a up vote to the answer. And ya sure tell me what you want to know about store and other things? i'll ping you on your id too. – Harshit Shah Apr 03 '17 at 14:39
  • Did you find the answer useful? – Harshit Shah Apr 04 '17 at 04:29