3

我创建了动态选项卡，但无法从 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();
    });

});

每当我单击仅调用上述函数的按钮时，我都可以看到选项卡，但未加载内容。

谁能帮忙我哪里错了？

4

2 回答 2

2

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

我看不出您的代码不应该工作的任何原因。您可以通过将其放置在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();
于 2012-09-20T07:39:42.453 回答
0

如果您在 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();
于 2012-12-18T10:58:37.070 回答