Question

我的ViewPort中有一个带有4个标签的TabPanel;是否可以保留标签本身（点击“按钮”），但删除/创建内容/ dom如果不可见？

我正在寻找像tab.removeContent（）和tab.createContent（）这样的东西，我猜......

我试过了：

activeitemchange: function(component, value, oldValue, eOpts) {
    Ext.Viewport.remove(oldValue, true);
}

似乎什么都不做......

这会删除所有内容：

activeitemchange: function(component, value, oldValue, eOpts) {
    Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);
}

我让删除部分正常工作：

oldValue.removeInnerAt(0);

但与此相反的是什么，即如何设置标签的内容？

var myContent = Ext.create('MyApp.view.MyView');
// and now?

Answer 1

Sencha高级论坛经理Mitchell Simoens对此进行了延期。它可以在他的github页面上找到：Optimized tab (git)

选项卡将被删除并缓存。

修改在您目前的情况下，您正在扩展Ux.tab.OptimizedTab，这是错误的。 lib只对Ext.tab.Panel的某些方法做了一些更改（lib也没有扩展Ext.tab.Panel。在Mitchell给出的例子中，你可以看到他正在扩展Ext.tab.Panel和在optimized-tab上设置defaultType。

Ext.define('MyApp.view.Main', { extend : 'Ext.tab.Panel', xtype : 'main', requires : [ 'Ext.TitleBar', 'Ext.Video', 'Ux.tab.OptimizedTab' ], config: { tabBarPosition : 'bottom', defaultType : 'optimized-tab', items : { ... } } }

请注意，您更改了lib classname，在我看来，这是一个缺乏尊重，最重要的是你给它一个错误的名称并将其放在错误的文件夹中。（您提供的名称是Crossfit.view.OptimizedTab，但它根本不是视图..）

我想对你的应用程序的良好架构给你一些赞美，我还没有看到很多人了解Sencha Touch架构。但你，米切尔和我是其中的一部分：）

Answer 2

我最初使用这个组件也遇到了问题，你要注意的关键是，如果你的tabpanel中有3个项目，每个项目都必须有xtype'optimized-tab'，在你的内部你有你的实际项目

例如：

items: [
        {
            xtype: 'optimized-tab',
            title: 'Tab 1',
            iconCls: 'info',
            baseCls: 'myBtn',
            cls: 'myBtn',
            html: 'Tab 1',
            items: [
                {
                    xtype: 'component',
                    baseCls: 'myBtn',
                    cls: 'myBtn',
                    ui: 'light'
                }
            ]
        },

要测试它是否真的有效，请将其粘贴到控制台中以查找DOM项目的数量：

document.getElementsByTagName("*").length

如果你的第一个标签是空的，你应该看到大约50个项目，如果你有一个地图你应该在200左右等。如果优化标签不起作用，你可能会在你的DOM中看到大约400个项目。

如果它正常工作，您可能会看到优化选项卡在动画完成之前过早删除项目。因此，您可以稍微修改它以删除项目。

您还可以参考此链接获取更多信息：http://www.sencha.com/forum/archive/index.php/t-207907.html?s=24386d2ced82d0625b8199247e0f5c64

： - ）

Sencha Touch 2.1：如何创建/销毁标签内容以提高性能？

2 个答案: