如何在 EXT JS 4 的视口中放置树面板答案

【问题标题】：How To Put Tree Panel in Viewport in EXT JS 4如何在 EXT JS 4 的视口中放置树面板
【发布时间】：2012-02-28 14:11:48
【问题描述】：

此我的代码，但仅显示树面板（请帮助我）：

Ext.define('用户', { 扩展：'Ext.data.Model', 字段：['名称'] });

var tree = Ext.create('Ext.tree.Panel', {
    height: 300,
    renderTo: Ext.getBody(),
    width: 300,       region: 'east',
    columns: [
        {dataIndex: 'name', flex: 1, header: 'Tree Panel', xtype: 'treecolumn'}
    ],
    store: {
        model: 'User',
        root: {
            name: 'Rumah',
            children: [
                {name: 'Gavin Renaldi', children: [{name: 'Benar Sekali', age: 2, children: []}]},
                {name: 'Gavin Ripharbowo', children: []}
            ]
        }
    },
    viewConfig: {
        plugins: {
            ddGroup: 'user-dd',
            ptype: 'treeviewdragdrop'
        }
    }
});

Ext.onReady(function () {

Ext.create('Ext.container.Viewport', { 布局：'边框'，项目： [{ 地区：“北”， html: '页面标题', 自动高度：真，边框：假，宽度：100，高度：100，边距：'0 0 5 0'

}, {
    region: 'west',
    collapsible: false,
    html: '<h1 class="x-panel-header">Page Title</h1>',
    title: 'Navigation',
    width: 150,       height:100,         items:'tree'

    // could use a TreePanel or AccordionLayout for navigational items
}, {
    region: 'center',
    xtype: 'tabpanel', // TabPanel itself has no title
    activeTab: 0,      // First tab active by default
    items: [{
        title: 'First Tab',
        html: 'For A While',
    },{           title: 'Second Tab',            html : 'The Second Tab Content'         }]
}] }) })

【问题讨论】：

标签： extjs4

【解决方案1】：

这就是为什么：

renderTo: Ext.getBody(),

只需去掉树定义中的这一行，并将其正常添加到视口中。例如：

{
    region: 'center',
    xtype: 'tabpanel', // TabPanel itself has no title
    activeTab: 0,      // First tab active by default
    items: tree
}

（您可能必须将 renderTo 添加到视口定义中）

【讨论】：

感谢您的回答，但我已通过将树形面板插入视口解决了问题

【解决方案2】：

通过这个，我可以将树形面板插入视口

<html>
<head>
    <title> <Getting Started Example </title>
    <link rel ="stylesheet" type="text/css"
        href="resources/css/ext-all.css" />

    <script src="extjs/adapter/ext/ext-base.js"> </script>
    <script src="ext-all-debug.js"> </script>
    <script src="/src/tree/Panel.js"> </script>
    <script src="/src/windows/Window.js"> </script>
    <script src="/src/panel/Panel.js"> </script>
    <script type="text/javascript" src="reorder.js"></script>

  <script>
    Ext.define('User', {
        extend: 'Ext.data.Model',
        fields: ['name']
    });

    var tpanel = new Ext.create('Ext.tree.Panel', {
        height: 100,
        renderTo: Ext.getBody(),
        width: 200,
        region: 'west',
        columns: [
            {dataIndex: 'name', flex: 1, header: 'Tree Panel', xtype: 'treecolumn'}
        ],
        store: {
            model: 'User',
            root: {
                name: 'Rumah',
                children: [
                    {name: 'Gavin Renaldi', children: [{name: 'Benar Sekali', age: 2, children: []}]},
                    {name: 'Gavin Ripharbowo', children: []}
                ]
            }
        },
        viewConfig: {
            plugins: {
                ddGroup: 'user-dd',
                ptype: 'treeviewdragdrop'
            }
        }
    });
Ext.onReady(function () {

    Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [{
        region: 'north',
        html: '<h1 class="x-panel-header">Page Title</h1>',
        autoHeight: true,
        border: false,
        width:100,
        height:100,
        margins: '0 0 5 0'

    }, tpanel, {
        region: 'center',
        xtype: 'tabpanel', // TabPanel itself has no title
        activeTab: 0,      // First tab active by default
        items: [{
            title: 'First Tab',
            html: 'The first tab\'s content. Others may be added dynamically',
        },{
            title: 'Second Tab',
            html : 'Tab berfungsi untuk sdfkjdf'
        }]
    }]
});

})

</script>
</head>
<body>


</body>

【讨论】：