Javascript ExtJS 5.1:Treepanel作为导航面板

我正在使用ExtJS5.1。 我有一个视口，在西部区域有一个

Ext.tree.Panel

，在中部区域有一个简单的

Ext.Panel.Panel

。当您单击树面板的一项时，我想在中心区域的

Ext.panel.panel

中加载一些数据，但我不知道具体怎么做。 现在我在

Ext.tree.Panel

中有了一个

itemclick

监听器，它获取单击的项目的id。我还需要做什么来创建这样的东西

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

我还需要做什么来创建这样的东西

在一个简单的例子中，一旦获得了所单击项目的

id

，就可以进行AJAX调用来检索相关内容，并在回调中执行

contenido.update（contentFromServer）

看看这个例子的源代码，在本地安装和使用它会有很大帮助