Mi cuadrícula no muestra datos cuando se coloca en la pestaña. Esta cuadrícula, tienda, modelo, JSON funcionan cuando se procesan en body o div, o como parte de una ventana gráfica. Solo que no se muestra cuando se coloca en la pestaña, ¡eso también se crea usando JSON y Tree! Este es un (a veces) ejemplo de trabajo. No puedo entenderlo, tal vez error de alcance ... ¡Por favor ayuda!

Ext.Loader.setConfig({ enabled: true });
Ext.require(['*']);
Ext.require('app.kontakt');
Ext.require('app.ponude');
Ext.require('app.gridStore');
Ext.onReady(function() {


Ext.create('Ext.Viewport', {
    layout: {
        type: 'border',
        padding: 5
    },
    defaults: {
        split: true
    },
    items: [{
        region: 'north',
        collapsible: false,
        split: true,
        height: 60
    },{
        region: 'west',
        collapsible: false,
        title: 'IZBORNIK',
        split: true,
        width: 200,
        layout: 'fit',
        items:[
       myTree
         ]

    },{
     region: 'center',
        layout: 'fit',
        border: false,
        items: [{
            xtype:'tabpanel',
            id:'mainTabPanel'
        }]
    }]
  });
});

var store = Ext.create('Ext.data.TreeStore', {
proxy: {
        type: 'ajax',
        url: 'app/myTree.json',
        },
reader: {
            type: 'ajax',
            root: 'nodes',
            record: 'leaf'
        }

});     

 var myTree = Ext.create('Ext.tree.Panel', {
 store: store,
 rootVisible: false,   
border: false,
listeners:{
    itemclick: function(view,record,item,index,e){

        if(record.isLeaf() && record.raw.tabCls){

            var tabId=record.raw.tabId;
            var mainPanel = Ext.getCmp('mainTabPanel');
            var existingTab = Ext.getCmp(tabId);

            if(existingTab){

                mainPanel.setActiveTab(existingTab);

            }else{

                mainPanel.add(Ext.create(record.raw.tabCls,{id:tabId})).show(); 
            }
        }
    }
}
});

Ext.define("app.kontakt",{
extend:"Ext.panel.Panel",
name:"kontakt",
title:"Kontakt",
layout:"border",
closable:true,
border: false,
items:[
        {
        region: 'north',
        collapsible: false,
        split:true,
        layout:"fit",
        height: 100,
        border: false,
        buttons: [{
            text: 'Load1',
            handler:function(){

                myStore.load({
                        scope : this,
                        url : 'app/kontaktGrid.json'
                });

            }
            },{
            text: 'Load2',
            handler:function(){

                myStore.load({
                        scope : this,
                        url : 'app/kontaktGrid1.json'
                });

            }
            }]              
        },{
        region: "center",
        xtype:"grid",
        id:"kontaktGrid",
        layout: "fit",
        store: myStore,
        border: false,
        columns: [
                {header: 'name',  dataIndex: 'name',flex:1},
                {header: 'email', dataIndex: 'email', flex:1},
                {header: 'phone', dataIndex: 'phone', flex:1}
            ]  
        }           
    ]       
});

Ext.define('app.gridStore', {
extend: 'Ext.data.Model',
fields: [
    'name', 'email', 'phone'
]
});

var myStore =Ext.create('Ext.data.Store', {
model: 'app.gridStore',
proxy: {
    type: 'ajax',
    url : '',
    reader:{ 
        type:'json',
        root: 'items'
    }
},
autoLoad:false


});

JSON para TREE

{

    children: [
        { text:"KLIJENTI", expanded: true,
            children: [{ text:"Kontakt", leaf: true , tabId : "tab1", tabCls: "app.kontakt"}]
        }

    ]
}

JSON para GRID

{'items':[
    {"name":"Lisa", "email":"[email protected]", "phone":"555-111-1224"},
    {"name":"Bart", "email":"[email protected]", "phone":"555--222-1234"}
]}