EXTJS6.0ストアデータからの列名を含む展開可能な行グリッド

Question

Extjs6.0の画像に示されているようにグリッドテーブルを作成したいのですが、静的な列名とグリッドデータをストアから取得していますが、ストアから列名をフェッチし、展開可能な行も必要です。どのようにそれにアプローチするかについてのご意見は感謝しています。

ストア：

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

これはdataindexがされるグリッドの例列である：カラム名を動的にするために

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

は、次の操作を行うことができますjsonで取得した各行のデータ。レンダラインサイド

、あなたは、コントローラやビュー内の関数を書くことができます。これは、uは必要なものは何でもあなたの列のテキストを設定したり、何でもあなたがJSONで取得します

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

。そしてrowexpandersについては、次のようにビューでグリッドの定義内で使用することができますグリッドのrowexpanderなどのプラグインがあります：

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

は、この情報がお役に立てば幸いです。ハッピーラーニング:)