Question

是Extjs的新手。目前我正在使用Extjs 4.1.1a进行某些应用。我在我的应用程序中定义了以下tabpanel。

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

这里我在loader config中使用了三个html文件。我的问题在于执行，第一个选项卡工作正常。但是在其他两个选项卡即Ajax Tab 2，Ajax Tab 3的情况下，只有一个显示数据完美。我已使activeTab = 0，因此默认情况下第一个选项卡将处于活动状态。但如果我选择第二个选项卡，它将正常工作然后如果我选择第三个选项卡它将不会显示任何数据。但是，刷新页面后，如果我选择第三个选项卡，它将正确显示数据，现在，如果我选择第二个选项卡，它将不会显示任何数据。在所有情况下，默认的活动选项卡，即Ajax选项卡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>

我希望所有三个标签在选择时完美地显示数据。任何人都可以帮我解决这个问题。：）

Answer 1

尝试使用tabchange事件。这应该有用。

例如：

'tabchange': {
    fn: function(tab) {
        tab.loader.load();
    }
}

Answer 2

我的错误是在用于呈现JavaScript文件内容的所有HTML文件中使用相同的div ID。为了解决我的问题，我使我的div独特。

Answer 3

以防上述选项不起作用（对我不起作用）..我尝试添加＆＃39; layoutOnTabChange：true＆＃39;到我的Tabpanel，我可以看到内容。

Extjs 4.1 tabpanel未显示数据

3 个答案: