在动态选项卡中网格时 JSON 数据未显示？

Question

我的网格在放入选项卡时不显示数据。该网格、存储、模型、JSON 在渲染到 body 或 div 或作为视口的一部分时起作用。只是放入选项卡时不显示，这也是使用 JSON 和 Tree 创建的！这是一个（有时）有效的示例。我不明白，也许范围错误......请帮助！

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

{

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

    ]
}

用于网格的 JSON

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

Answer 1

好的...我只需将您的代码复制粘贴到我的 firebug 即可（当然可以编辑 json url），
我收到一个错误...这是因为程序流程...
如果这是您的脚本，并将它们放在一个文件中，您可以

在此处存储代码对我起作用之前指定一个网格，没有错误...

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