Javascript 创建dymanic选项卡并从url加载数据无效

我已经创建了动态选项卡，但无法从url加载数据

Ext.onReady(function() {


    var tabs = new Ext.TabPanel({
        region:'center',
        activeTab:0,
        margins: '5 5 5 0',

        resizeTabs:true, 
        minTabWidth: 115,
        items:[{ 
            title: 'Dashboard',
            contentEl: 'simple-form',
            closable:true
        }]

    });

    var viewport = new Ext.Viewport({
        layout:'border', 
        defaults: {
            collapsible: false,
            split: true
        },
        items: [{    
            title:'PSL Admin',
            region: 'north',
            contentEl: 'north', 
            margins: '5 5 5 5',
            split:false 
        },{
            title:'Navigation',
            collapsible: true, 
            region:'west',
            contentEl: 'west', 
            margins: '5 0 5 5',
            cmargins: '5 5 5 5',
            width: 175,
            minSize: 100,
            maxSize: 250 
        },

        tabs 
        ]

    });

    function addTab(){
       tabs.add({
        title: 'Bar',
        closable: true,
        plain: true,
        loader: {
            autoLoad:true,
            url :'test.html'
        }

        });

    }

    Ext.get('add').on('click', function(){
        addTab();
    });

});

每当我点击按钮调用上述函数时，我都可以看到选项卡，但内容没有加载

谁能帮我一下我哪里错了

假设您使用的是最新版本的ExtJS 4.1

这是一个工作剪报：

var tabs = Ext.create('Ext.tab.Panel', {
    width: 400,
    height: 400,
    renderTo: document.body,
    items: [{
        title: 'Foo'
    }]
});

tabs.add({
    title: 'Bar',
    closable: true,
    plain: true,
    loader: {
        autoLoad:true,
        url :'http://docs.sencha.com/ext-js/4-1/source/ComponentLoader.html#Ext-ComponentLoader'
    }

});

请注意，不需要在选项卡上调用

show（）

。这适用于Windows或其他浮动组件

我看不出你的代码为什么不能工作。你可以把它放在一个盒子里，自己剪下来试试

更新

我删除了一些部分，并再次成功地测试了这段代码。只是猜测；您提供的url无效。尝试一个绝对路径作为url只是为了测试目的，看看它是否能做到这一点。对

var tabs = new Ext.TabPanel({
    region:'center',
    activeTab:0,
    margins: '5 5 5 0',
    renderTo: Ext.getBody(),
    resizeTabs:true, 
    minTabWidth: 115,
    items:[{ 
        title: 'Dashboard',
        //contentEl: 'simple-form',
        closable:true
    }]

});

var addTab = function(){
   tabs.add({
    title: 'Bar',
    closable: true,
    plain: true,
    loader: {
        autoLoad:true,
        url :'http://docs.sencha.com/ext-js/4-1/source/ComponentLoader.html#Ext-ComponentLoade'
    }

    });

}

addTab();

---

如果您在url中引用的HTML文件中使用任何javascripts代码，那么您必须在loader中使用scripts:true配置。我假设您使用的是extjs4.1及更高版本，以此来发布这个答案

我们的代码必须是这样的

    var tabs = new Ext.TabPanel({
    region:'center',
    activeTab:0,
    margins: '5 5 5 0',
    renderTo: Ext.getBody(),
    resizeTabs:true, 
    minTabWidth: 115,
    items:[{ 
      title: 'Dashboard',
     //contentEl: 'simple-form',
     closable:true
    }]

   });

   var addTab = function(){
   tabs.add({
    title: 'Bar',
   closable: true,
   plain: true,
   loader: {
    autoLoad:true,
      url :'http://docs.sencha.com/ext-js/4-1/source/ComponentLoader.html#Ext-   ComponentLoade',
      scripts: true,
    }

   });

  }

   addTab();

---

@user1584844正如我所写的，这是一个有效的示例。你将不得不提供更多的代码以获得进一步的帮助。但是我仍然没有得到你可以看看我的source@user1584844我想你的问题是

url

格式。尝试一个绝对url，看看它是否有效。我没有得到。。如果我直接给出html内容，它就可以正常工作。@user1584844我看不出有什么理由不能正常工作。我告诉过你要像我的例子中那样插入一个绝对url，而不是在浏览器中测试它或添加文件的内容。