Sencha Touch 2 Slider 产生黑屏答案

【问题标题】：Sencha Touch 2 Slider Produces Blank ScreenSencha Touch 2 Slider 产生黑屏
【发布时间】：2012-08-23 00:00:23
【问题描述】：

当用户单击按钮时，我正在尝试使用 sencha touch 2 为移动设备创建一个垂直“滑块”。我对 Javascript 很陌生，但我已经介绍了基础知识。我试图按照这里所做的：Show/hide a toolbar with slide animation in Sencha Touch 但会产生一个空白屏幕。为什么会出现这种情况？

<script type="text/javascript">
        function clicked(id) {
        if(id == "hist"){

    var showAlert = function(btn, event) {
        Ext.Msg.alert('Title', 'Diste ' + event.type + ' en el botón "' + btn.text + '"', Ext.emptyFn);
    };

    var tapHandler = function(button, event) {
        mainPanel.setActiveItem(blue, {type: 'slide'});
    };

    var backHandler = function(button, event) {
        mainPanel.setActiveItem(green, {type: 'slide', direction: 'right'});
    };



    var green = new Ext.Panel({
        dockedItems: [{
            xtype: 'toolbar',
            ui: 'light',
            title: 'My Toolbar',
            items: [{
                text: 'Sobre App',
                ui: 'round',
                handler: showAlert
            }, { xtype:'spacer'}, {
                text: 'Check-in',
                ui: 'forward',
                handler: tapHandler
            }]
        }],
        style: 'background-color:#3b7E3b',
        html: 'Green'
    });

    var blue = new Ext.Panel({
        dockedItems: [{
            xtype: 'toolbar',
            ui: 'light',
            title: 'Check-in',
            items: [{
                text: 'Back',
                ui: 'back',
                handler: backHandler
            }]
        }],
        style: 'background-color:#3b3b7E',
        html: 'Blue'
    });

    var mainPanel = new Ext.Panel({
        layout: 'card',
        fullscreen : true,
        items: [green, blue]
    });
    }
}

【问题讨论】：

请您发布您的代码
将代码添加到问题中

标签： javascript slider extjs sencha-touch-2 cordova

【解决方案1】：

试试这个

var mainPanel,blue,green;

Ext.application({
    launch: function() {
        green = new Ext.Panel({
            items:[
                {
                    xtype:'toolbar',
                    title:'My Toolbar',
                    ui:'light',
                    docked:'top',
                    items: [
                        {
                            text: 'Sobre App',
                            ui: 'round',
                            handler: showAlert
                        },
                        {
                            xtype:'spacer'
                        },
                        {
                            text: 'Check-in',
                            ui: 'forward',
                            handler: tapHandler
                        }
                    ]
                }
            ],
            style: 'background-color:#3b7E3b',
            html: 'Green'
        });

        blue = new Ext.Panel({
            items:[
                {
                    xtype:'toolbar',
                    title:'Check-In',
                    ui:'light',
                    docked:'top',
                    items: [
                        {
                            text: 'Back',
                            ui: 'back',
                            handler: backHandler
                        }
                    ]
                }
            ],
            style: 'background-color:#3b3b7E',
            html: 'Blue'
        });

        mainPanel = new Ext.Panel({
            layout: 'card',
            fullscreen : true,
            items: [green,blue]
        });
        Ext.Viewport.add(mainPanel);
    }
});

var showAlert = function(btn, event) {
    Ext.Msg.alert('Title', 'Diste ' + event.type + ' en el botón "'
            + btn.text + '"', Ext.emptyFn);
};

var tapHandler = function(button, event) {
    mainPanel.animateActiveItem(blue,{type: 'slide'});
};

var backHandler = function(button, event) {
    mainPanel.animateActiveItem(green, {type: 'slide', direction: 'right'});
};

您的 html 文件应如下所示

<!DOCTYPE HTML>
<html manifest="" lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>Sencha Touch Knob</title>
        <link rel="stylesheet" type="text/css" href="stylesheets/sencha-touch.css">
        </link>
        <script type="text/javascript" src="javascripts/sencha-touch-all-debug.js">  
        </script>
        <script type="text/javascript" src="javascripts/app.js"></script>
    </head>
    <body>
    </body>
</html>

sencha-touch.css,sencha-touch-all-debug.js 文件将随库一起提供。把上面的javascript代码放到一个新的js文件中，命名为app.js。

如果有任何错误，它们会显示在 chrome 开发者工具控制台中。

【讨论】：

感谢您的快速回复 blessenm。我仍然无法让它工作，但我认为这是因为我在脚本语言方面极度缺乏知识，因为我似乎无法在按钮单击时从 html 调用 .js 文件。
您可能需要阅读 Sencha Touch 2 的入门指南。我已经用更多信息更新了我的答案。