Question

我正在使用ExtJS 5.1。我在西部地区有一个Ext.tree.Panel的视口，在中心区域有一个简单的Ext.panel.Panel。当您单击treepanel的一个项目时，我想在中心区域的Ext.panel.Panel内加载一些数据，但我不知道该怎么做。现在我在itemclick中有一个Ext.tree.Panel监听器，它获取所点击项目的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

我还需要创建类似ExtJS 4 example的内容吗？

在坚果外壳中，一旦你获得了被点击项目的id，就进行AJAX调用以检索相关内容，并在回调中执行contenido.update(contentFromServer)。< / p>

查看示例的源代码，在本地安装和播放它将有很大帮助。

ExtJS 5.1：Treepanel作为导航面板

1 个答案: