Question

我必须在选项卡面板中开发一个包含少量选项卡的sencha页面。当我转到该页面时，它会加载所有选项卡的所有数据。但我需要避免为所有标签加载数据并在需要时加载标签数据（点击相应的标签后）。

Answer 1

如果你配置了所有正确的方法，那么这是由ExtJS开箱即用的。 deferredRender 可以解决问题。

默认情况下为True，将子项目的呈现推迟到浏览器   DOM，直到选项卡被激活。 False将所有包含的项目呈现为   渲染布局后立即生效。如果有大量的   将内容或大量重型控件渲染到面板中   默认情况下不显示，将此设置为true可能会改善   性能

deferredRender属性在内部传递给布局管理器   对于TabPanels（Ext.layout.container.Card）作为其   Ext.layout.container.Card.deferredRender配置值。

注意：将deferredRender保留为true表示内容中的内容   未激活的标签将无法使用

Defaults to: true

现在重要的是你只使用配置来定义你的组件（无论如何这是推荐的方式）这是一个例子：

{
    xtype : 'tabpanel',
    items: [
        {
            title: 'tab A'
        },
        {
            title: 'tab B'
        },
        {
            title: 'tab C'
        }
    ]
}

在每个标签呈现时，请参阅此工作 JSFiddle 。

请注意，这也会影响标签的所有子项。

Answer 2

您必须听取子面板show事件。然后，这取决于您的“数据”的性质。如果这是一些HTML，你将不得不进行一些AJAX调用以从服务器获取它并update面板的主体。如果您的数据绑定到某些商店，则必须将autoLoad设置为false，并在显示该标签时调用其load方法。

另外，不要忘记将事件侦听器的single选项设置为true，以便仅在第一次显示选项卡时加载内容。

Answer 3

我们需要更多信息，复制并粘贴“控制器标签页”中的代码：

也许，您正在加载“onRender”事件的数据。尝试在商店中添加“autoLoad：false”，然后在更改选项卡上加载：

<强>示例：

'name_container tabpanel' : {
    beforetabchange : this.function1,
    tabchange : this.function2          
},

单击sencha中的选项卡后加载页面数据

3 个答案: