ExtJS 5.1: Treepanel as navigation panel

Question

Im using ExtJS 5.1. I have a Viewport with a Ext.tree.Panel at west region and a simple Ext.panel.Panel at a center region. When you click one item of the treepanel i want to load some data inside Ext.panel.Panel at the center region but i don't know exactly how to do. Now i have an itemclick listener in Ext.tree.Panel who obtain the id of the clicked item. what more do i need to create something like this ExtJS 4 example ?

APP.JS code:

    var arbolFrameworks = Ext.create('Ext.tree.Panel', {
        title : 'Arbol Frameworks',
        width : 300,
        height : 600,
        style: 'padding: 3 3 3 3;',
        listeners : {
            itemclick : function (view, record, item, index, e) {
                alert(record.getId()); 
            }
        },
        root : {
            text : 'Componentes',
            expanded : true,
            children : [{
                    text : 'Grids',
                    expanded : true,
                    children :
                    [   {
                            id: 'grid_framework',
                            text : 'Grid de frameworks',
                            leaf : true
                        }, {
                            id: 'grid_personaje',
                            text : 'Grid de personajes',
                            leaf : true
                        }
                    ]
                },{
                    text : 'Árbol',
                    expanded : true,
                    children : [{
                            id: 'arbol_prueba',
                            text : 'Arbol de prueba',
                            leaf : true
                        }
                    ]
                },{
                    text : 'Gráficas',
                    expanded : true,
                    children : [{
                            id: 'grafica_1',
                            text : 'Básica',
                            leaf : true
                        },{
                            id: 'gráfica_2',
                            text : 'Pie',
                            leaf : true
                        }
                    ]
                }
            ]
        }
    });


    var contenido =  Ext.create('Ext.panel.Panel', {
        title: 'Prueba',
        style: 'padding: 3 3 3 3',
        html: 'prueba'
    })


// Panel
Ext.create('Ext.Viewport', {
    layout:'border',
    defaults: {
        collapsible: true,
    },
    items: [{
        title: 'Barra de navegacion',
        region:'west',
        width: 300,
        items:[arbolFrameworks]
    },{
        title: 'Contenido principal',
        collapsible: false,
        region:'center',
        items: [contenido]
    }] 
});

Greendrake Greendrake · Accepted Answer · 2015-06-25T15:30:03

what more do i need to create something like this ExtJS 4 example ?

In a nut shell, once you've got the id of the clicked item, you make an AJAX call to retrieve the relevant content and, in the callback, do contenido.update(contentFromServer).

Looking at the source code of the example, installing and playing with it locally will help a lot.

ExtJS 5.1: Treepanel as navigation panel

1 Answers