Sencha Touch, ¿tiene carrusel con área de texto (en blanco) en el mismo panel?

Brand new to Sencha, and I am trying to have a card where the bottom part is a carousel, and on top of it an open area that will have text updated depending on which image is clicked in the carousel below. Any idea how I can do this? Thank you!

preguntado el 09 de enero de 11 a las 04:01

Which part are you stuck with? Have you had a look at the examples you get when you download sencha touch? In the examples folder their is one called carousel which gives you two carousels in a page which you will be able to modify to have a panel for your text at the top. -

The Kitchen sink app that comes with the Sencha download (its in the examples folder as well) has examples of touch events. If there is a specific part you are stuck on then please give more details. -

1 Respuestas

I think this does the job:

new Ext.Application({
    launch: function() {

        // DATA

        Ext.regModel('MenuItem', {
            fields: ['id', 'name']
        });
        var menuItems = new Ext.data.Store({
            model: 'MenuItem',
            data: [
                {id:1, name:'Page 1'},
                {id:2, name:'Page 2'},
                {id:3, name:'Page 3'},
                {id:4, name:'Page 4'},
                {id:5, name:'Page 5'}
            ]
        });


        Ext.regModel('PictureItem', {
            fields: ['id', 'url']
        });
        var pictureItems = new Ext.data.Store({
            model: 'PictureItem',
            data: [
                {id:1, url:'http://farm4.static.flickr.com/3154/2370778225_f448a2d5a4.jpg'},
                {id:2, url:'http://farm1.static.flickr.com/3560/3363355104_b0175610d9.jpg'},
                {id:3, url:'http://farm4.static.flickr.com/3092/2869861643_cdc051b5b3.jpg'},
                {id:4, url:'http://farm4.static.flickr.com/3448/3252866261_7eb3d01114.jpg'},
                {id:5, url:'http://farm3.static.flickr.com/2303/2508275237_5ecf4b3532.jpg'},
                {id:6, url:'http://farm4.static.flickr.com/3154/2370778225_f448a2d5a4.jpg'},
                {id:7, url:'http://farm1.static.flickr.com/3560/3363355104_b0175610d9.jpg'},
                {id:8, url:'http://farm4.static.flickr.com/3092/2869861643_cdc051b5b3.jpg'},
                {id:9, url:'http://farm4.static.flickr.com/3448/3252866261_7eb3d01114.jpg'},
            ]
        });


        // UI

        var topBar = new Ext.Toolbar({
            dock: 'top',
            title: 'Ryan\'s layout',
            items: [
                {text: 'Button 1'},
                {text: 'Button 2'}
            ]
        });

        var leftList = new Ext.List({
            dock: 'left',
            width: 135,
            itemTpl: '{name}',
            singleSelect: true,
            store: menuItems,
            listeners:{
                selectionchange: function (model, records) {
                    if (records[0]) {
                        viewport.update(records[0]);
                    }
                }
            }

        });

        var pictureBar = new Ext.Toolbar({
            dock: 'bottom',
            layout: 'hbox',
            scroll: 'horizontal',
            height: 100,
            defaults: {
                cls: 'pic',
                height: 80,
                width: 120,
            },
        });

        var viewport = new Ext.Panel({
            fullscreen: true,
            dockedItems: [topBar, pictureBar, leftList],
            tpl:'<tpl for=".">{store.model.modelName} {data.id}</tpl>'
        });


        // BIND IMAGE STORE TO TOOLBAR

        pictureItems.each(function (pictureItem) {
            pictureBar.add(new Ext.Button({
                style:{background: 'url(http://i.tinysrc.mobi/120/80/' + pictureItem.data.url + ')'},
                listeners:{
                    tap: function () {
                        viewport.update(pictureItem);
                    }
                }
            }));
        });
        pictureBar.doLayout();

    }
});

and produces a UI something like: http://cl.ly/3vLZ

Respondido el 15 de enero de 11 a las 00:01

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.