Sencha Touch 2.0 Custom Carousel

[dotBomb]

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

[mitchellsimoens]

Let's talk about what you want the carousel to do.

[dotBomb]

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.

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

[mitchellsimoens]

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

[dotBomb]

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.

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

[dotBomb]

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