Home/ Questions/Q 8433057
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T06:17:12+00:00

I am trying to create a vertical slider using sencha touch 2 for a

  • 0

I am trying to create a vertical “slider” using sencha touch 2 for a mobile device when the user clicks on a button. I’m pretty new to Javascript but I have covered the basics. I tried to follow what was done here : Show/hide a toolbar with slide animation in Sencha Touch but a blank white screen is produced. Why would this occur?

<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]
    });
    }
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this

    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'});
};

    Your html file should look like this

    <!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 files will come with the library. Put the above javascript code and put it in a new js file named app.js.

    If there are any errors, they will show up in the chrome developer tools console.

    • 0