JSON data not showing when grid in dynamic tab?

My grid isnt showing data when put to tab. This grid, store, model, JSON are working when renderd to body or div, or as a part of a viewport. Only not showing when put in tab, that is also created using JSON and Tree! This is a (sometimes)working example. I cant figure it out, maybe scope bug ... Please help!

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 for TREE

{

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

    ]
}

JSON for GRID

{'items':[
    {"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
    {"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"}
]}

ok... i have tes your code just by copy paste to my firebug (of course with edit the json urls),
and i got an error.... This is because the program flow... if it was your script, and put them in a single file, you specify a grid before the store

here code works for me no error...

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: '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.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
});

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: 'grid.json'
                });
            }
        }, {
            text: 'Load2',
            handler: function () {

                myStore.load({
                    scope: this,
                    url: 'grid1.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
        }]
    }]
});