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

好吧...我有TES你的代码只需复制粘贴到我的萤火虫（当然与编辑的JSON ），
，我得到一个错误....这是因为程序流... 如果它是你的脚本，并把它们放在一个文件中，你指定一个网格之前店内

这里的代码工作对我来说没有任何错误...

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