1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    32
    Vote Rating
    0
    dotBomb is on a distinguished road

      0  

    Default Unanswered: Sencha Touch 2.0 Custom Carousel

    Unanswered: Sencha Touch 2.0 Custom Carousel


    There's a very nice carousel extension on gitHub I learned about along with a corresponding screencast here: http://www.sencha.com/learn/touch/#X...cast/date/desc. I tried porting this example over to 2.0, and although I've addressed all the deprecated methods (Ext.Extend() vs. Ext.define(), the new config, etc), the sample won't run for me. Perhaps you can give it a try. No errors appear in the console when I attempt to run in chrome. I think the problem has to do with the viewport definition in app.js.

    http://dankemper.net/downloads/sench...mo-9da04fe.zip


    Dan

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,071
    Answers
    3499
    Vote Rating
    852
    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


    Let's talk about what you want the carousel to do.
    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.

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    32
    Vote Rating
    0
    dotBomb is on a distinguished road

      0  

    Default


    mitchellsimoens,

    I would settle for just understanding why the version I have created doesn't display its content. Not so much what I want the carousel to do, but I want to understand how to customize what it displays, and eventually (later on) style the carousel proper, any number of ways.

    Anyway, here, I am trying to initialize the loader to eventually resolve content from the 'views' folder. The viewport is defined in Viewport.js and has been assinged the xtype: app_views_viewport. Using the Ext.setup (commented out) I get a index not found error and with the App = new Ext.Application method I don't see any errors but no content is being displayed, just a blank page.


    Code:
    Ext.Loader.setConfig({
        enabled: true,
        paths: {
            App: 'app'
        }
    });
    
    
    App = new Ext.Application({
        name: 'App',
        launch: function () {
            console.log('initializing viewport ...');
            this.views.viewport = new this.views.Viewport();
        }
    });
    
    
    //Ext.setup({
    //    tabletStartupScreen: 'tablet_startup.png',
    //    phoneStartupScreen: 'phone_startup.png',
    //    icon: 'icon.png',
    //    glossOnIcon: false,
    //    requires: [
    //        'App.views.PaintingCard',
    //        'App.views.Viewport'
    //    ],
    //    launch: function () {
    //        Ext.Viewport.add({
    //            xtype: 'app_views_viewport'
    //        });
    //    }
    //});

    Dan

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,071
    Answers
    3499
    Vote Rating
    852
    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


    You can inspect the DOM to see if DOM elements are in there (under the Ext.Viewport elements). If not, then you need to add fullscreen : true
    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.

  5. #5
    Sencha User
    Join Date
    Jan 2012
    Posts
    32
    Vote Rating
    0
    dotBomb is on a distinguished road

      0  

    Default


    Hi,

    Thank you for the recommendation, however, fullscreen is already set to true in the class that inherits from Carousel called 'Viewport.js'. Below is the Viewport.js class. For me, the question becomes how should the app.js go about instantiating the App.views.Viewport class such that visible content is eventually rendered? More information: 'Elements' tab of chrome shows the body tag is empty.

    Code:
    Ext.define('App.views.Viewport', {
        extend: 'Ext.Carousel',
        fullscreen: true,
        xtype: 'app_views_viewport',
        constructor: function() {
            Ext.apply(this, {
    
    
                defaults: {
                    xtype: 'paintingcard',
                    artist: 'Dale Adcock',
                    url: 'http://daleadcock.com/index.php?/p/p/',
                    medium: 'oil on linen'
                },
    
    
                items: [
    
    
                    {
                        slug: 'asteroid',
                        title: 'Asteroid',
                        dimensions: '152.4 x 152.4cm',
                        date: '2010-2011'
                    },
    
    
                    {
                        slug: 'template',
                        title: 'Template',
                        dimensions: '245 x 195cm',
                        date: '2010-2011'
                    },
    
    
                    {
                        slug: 'standing',
                        title: 'Standing',
                        dimensions: '190 x 230cm',
                        date: '2009'
                    },
    
    
                    {
                        slug: 'sitting',
                        title: 'Sitting',
                        dimensions: '230 x 190cm',
                        date: '2009'
                    },
    
    
                    {
                        slug: 'erect',
                        title: 'Erect',
                        dimensions: '230 x 190cm',
                        date: '2009'
                    },
    
    
                ]
            });
            App.views.Viewport.superclass.initComponent.apply(this, arguments);
        }
    });

  6. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    32
    Vote Rating
    0
    dotBomb is on a distinguished road

      0  

    Default


    Well, if anyone would like to take a look at the source (first post of this thread), and I eventually get the v1 example converted to v2 I would share the code, add comments regarding conversion, etc. Again, what I'm looking for here is just a version 2 of the original example. It's a learning experience for me. I know I must have made a mistake somewhere ...

    Dan

Thread Participants: 1

Tags for this Thread