1

Extjsの初心者です。現在、いくつかのアプリケーションに Extjs 4.1.1a を使用しています。アプリケーションで次のタブパネルを定義しました。

    Ext.require('Ext.tab.*');

    Ext.onReady(function(){

    var tabs2 = Ext.widget('tabpanel', {

    activeTab: 0,
    width: 600,
    height: 250,
    plain: true,

    defaults :{
        autoScroll: true,
        bodyPadding: 10
    },
    items: [{

            title: 'Ajax Tab 1',
            loader: {
                url: 'dynamic.html',
                contentType: 'html',
                autoload: true,
                loadMask: true,
                scripts: true
            },
            listeners: {
                activate: function(tab) {
                    tab.loader.load();
                }
            }
        },{

            title: 'Ajax Tab 2',
            loader: {
                url: 'group_associator.html',
                contentType: 'html',
                autoload: true,
                loadMask: true,
                scripts: true
            },
            listeners: {
                activate: function(tab) {
                    tab.loader.load();
                }
            }

        },
        {

            title: 'Ajax Tab 3',
            loader: {
                url: 'group_disassociator.html',
                contentType: 'html',
                autoload: true,
                loadMask: true,
                scripts: true
            },
            listeners: {
                activate: function(tab) {
                    tab.loader.load();
                }
            }

        }
    ],
    renderTo : Ext.getBody()
 });
 });

ここでは、ローダー構成で 3 つの html ファイルを使用しました。最初のタブは完全に機能していますが、他の 2 つのタブ、つまり Ajax Tab 2、Ajax Tab 3 の場合、データを完全に表示しているのは 1 つだけです。私はactiveTab = 0にしたので、最初のタブはデフォルトでアクティブになります。ただし、2 番目のタブを選択すると正しく動作し、3 番目のタブを選択するとデータは表示されません。しかし、ページを更新した後、3 番目のタブを選択するとデータが正しく表示され、2 番目のタブを選択するとデータは表示されません。いずれの場合も、デフォルトのアクティブなタブ、つまり Ajax Tab 1 はデータを正しく表示します。そのため、すべての更新で完全に機能するタブは 1 つだけです。つまり、Ajax Tab 2 または Ajax Tab 3 のいずれかです。

以下は、tabpanel がレンダリングされる html ファイルです。

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Tabs Example</title>
    <!-- Ext includes -->
    <link rel="stylesheet" type="text/css" href="ext-4.1.1a/resources/css/ext-all.css"    />
    <script type="text/javascript" src="ext-4.1.1a/ext-all.js"></script>

    <!-- Shared example includes -->
    <link rel="stylesheet" type="text/css" href="ext- 4.1.1a/examples/shared/example.css" />

    <!-- Example includes -->
    <link rel="stylesheet" type="text/css" href="tabs.css" />

    <!-- GC -->

    <script type="text/javascript" src="tabs1.js"></script>
    </head>
    <body>

    <div id="tabs1">
    </div>   
    </body>
    </html>

選択時に 3 つのタブすべてにデータが完全に表示されるようにします。誰でも私を助けてください。:)

4

3 に答える 3

1

tabchange イベントを使用してみてください。それはうまくいくはずです。

元：

'tabchange': {
    fn: function(tab) {
        tab.loader.load();
    }
}
于 2012-12-18T18:19:11.477 に答える
1

私の間違いは、JavaScript ファイルのコンテンツをレンダリングするために使用されるすべての HTML ファイルで同じ div id を使用していたことです。私の問題を解決するために、div ID を一意にしました。

于 2012-12-19T05:16:40.903 に答える
0

上記のオプションが機能しなかった場合に備えて (私には機能しませんでした)..Tabpanel に「layoutOnTabChange:true」を追加してみましたが、内容が表示されました。

于 2015-12-22T10:11:15.970 に答える