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的视图，它是一个简单的treeView。我想将其加载到上面的左栏（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的左侧面板中。

感谢您提供任何帮助，并对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'
        }]
    },

文档说：

项目：对象/对象[]
单个项目或要添加到此容器的子组件数组

Extjs面板内的简单树视图

1 个答案: