Question

这是我的代码，但只显示树面板（请帮帮我）：

Ext.define（'User'，{ extend：'Ext.data.Model'，字段：['name'] }）;

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：'页面标题'， autoHeight：是的， border：false，宽度：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'         }]
}] }) })

Answer 1

这就是原因：

renderTo: Ext.getBody(),

在树定义中删除此行，并将其正常添加到视口中。例如：

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

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

Answer 2

这样，我可以将treepanel插入到视口

<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>

如何将树面板放在EXT JS 4中的Viewport中

2 个答案: