2

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

[アップデート]

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

このコードは完全に機能するようになりました。忘れていました: this.callParent(arguments);

最初の 2 つのタブは、 ajax 呼び出しが失敗するため読み込まれませんが、最後の 2 つの ComponentQuery は機能します。


画面がどのように見えるべきかについてのアイデアは次のとおりです。

ここに画像の説明を入力

ここに画像の説明を入力

基本的なビューは次のとおりです。

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

    構成: {
        tabBarPosition:'下',
        レイアウト： {
            タイプ: 'カード',
            アニメーション: {
                持続時間: 300,
                イージング: 'イーズインアウト',
                タイプ: 'スライド',
                方向: 「左」
            }
        }、
        フルスクリーン: 真、

        項目: [
            {
                タイトル: 'トップ ストーリー',
                iconCls: '情報',
                xtype: 'パネル',
                項目: [
                    {
                        タイトル: 'トップ ストーリー',
                        xtype: 'ツールバー',
                        ドッキング：「トップ」
                    }、
                    {
                        id: '画像タブ',
                        html: 'トップ ストーリーの URL を読み込んでいます...'
                    }
                ]
            }、
            {
                タイトル: 'エンターテイメント',
                iconCls: 'アクション',
                項目: [
                    {
                        タイトル: 'エンターテイメント',
                        xtype: 'ツールバー',
                        ドッキング：「トップ」
                    }、
                    {
                        id: 'ニュースタブ',
                        html: 'エンターテイメントの URL を読み込んでいます...'
                    }
                ]
            }、
            {
                id: 'tab3',
                タイトル: 'スポーツ',
                iconCls: 'ユーザー'
            }、
            {
                id: 'tab4',
                タイトル: '科学',
                iconCls: 'スター'
            }
        ]
    }、
    初期化: 関数() {
        console.log("ビューが初期化されました");
        Ext.Ajax.request({
            url: 'bar.html', // サーバーにアクセスできる必要があります
            メソッド: 'GET',
            コールバック: 関数 (オプション、成功、応答) {
                console.log(response.responseText);
                Ext.ComponentQuery.query('#image-tab')[0].setHtml(response.responseText);
            }
        });

        Ext.Ajax.request({
            url: 'foo.html', // サーバーにアクセスできる必要があります
            メソッド: 'GET',
            コールバック: 関数 (オプション、成功、応答) {
                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(引数); // これを忘れないでください!
    }
});

foo.html

<p style="color: #00f;">
    ふー
</p>

bar.html

<p style="color: #0f0;">
    バー
</p>
4

3 に答える 3

2

これをビューに追加してみてください（テストされていません）：

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

urlForTopStories.htaccess ファイルがある場合は、これをサーバーに送信します。

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

Apache を使用していない場合は、このCORSリソースで詳細を確認してください。

于 2012-05-10T15:34:10.063 に答える
0

大量の、などの重いデータをロードしていない限り、ユーザーがそれらのタブをクリックしたときにロードするか、アプリケーションの起動時に一度にロードするという 2 つのアプローチに違いはありません。imagesvideo'saudio's

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

アプリケーションの起動時にデータをロードする場合は、initialize()メソッドを使用します。

于 2012-05-10T14:21:56.667 に答える