ExtJS 5.1：Treepanel 作为导航面板答案

【问题标题】：ExtJS 5.1: Treepanel as navigation panelExtJS 5.1：Treepanel 作为导航面板
【发布时间】：2015-09-12 06:53:33
【问题描述】：

我正在使用 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]
    }] 
});

【问题讨论】：

标签： javascript extjs extjs5

【解决方案1】：

我还需要什么来创建类似ExtJS 4 example 的东西？

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

看例子的源码，在本地安装玩玩会有很大帮助。

【讨论】：