Как поместить панель дерева в окне просмотра в EXT JS 4 - PullRequest
Новая
       4

Как поместить панель дерева в окне просмотра в EXT JS 4

0 голосов
/ 07 февраля 2012

Это мой код, но отображается только древовидная панель (пожалуйста, помогите мне):

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', {layout: 'border',items: [{region: 'north', html: 'Title Page', autoHeight: true, border: false, width: 100, height: 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'         }]
}] }) })

Ответы [ 2 ]

0 голосов
/ 08 февраля 2012

этим я могу вставить древовидную панель в окно просмотра 

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

0 голосов
/ 07 февраля 2012

Вот почему: 

renderTo: Ext.getBody(),

Просто избавьтесь от этой строки в определении дерева и добавьте ее обычно в область просмотра. Например: 

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

(Возможно, вам придется добавить renderTo в определение области просмотра)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...