在动态标签中的网格时不显示JSON数据？

问题描述

| 放置到选项卡时，我的网格不显示数据。当渲染到主体或div或作为视口的一部分时，此网格，存储，模型，JSON即可工作。仅当放置在选项卡中时才显示，这也是使用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\',title: \'IZBORNIK\',width: 200,layout: \'fit\',items:[
       myTree
         ]

    },{
     region: \'center\',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,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,items:[
        {
        region: \'north\',split:true,layout:\"fit\",height: 100,buttons: [{
            text: \'Load1\',handler:function(){

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

            }
            },{
            text: \'Load2\',url : \'app/kontaktGrid1.json\'
                });

            }
            }]              
        },{
        region: \"center\",xtype:\"grid\",id:\"kontaktGrid\",layout: \"fit\",store: myStore,columns: [
                {header: \'name\',dataIndex: \'name\',flex:1},{header: \'email\',dataIndex: \'email\',{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\"}]
        }

    ]
}

用于GRID的JSON

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

    

解决方法

好的...我已经将您的代码复制粘贴到我的萤火虫中了（当然，请编辑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\',title: \'IZBORNIK\',width: 200,layout: \'fit\',items: [myTree]

        },{
            region: \'center\',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,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,items: [{
        region: \'north\',layout: \"fit\",height: 100,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\",store: myStore,columns: [{
            header: \'name\',dataIndex: \'name\',flex: 1
        },{
            header: \'email\',dataIndex: \'email\',{
            header: \'phone\',dataIndex: \'phone\',flex: 1
        }]
    }]
});