2012-09-20 32 views
3

我已經創建了動態選項卡,但無法從url加載數據。創建dymanic選項卡並從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(); 
    }); 

}); 

每當我點擊按鈕只是調用上述功能,我可以看到選項卡,但內容不加載。

任何人都可以幫助我在哪裏錯了嗎?

回答

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或其他浮動組件

我看不到任何理由爲什麼你的代碼不應該工作。您可以通過將其放置在example windows of the ExtJS API

更新

之一,我刪除了部分零件,並再次測試此代碼成功嘗試這種自行剪斷。只是一個猜測;你提供了一個無效的網址。嘗試一個絕對路徑作爲網址只是爲了測試目的,看看它是否有效。辦法。

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(); 
+0

@ user1584844正如我寫的,這是一個工作的例子。你將不得不提供更多的代碼來獲得進一步的幫助。 – sra

+0

仍然我沒有得到你可以看看我的來源 – user1584844

+0

@ user1584844我想你的問題是'url'格式。嘗試一個絕對的網址,看看它是否有效。 – sra

0

如果你正在使用你的網址是闖民宅是HTML文件的任何的JavaScript代碼,那麼你必須使用腳本:在裝載機真實配置。通過假設您使用的是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(); 
相關問題