JSON data not showing when grid in dynamic tab?

Question

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 ta

Answer 1

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