CODEWITHSUNDEEP
extjs4
Mohammad Gavin Renaldi Ripharb
Mohammad Gavin Renaldi Ripharb

Reputation: 11

How To Put Tree Panel in Viewport in EXT JS 4

This My Code, but only the tree panel is displayed(please help me):

Ext.define('User', { extend: 'Ext.data.Model', fields: ['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: 'Page Title', autoHeight: true, border: false, width:100, height:100, margins: '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'         }]
}] }) })

Upvotes: 0

Views: 3849

Answers (2)

Mohammad Gavin Renaldi Ripharb
Mohammad Gavin Renaldi Ripharb

Reputation: 11

by this, i can insert treepanel to viewport

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

Upvotes: 0

Izhaki
Izhaki

Reputation: 23586

This is why:

renderTo: Ext.getBody(),

Just get rid of this line in the tree definition, and add it normally to the viewport. For example:

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

(You might have to add the renderTo to the viewport definition)

Upvotes: 0

Related Questions