0

ユーザーがボタンをクリックしたときに、モバイル デバイス用に sencha touch 2 を使用して垂直方向の「スライダー」を作成しようとしています。私はJavascriptにかなり慣れていませんが、基本をカバーしました。ここで行われたことに従おうとしました: 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]
    });
    }
}
4

1 に答える 1

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 コードを入れて、app.js という名前の新しい js ファイルに入れます。

エラーがある場合は、Chrome 開発者ツール コンソールに表示されます。

于 2012-08-23T02:27:37.233 に答える