Extjsパネル内の単純なツリービュー

Question

私はExtJSが新しく、単純なレイアウトを実装しようとしています。私はこのようなメインビューを持っています：

Ext.define('TestApp.view.main.Main', {  
extend: 'Ext.container.Viewport', 
xtype: 'app-main', 
requires:[ 
    'Ext.tab.Panel', 
    'Ext.layout.container.Border', 
    'TestApp.view.main.MainController', 
    'TestApp.view.main.MainModel' 
], 


controller: 'main', 
viewModel: 'main', 


layout: 'border', 


items: [{ 
    region: 'north', 
    xtype: 'appHeader' 
}, { 
    region: 'center', 
    xtype: 'contentPanel', 
    reference: 'contentPanel', 
    ariaRole: 'main' 
}] 

}）;

そして、iは、左側のパネルを作成するContentPanelビューを有し、右

Ext.define('TestApp.view.ContentPanel', {  
extend: 'Ext.panel.Panel', 
xtype: 'contentPanel', 
requires: [ 
    'Ext.layout.container.Border', 
    'TestApp.view.tree.Regions' 
], 
//<example> 
exampleTitle: 'Border Layout', 
//</example> 
layout: 'border', 
width: 500, 
height: 400, 


bodyBorder: false, 


defaults: { 
    collapsible: true, 
    split: true, 
    bodyPadding: 10 
}, 


items: [ 
    { 
     title: 'Regions', 
     id: 'Regions', 
     region:'west', 
     floatable: false, 
     collapsible: false, 
     margin: '5 0 0 0', 
     width: 250, 
     html : '<p>Load treeview here</p>' 
    }, 
    { 
     title: 'Dashboard', 
     collapsible: false, 
     region: 'center', 
     margin: '5 0 0 0', 
     html: '<h2>Main Page</h2><p>This is where the main content would go</p>' 
    } 
] 

}に1つずつ）。

最後に、単純なtreeViewであるRegions.jsという別のビューを作成しました。私はこれを上記の左の列にロードしたい（id：Regions）

Ext.define('TestApp.view.tree.Regions', {  
extend: 'Ext.tree.Panel', 
xtype : 'region-tree', 
title: 'Simple Tree', 
width: 200, 
height: 150, 
store: 'personnel', 
rootVisible: false 

}）;

UPDATEは、ここで私は

を使用しています店です

Ext.define('TestApp.store.Personnel', { 
extend: 'Ext.data.Store', 

alias: 'store.personnel', 

fields: [ 
    'name', 'email', 'phone' 
], 

data: { items: [ 
    { name: 'Jean Luc', email: "jeanluc.picard@enterprise.com", phone: "555-111-1111" }, 
    { name: 'Worf',  email: "worf.moghsson@enterprise.com", phone: "555-222-2222" }, 
    { name: 'Deanna', email: "deanna.troi@enterprise.com", phone: "555-333-3333" }, 
    { name: 'Data',  email: "mr.data@enterprise.com",  phone: "555-444-4444" } 
]}, 

proxy: { 
    type: 'memory', 
    reader: { 
     type: 'json', 
     rootProperty: 'items' 
    } 
} 

}）;

私はこのツリービューをContentLayoutの左パネルにどのように読み込むことができるのか不明です。 noobの質問

Answer 1

のための任意のヘルプと申し訳ありませんのために

おかげであなたは西の地域内の項目として追加する必要があります。

{ 
     title: 'Regions', 
     id: 'Regions', 
     region:'west', 
     floatable: false, 
     collapsible: false, 
     margin: '5 0 0 0', 
     width: 250, 
     html : '<p>Load treeview here</p>', 
     items:[{ 
       xtype:'region-tree' 
     }] 
    }, 

Docs says:

items : Object/Object[]
A single item, or an array of child Components to be added to this container