外部URLをタブパネルに読み込む

Question

を別のタブパネルに表示したいホストされたWebページを読み込む簡単なアプリがあります。これを行う最もクリーンな方法は何ですか？ ユーザーが各タブをクリックするとタブが読み込まれる可能性があります。または、アプリの起動時にすべてが一度に読み込まれる可能性があります。 Sencha Touchには単にhtml：valueをURLにする方法はありません。各タブにページロードイベントを追加できますか？

[更新]

私は初期にAjaxの呼び出しを行うために提案を追加しました：メソッドを、テストのためにローカルのHTMLファイルを使用して。ただし、すべてのタブには完了する最初のAjax結果が表示されます。

このコードは現在完全に機能しています。私は忘れてしまった：this.callParent（引数）;

私はこの例をSenchaFiddleに置いています。最初の2つのタブは、ajax呼び出しが失敗するためロードされませんが、最後の2つのComponentQueryが機能します。

ここでは画面がどのように見えるべきかのアイデアです：

01 foo.htmlという

 
Ext.define('SenchaFiddle.view.MainView', { 
    extend: 'Ext.tab.Panel', 

    config: { 
     tabBarPosition:'bottom', 
     layout: { 
      type: 'card', 
      animation: { 
       duration: 300, 
       easing: 'ease-in-out', 
       type: 'slide', 
       direction: 'left' 
      } 
     }, 
     fullscreen: true, 

     items: [ 
      { 
       title: 'Top Stories', 
       iconCls: 'info', 
       xtype: 'panel', 
       items: [ 
        { 
         title: 'Top Stories', 
         xtype: 'toolbar', 
         docked: 'top' 
        }, 
        { 
         id: 'image-tab', 
         html: 'Loading top stories url...' 
        } 
       ] 
      }, 
      { 
       title: 'Entertainment', 
       iconCls: 'action', 
       items: [ 
        { 
         title: 'Entertainment', 
         xtype: 'toolbar', 
         docked: 'top' 
        }, 
        { 
         id: 'news-tab', 
         html: 'Loading entertainment url...' 
        } 
       ] 
      }, 
      { 
       id: 'tab3', 
       title: 'Sports', 
       iconCls: 'user' 
      }, 
      { 
       id: 'tab4', 
       title: 'Science', 
       iconCls: 'star' 
      } 
     ] 
    }, 
    initialize: function() { 
     console.log("View initialized"); 
     Ext.Ajax.request({ 
      url: 'bar.html', // you must have access to the server 
      method: 'GET', 
      callback: function(options, success, response) { 
       console.log(response.responseText); 
       Ext.ComponentQuery.query('#image-tab')[0].setHtml(response.responseText); 
      } 
     }); 

     Ext.Ajax.request({ 
      url: 'foo.html', // you must have access to the server 
      method: 'GET', 
      callback: function(options, success, response) { 
       console.log(response.responseText); 
       Ext.ComponentQuery.query('#news-tab')[0].setHtml(response.responseText); 
      } 
     }); 
     Ext.ComponentQuery.query('#tab3')[0].setHtml("boom"); 
     Ext.ComponentQuery.query('#tab4')[0].setHtml("bang"); 

     this.callParent(arguments); // Don't forget this! 
    } 
}); 

：

をここで基本的なビューがあります

内容でbar.html

 
<p style="color: #0f0;"> 
    bar 
</p> 

Answer 1

ビューにこれを追加してみてください（テストしていません）あなたがしている場合は

Header set Access-Control-Allow-Origin * 
Header set Access-Control-Allow-Headers x-requested-with 

をApacheの上でより多くのCORSの助けのために、このリソースをチェックアウトしません：http://enable-cors.org/

Answer 2

あなたが何か重いimagesたくさんのようなデータ、video's、audio'sなどをロードしている場合を除きときに、ユーザ、私はロードすなわち2つのアプローチの違いが表示されないそれらのタブをクリックするか、アプリケーションの起動時に一度に読み込みます。

これらのタブで読み込んでいるデータを確認し、それに応じて作業してください。

アプリケーションの起動時にデータをロードする場合は、initialize()メソッドを使用します。あなたの.htaccessファイル内urlForTopStoriesのためのサーバーへ

Ext.Ajax.request({ 
     url: 'http://www.urlForTopStories', // you must have access to the server 
     method: 'GET', 
     callback: function(options, success, response) { 
      Ext.ComponentQuery.query('#image-tab')[0].setHtml(response.responseText); 
     } 
    }); 

そして、この使用すると、1つ持っている場合：

Answer 3

シンプル：

ボタンを通常と同じようにタブを追加します... タブパネルの設定要素に次のように追加します。

listeners: { 
    activeitemchange: function(source, value, oldValue, eOpts) { 
     if(value.id == 'chiama') { 
          // do actions... 
      // for example open a link: 
          // document.location = 'www.google.it'; 

      source.setActiveItem(oldValue); //avoid tab switching 
      return false; // avoid tab switching 
     } 
    } 
}