Question

我创建了动态标签，但无法从网址加载数据。

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

});

每当我点击按钮调用上述功能时，我都可以看到标签，但内容未加载。

任何人都可以帮助我错在哪里吗？

Answer 1

假设您使用的是最新版本的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或其他浮动组件

我认为您的代码无法正常工作的原因。你可以把它放在example windows of the ExtJS API

之一中自己剪断

的更新 的

我删除了一些部分并再次成功测试了此代码。只是一个猜测;你提供了一个无效的网址。尝试使用绝对路径作为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();

Answer 2

如果您在url中引用的HTML文件中使用任何javascripts代码，则必须使用脚本：在loader中进行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();

创建动态选项卡并从URL加载数据不起作用

2 个答案: