[英]Sencha Touch 2.1: How to create/destroy tab content to increase performance?
我的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?
Sencha高级论坛经理Mitchell Simoens为此进行了扩展。 可以在他的github页面上找到:“ 优化”选项卡(git)
这些选项卡将被删除并缓存。
编辑:在当前情况下,您正在扩展Ux.tab.OptimizedTab
,这是错误的。 该库仅对Ext.tab.Panel
某些方法进行了一些更改(该库也没有扩展Ext.tab.Panel
。在Mitchell给出的示例中,您可以看到他正在扩展Ext.tab.Panel
和在Optimized 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类名,我认为这是一种缺乏尊重,并且最重要的是,您给它提供了错误的名称并将其放置在错误的文件夹中。 (您提供的名称是Crossfit.view.OptimizedTab
但它根本不是视图。)
我想对您的应用程序良好架构给予一些赞赏,我还没有看到很多了解Sencha Touch架构的人。 但是你,米切尔和我是其中的一些:)
我最初在使用此组件时也遇到了问题,您会注意到这里的关键是,如果您的标签面板中有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
:-)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.