面板内的 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'
}]

});

然后，我有一个 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>'
    }
]

});

最后，我创建了另一个名为 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

});

更新，这是我正在使用的商店

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 的左侧面板中。

感谢您的帮助，对于菜鸟问题​​感到抱歉

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

文档说：

items : Object/Object[]
单个项目，或要添加到的子组件数组这个容器