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{
            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{
            model: 'PictureItem',
            data: [
                {id:1, url:''},
                {id:2, url:''},
                {id:3, url:''},
                {id:4, url:''},
                {id:5, url:''},
                {id:6, url:''},
                {id:7, url:''},
                {id:8, url:''},
                {id:9, url:''},

        // 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,
                selectionchange: function (model, records) {
                    if (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} {}</tpl>'


        pictureItems.each(function (pictureItem) {
            pictureBar.add(new Ext.Button({
                style:{background: 'url(' + + ')'},
                    tap: function () {


and produces a UI something like:

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.