Question

所以我做了一个简单的应用程序，有4个区域，北，东，南，西。我想在西部地区加载一个treepanel（静态）。我对westregion的代码如下：

........................
{
        region: 'west',
        title: 'Hierarchy',
        iconCls:'icon-map',
        width: 250,
        items: treepanel
}
........................

我的面板和商店是文档教程中的面板和商店，如下所示：

var store = Ext.create('Ext.data.TreeStore', {
root: {
    text: "/",
    expanded: true,
    children: [
        { text: "detention", leaf: true },
        { text: "homework", expanded: true, children: [
            { text: "book report", leaf: true },
            { text: "alegrbra", leaf: true}
        ] },
        { text: "buy lottery tickets", leaf: true }
    ]
}
});

var treepanel = Ext.create('Ext.tree.Panel', {
   title: 'Simple Tree',
   width: 200,
   height: 150,
   store: store,
   rootVisible: true,

});

唯一的问题是树视图没有显示..有人知道如何解决这个问题吗？

Answer 1

您可以自己将区域添加到树面板中：

var treepanel = Ext.create('Ext.tree.Panel', {
   region: 'west',
   title: 'Simple Tree',
   width: 200,
   height: 150,
   store: store,
   rootVisible: true,
});

然后在视口中添加树状图：

Ext.create('Ext.container.Viewport', {
    layout: 'border',
    renderTo: Ext.getBody(),
    items: [{
        region: 'north',
        ...
    }, treepanel, {
        region: 'south',
        ...
    }, {
        region: 'east',
        ...
    }, {
        region: 'center',
        ...
    }]
});

完整的工作示例：

<html lang="en">
<head>

    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    <script type="text/javascript" src="ext-all.js"></script>

</head>
<body>
<script>
Ext.onReady(function(){
    var store = Ext.create('Ext.data.TreeStore', {
    root: {
        text: "/",
        expanded: true,
        children: [
            { text: "detention", leaf: true },
            { text: "homework", expanded: true, children: [
                { text: "book report", leaf: true },
                { text: "alegrbra", leaf: true}
            ] },
            { text: "buy lottery tickets", leaf: true }
        ]
    }
    });

    var treepanel = Ext.create('Ext.tree.Panel', {
       title: 'Simple Tree',
       region: 'west',
       width: 200,
       height: 150,
       store: store,
       rootVisible: true,
       renderTo: Ext.getBody()

    });

    Ext.create('Ext.container.Viewport', {
        layout: 'border',
        renderTo: Ext.getBody(),
        items: [{
            region: 'north',
            title: 'North',
            html: 'North'
        }, treepanel, {
            region: 'south',
            title: 'South',
            html: 'South'
        }, {
            region: 'east',
            title: 'East',
            html: 'East'
        }, {
            region: 'center',
            title: 'Center',
            html: 'Center'
        }]
    });

});
</script>
</body>
</html>

ExtJS treepanel没有显示

1 个答案: