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

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

我希望所有三个选项卡都能在选择时完美显示数据。谁能帮我解决这个问题。:)

4

3 回答 3

1

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

于 2012-12-19T05:16:40.903 回答
1

尝试使用 tabchange 事件。那应该行得通。

前任：

'tabchange': {
    fn: function(tab) {
        tab.loader.load();
    }
}
于 2012-12-18T18:19:11.477 回答
0

以防万一上述选项不起作用（对我不起作用）..我尝试将'layoutOnTabChange：true'添加到我的Tabpanel，我可以看到内容。

于 2015-12-22T10:11:15.970 回答