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

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

您必须侦听子面板事件。然后，这取决于“数据”的性质。如果这是一些HTML，那么您必须进行一些AJAX调用，才能从服务器和面板主体获取它。如果数据绑定到某些存储，则必须将

autoLoad

设置为false，并在显示选项卡时调用其

load

方法

---

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

我们需要更多信息，请从“控制器选项卡页面”复制并粘贴代码：

也许，您正在“onRender”事件上加载数据。尝试将“自动加载：错误”放在存储上，并在更改选项卡上加载：

示例：

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

---

如果您以正确的方式进行配置，那么这是由ExtJS直接完成的。在这里起作用

默认情况下为True，以将子项的呈现延迟到浏览器 直到选项卡被激活。False将把所有包含的项呈现为 一旦布局被渲染。如果有大量的 内容或大量重控件被渲染到 默认情况下不显示，将其设置为true可能会提高性能 表演

deferredRender属性在内部传递给布局管理器 用于选项卡面板（Ext.layout.container.Card）作为其 Ext.layout.container.Card.deferredRender配置值

注意：将deferredRender保留为true意味着 未激活的选项卡将不可用

默认为：true

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

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

在渲染每个选项卡时，请参见此工作

请注意，这也会影响选项卡的所有子项

---

这只影响渲染，不影响加载，是吗？@rixo这是什么意思？如果我没弄错的话，我想你说的更多的是设计问题，因为大多数框架用户使用了错误的方法。但不要误会我，这并不意味着你的答案是错误的，也不意味着你的方法是错误的；每个人都应该自己决定何时加载数据。虽然渲染总是发生，因此渲染事件总是被调用，但对于show事件来说这不是真的，因为show不是一直被调用的（这是绝对好的），因此渲染事件是最好的。我不明白您建议使用

afterrender

事件来触发加载。我相信您的回答是

delferredrender

设置为true将延迟OP所称的“加载”

show

事件将始终使用卡布局触发，但您是对的，它几乎是唯一一个这样的布局。@rixo不，您是对的，我没有，我也不打算这样做，因为我对该选项卡面板中的组件一无所知。而OP并没有明确说明这一点。您已经提到使用事件，所以我认为没有理由重复。但是大多数人都会因为使用实例而不是配置而出现设计错误，所以我的主要目标就是指向这个主题。与此同时出现的还有现有属性deferredRender。是的，我建议对大多数加载操作使用渲染器事件。但正如你在这里看到的，所有这些都需要大量的解释，我打算保持简短；9