ExtJS 5.1：树面板作为导航面板

Question

我正在使用 ExtJS 5.1。我有一个视口，在西部区域有一个 Ext.tree.Panel，在中心区域有一个简单的 Ext.panel.Panel。当您单击树面板的一项时，我想在中心区域的 Ext.panel.Panel 内加载一些数据，但我不知道该怎么做。现在我在 Ext.tree.Panel 中有一个 itemclick 侦听器，它获取被单击项目的 ID。我还需要什么才能创建这样的东西 ExtJS 4 example？

APP.JS代码：

    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]
    }] 
});

Answer 1

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

简而言之 shell，一旦您获得了所点击项目的 id，您就可以调用 AJAX 来检索相关内容，并在回调中，做 contenido.update(contentFromServer).

查看示例源代码，在本地安装和使用它会有很大帮助。

ExtJS 5.1：树面板作为导航面板

ExtJS 5.1: Treepanel as navigation panel

javascript

extjs

extjs5