extjs - 在sencha中点击tab后加载页面数据

Question

我必须在标签面板中开发一个带有几个标签的煎茶页面。当我转到该页面时，它会加载所有选项卡的所有数据。但是我需要避免为所有选项卡加载数据，并在需要时加载选项卡数据（在单击适当的选项卡后）。

Answer 1

好吧，如果您以正确的方式配置，ExtJS 开箱即用。deferredRender在这里起到了作用。

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

deferredRender 属性作为其 Ext.layout.container.Card.deferredRender 配置值在内部传递给 TabPanels (Ext.layout.container.Card) 的布局管理器。

注意：将 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          
},