煎茶触控显示卡答案

【问题标题】：display card with sencha touch煎茶触控显示卡
【发布时间】：2011-05-02 16:48:28
【问题描述】：

我是 sencha touch 的新手，看过所有的视频播客，但仍然不明白如何从标签栏“显示”面板（顶部的栏！）以及如何在没有任何幻灯片或其他东西的情况下从一个面板切换到另一个面板（请显示出来！）

还有更多的事情要做，比如拥有一个预加载器并从 JSON 中获取数据，然后显示嵌套列表。但是现在我被困在这个简单的场景中......

这是我目前所拥有的......

这是 index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Sencha 3</title>
<script type="text/javascript" src="lib/touch/sencha-touch.js"></script>
<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="phonegap.js"></script>
<script src="app/app.js" type="text/javascript"></script>
<script src="app/views/startcard.js" type="text/javascript"></script>
<script src="app/views/secondcard.js" type="text/javascript"></script>
<script src="app/views/plain.js" type="text/javascript"></script>
<script src="app/views/Viewport.js" type="text/javascript"></script>
</head><body></body>

app.js

Testdemo = new Ext.Application({
name: "TestDemo",
launch: function() {                                            
    this.views.viewport = new this.views.Viewport();
    this.views.homecard = this.views.viewport.getComponent('startcard');
}
});

Viewport.js

TestDemo.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
initComponent: function() {
    Ext.apply(this, {
       tabBar: {
            dock: 'bottom',
            layout: {
                pack: 'center'
            }
        },
        items: [
            { xtype: 'startcard'},
            { xtype: 'secondcard'},
        ]
    });
    TestDemo.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});

startcard.js

myPrefs = function() {
    //here is the problem! How can I display the panel myPrefs??
    this.StartCard.setActiveItem('myPrefs', {type:'slide', direction:'down'});
}

refreshHome = function() {
alert("Refresh me!");
}

var somelist = new Ext.Component({
title: 'testline 1',
cls: 'info',
html: 'This is plain Text.<br />Some JSON-Data should be listed here...'

})


TestDemo.views.StartCard = Ext.extend(Ext.Panel, {
title: "TestDemo",
iconCls: "home",
styleHtmlContent: true,
scroll: 'vertical',
initComponent: function() {
Ext.apply(this, {
    dockedItems: [
        {
        xtype: 'toolbar',
        dock: 'top',
        title: 'Some Test App',
        items: [
                {
                    iconMask: true,
                    ui: 'plain',
                    iconCls: 'settings',
                    itemId: 'btnHomeMore',
                    title: 'Do I need a title???',
                    handler: myPrefs
                    },
                    {
                        xtype: 'spacer'
                    },
                    {
                        iconMask: true,
                        ui: 'plain',
                        iconCls: 'refresh',
                        itemId: 'btnRefreshMe',
                        title: 'Refresh, i guess',
                        handler: refreshHome
                    }
                ]
        }
        ],
    items: [
            {
                itemId: 'MyStartPage',
                html: 'This is just a test'
            }
            ]
    });
TestDemo.views.StartCard.superclass.initComponent.apply(this, arguments);
}
});

Ext.reg('startcard', TestDemo.views.StartCard);

【问题讨论】：

标签： sencha-touch viewport

【解决方案1】：

好的，从您的描述中不清楚问题是什么，所以我会尽力帮助您解决所有问题。

使用 TabBar，您可以通过使其成为活动面板来“显示”面板。默认显示第一项。

在 ViewPort.js 中，您需要向项目添加属性“文本”，以便选项卡具有正确的文本。

Ext.apply(this, {
   tabBar: {
        dock: 'bottom',
        layout: {
            pack: 'center'
        }
    },
    items: [
        { xtype: 'startcard', text: 'Start Card'},
        { xtype: 'secondcard', text: 'Second Card'},
    ]
});

但是，我没有在任何地方看到您的“secondcard”类型定义，因此它可能会引发错误。您应该在 Chrome/Safari 中加载您的页面，并使用开发人员控制台查看它是否显示任何 JS 错误。这些错误将阻止组件的行为正常工作。

单击该选项卡的按钮现在将使用您配置为 TabBar 的“cardSwitchAnimation”的任何动画切换到该卡片。

【讨论】：

我想从每张卡中启动“myPrefs”功能，但每次尝试时都会出错。所以这不起作用： this.StartCard.setActiveItem('myPrefs', {type:'slide', direction:'down'});
'myPrefs' 不是该功能的有效选项。您需要指定要切换到的 Ext.Panel 对象。例如函数应该有这样的格式：this.StartCard.setActiveItem(new Ext.Panel(), {...})