Question

我正在使用extjs4并且我正在尝试创建一个选项卡面板，每个选项卡都有一个不同的网格，用于从商店加载数据。（每个网格不同的商店）我想仅在用户单击相应选项卡时加载特定商店。我看不出如何抓住用户点击面板。

我怎么能这样做？

Answer 1

我遇到类似的性能加载问题，但未能使用deferredRender解决问题。您必须在激活选项卡时为要加载的选项卡添加事件activate：

{
        title: 'tab2',
        bodyPadding: 10,
        html : 'A simple tab',
        listeners: {
                'activate' : function(){ 
                    store2.load(); 
                },
        }

}

即使这是一个临时解决方案，也能为我工作。 Extjs 4.1应该改善加载/渲染性能。我们会看到。

Answer 2

Ext.TabPanel 有配置选项 deferredRender 。可能对你有帮助。
文档：
默认情况下为true，将子项的呈现推迟到浏览器DOM，直到激活制表符。 false将在呈现布局后立即呈现所有包含的项目。如果在默认情况下未显示的面板中显示大量内容或大量重型控件，则将其设置为true可能会提高性能。

更新：另请参阅 Ext.data.JsonStore 中的 autoLoad 配置选项，它应该为false。

Answer 3

您可以通过在标签处理程序中放置setActiveItem()来激活面板。

Answer 4

好的，我想通了，我只需要deferredRender = true并在每个标签上的beforerender事件中添加相应的store.load（）：

    var lowerTabPanel = Ext.create('Ext.tab.Panel', {
        deferredRender: true,
        items: [
            {
            title: 'tab1',
            bodyPadding: 10,
            html : 'A simple tab',
            listeners: {
                    'beforerender' : function(){ 
                        store1.load(); 
                    },
            }

           },
            {
            title: 'tab2',
            bodyPadding: 10,
            html : 'A simple tab',
            listeners: {
                    'beforerender' : function(){ 
                        store2.load(); 
                    },
            }

           },
        ]
    });

在extjs4中创建一个选项卡面板，其中选择了仅在特定选项卡上加载的不同存储

4 个答案: