1. #1
    Touch Premium Member
    Join Date
    Sep 2011
    Posts
    41
    Vote Rating
    0
    prasanna_hr is on a distinguished road

      0  

    Default Carousel swipe animation is very slow & choppy on mobile browser

    Carousel swipe animation is very slow & choppy on mobile browser


    Carousel swipe animation is very slow & choppy on mobile phones. This happens only when you start the browser, and launch the app by typing in the app URL.

    If you create a home page bookmark and launch the same app from there, the animation seems to be very smooth.

    We tried it on iPhone4 with iOS4.


    Attached is the code

    index.html:
    Code:
    <html>
        
        <head>
            <meta charset="UTF-8" />
            <title>My App</title>
            <link rel="stylesheet" type="text/css" media="screen, projection, print"
            href="../../resources/css/sencha-touch.css">
            <script src="app/util/base64.js" type="text/javascript" charset="utf-8"></script>
            <script src="../../sencha-touch-debug.js" type="text/javascript"
            charset="utf-8"></script>
            <script src="app/app.js" type="text/javascript" charset="utf-8"></script>
        </head>
        
        <body></body>
    
    
    </html>

    app.js:
    Code:
    Ext.Loader.setConfig({
        enabled: true,
        paths: {
            'MyApp': 'app',
        }
    });
    var projectTaskTpl;
    
    
    Ext.setup({
        onReady: function () {
            projectTaskTpl = '<table width = "100%"><tr><td align="left" width ="95%"><font class = "daterowCls">{firstName}<br>&nbsp;&nbsp;&nbsp;&nbsp;{lastName}</font></td><td align="right"><div  style = "text-align:right" size="5%" id="timeinput{firstName}{firstName}"><font class = "daterowCls">{firstName}</font></div></td></tr></table>';
    
    
            Ext.create('Ext.app.Application', {
                name: 'MyApp',
                fullscreen: true,
                appFolder: 'app',
                launch: function () {
    
    
                    Ext.define('Contact', {
                        extend: 'Ext.data.Model',
                        config: {
                            fields: ['firstName', 'lastName']
                        }
                    });
    
    
                    var store = Ext.create('Ext.data.Store', {
                        model: 'Contact',
                        sorters: 'lastName',
    
    
                        data: [{
                            firstName: 'Tommy',
                            lastName: 'Maintz',
                            index: 1
                        }, {
                            firstName: 'Rob',
                            lastName: 'Dougan',
                            index: 2
                        }, {
                            firstName: 'Ed',
                            lastName: 'Spencer',
                            index: 3
                        }, {
                            firstName: 'Jamie',
                            lastName: 'Avins',
                            index: 4
                        }, {
                            firstName: 'Aaron',
                            lastName: 'Conran',
                            index: 5
                        }, {
                            firstName: 'Dave',
                            lastName: 'Kaneda',
                            index: 6
                        }, {
                            firstName: 'Jacky',
                            lastName: 'Nguyen',
                            index: 7
                        }, {
                            firstName: 'Abraham',
                            lastName: 'Elias',
                            index: 8
                        }, {
                            firstName: 'Jay',
                            lastName: 'Robinson',
                            index: 9
                        }, {
                            firstName: 'Nigel',
                            lastName: 'White',
                            index: 10
                        }, {
                            firstName: 'Tommy',
                            lastName: 'Maintz',
                            index: 11
                        }, {
                            firstName: 'Rob',
                            lastName: 'Dougan',
                            index: 12
                        }, {
                            firstName: 'Ed',
                            lastName: 'Spencer',
                            index: 13
                        }, {
                            firstName: 'Jamie',
                            lastName: 'Avins',
                            index: 14
                        }, {
                            firstName: 'Aaron',
                            lastName: 'Conran',
                            index: 15
                        }, {
                            firstName: 'Dave',
                            lastName: 'Kaneda',
                            index: 16
                        }, {
                            firstName: 'Jacky',
                            lastName: 'Nguyen',
                            index: 17
                        }, {
                            firstName: 'Abraham',
                            lastName: 'Elias',
                            index: 18
                        }, {
                            firstName: 'Jay',
                            lastName: 'Robinson',
                            index: 19
                        }, {
                            firstName: 'Nigel',
                            lastName: 'White',
                            index: 20
                        }, ]
                    });
                    var carousel = Ext.create('Ext.carousel.Carousel', {
                        config: {
                            fullscreen: true
                        },
                        defaults: {
                            styleHtmlContent: true
                        },
    
    
                        items: [
    
    
                        {
                            xtype: 'panel',
                            style: 'background-color: red',
                            items: [{
                                xtype: 'list',
                                scrollable: {
                                    direction: 'vertical',
                                    directionLock: true
                                },
                                id: 'list1',
                                itemTpl: '{firstName}:::{lastName}',
                                //itemTpl:projectTaskTpl,
                                style: 'background-color: red',
                                store: store
                            }]
                        }, {
                            xtype: 'panel',
                            style: 'background-color: yellow',
                            items: [{
                                xtype: 'list',
                                scrollable: {
                                    direction: 'vertical',
                                    directionLock: true
                                },
                                id: 'list2',
                                itemTpl: '{firstName}:::{lastName}',
                                //itemTpl:projectTaskTpl,
                                style: 'background-color: yellow',
                                store: store
                            }]
                        }, {
                            xtype: 'panel',
                            style: 'background-color: green',
                            items: [{
                                xtype: 'list',
                                scrollable: {
                                    direction: 'vertical',
                                    directionLock: true
                                },
                                id: 'list3',
                                itemTpl: '{firstName}:::{lastName}',
                                //itemTpl:projectTaskTpl,
                                style: 'background-color: green',
                                store: store
                            }]
                        }]
                    });
    
    
                    carousel.show();
                }
    
    
            });
        }
    });


  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    First thing I see wrong with your code is in your Ext.create for the Carousel, you have this:

    Code:
    config : {
        fullscreen : true
    }
    Which should just plainly be:

    Code:
    fullscreen : true
    No config object, that is for Ext.define. Then you also don't need the show() method call.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1