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 のサンプル ウィンドウの1 つに配置することで、これを切り取って自分で試すことができます。

アップデート

いくつかの部分を削除し、このコードが成功したことを再度テストしました。推測です。無効な 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();
于 2012-09-20T07:39:42.453 に答える
0

URL で参照している 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();
于 2012-12-18T10:58:37.070 に答える