Estoy usando la diseño de navegador ejemplo para mi aplicación.

Estoy tratando de agregar unatree grid a eso. Definí una nueva clase, pero cuando llamo a mi cuadrícula de árbol puedo ver la cuadrícula pero no hay datos dentro.

Lo que intento hacer es definir la cuadrícula de árbol en un archivo separado. Mi archivo principal es ellayout-browser.js y necesito agregar esto (y otros) en las pestañas que tengo en él. ¿Qué podría estar haciendo mal?

aquí está mi código:

Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.tree.*'
]);

Ext.define('Task', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'task', type: 'string' },
        { name: 'user', type: 'string' },
        { name: 'duration', type: 'string' }
    ]
});

var store = Ext.create('Ext.data.TreeStore', {
    model: 'Task',
    proxy: {
        type: 'ajax',
        //the store will get the content from the .json file
        url: 'treegrid.json'
    },

    folderSort: true
});



var tree = new Ext.tree.Panel({
title: 'Core Team Projects',
store : store,

columns:[
{
    header: 'Task',
    dataIndex: 'task',
    width: 80
},{
    header: 'Duration',
    width: 80,
    dataIndex: 'duration',
    //align: 'center',
    //sortType: 'asFloat'

},{
    header: 'Assigned To',
    width: 80,
    dataIndex: 'user'
}] 
});


Ext.define("Ext.app.myTreeGrid", {
    extend: "Ext.panel.Panel",


width: 300,
height : 300,
items: [tree]

});

gracias por tu tiempo y ayuda