extjs - Sencha Touch，在同一面板上是否有带有文本（空白）区域的轮播？

Question

Sencha 是全新的，我正在尝试制作一张底部是旋转木马的卡片，在其顶部有一个开放区域，该区域将根据在下面的旋转木马中单击哪个图像来更新文本。知道我该怎么做吗？谢谢！

Answer 1

我认为这可以完成工作：

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

    }
});

并产生一个类似的用户界面：http: //cl.ly/3vLZ