在动态标签中的网格时不显示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\',
        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\"}]
        }

    ]
}
用于GRID的JSON 
{\'items\':[
    {\"name\":\"Lisa\", \"email\":\"lisa@simpsons.com\", \"phone\":\"555-111-1224\"},
    {\"name\":\"Bart\", \"email\":\"bart@simpsons.com\", \"phone\":\"555--222-1234\"}
]}
    
2020-01-09 2 条评论
分享

没有找到相关结果

    已邀请:

    久坡

    好的...我已经将您的代码复制粘贴到我的萤火虫中了（当然，请编辑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
        }]
    }]
});
        
    2020-01-09 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    或代码 OrCode.com 备案号：粤ICP备15020848号-1
    Escape time: 0.039828062057495