Extjs4 如何在EXT JS 4中将树面板放置在视口中_Extjs4

Extjs4 如何在EXT JS 4中将树面板放置在视口中

extjs4

Extjs4 如何在EXT JS 4中将树面板放置在视口中,extjs4,Extjs4,这是我的代码，但仅显示树面板（请帮助我）： Ext.define（'用户'{ 扩展：“Ext.data.Model”，字段：['name'] }); Ext.onReady（函数（）{ Ext.create（'Ext.container.Viewport'{ 布局：“边框”，项目：[{ 地区：'北'， html:“页面标题”，自动高度：正确，边框：false，宽度：100，高度：100，边距：“0 0 5 0” }, { region: 'west', collapsi

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

Ext.define（'用户'{ 扩展：“Ext.data.Model”，字段：['name'] });

Ext.onReady（函数（）{

Ext.create（'Ext.container.Viewport'{ 布局：“边框”，项目：[{ 地区：'北'， html:“页面标题”，自动高度：正确，边框：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'         }]
}] }) })

}{
地区：'西部'，
可折叠：错误，
html:“页面标题”，
标题：“导航”，
宽度：150，高度：100，项目：“树”
//可以为导航项目使用树形面板或手风琴布局
}, {
地区：'中心'，
xtype:'tabpanel'，//tabpanel本身没有标题
activeTab:0，//默认情况下第一个选项卡处于活动状态
项目：[{
标题：“第一个选项卡”，
html:'暂时'，
}，{title:'Second Tab'，html:'Second Tab Content'}]
}] }) })

这就是为什么：

renderTo: Ext.getBody(),

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

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

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

通过此操作，我可以将树面板插入视口

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


谢谢您的回答，但我已通过将树面板插入视口解决了问题
<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>