Extjs Sencha Touch，是否在同一面板上有带文本（空白）区域的转盘？

全新的Sencha，我正在尝试有一个卡的底部是一个旋转木马，它的顶部是一个开放的区域，将有文本更新，这取决于在下面的旋转木马中单击的图像。你知道我该怎么做吗？谢谢大家!

我认为这很管用：

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

    }
});

新的外部应用程序({
启动：函数（）{
//资料
Ext.regModel（'MenuItem'{
字段：['id'，'name']
});
var menuItems=新的Ext.data.Store({
型号：“MenuItem”，
数据：[
{id:1，名称：'Page 1'}，
{id:2，名称：'Page 2'}，
{id:3，名称：'Page 3'}，
{id:4，名称：'Page 4'}，
{id:5，名称：'Page 5'}
]
});
Ext.regModel（'PictureItem'{
字段：['id'，'url']
});
var pictureItems=新的Ext.data.Store({
型号：“PictureItem”，
数据：[
{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'},
]
});
//用户界面
var topBar=新的外部工具栏({
码头：“顶部”，
标题：“Ryan的布局”，
项目：[
{文本：'按钮1'}，
{文本：'按钮2'}
]
});
var leftList=新的外部列表({
码头：“左”，
宽度：135，
itemTpl:“{name}”，
singleSelect:true，
商店：menuItems，
听众：{
选择更改：功能（型号、记录）{
如果（记录[0]）{
viewport.update（记录[0]）；
}
}
}
});
var pictureBar=新的外部工具栏({
船坞：“底部”，
布局：“hbox”，
滚动：‘水平’，
身高：100，
默认值：{
cls:'图片'，
身高：80，
宽度：120，
},
});
var视口=新的外部面板({
全屏：对，
dockedItems:[topBar、pictureBar、leftList]，
tpl:“{store.model.modelName}{data.id}”
});
//将图像存储绑定到工具栏
pictureItems.each（函数（pictureItem）{
pictureBar.add（新建分机按钮({
样式：{background:'url(http://i.tinysrc.mobi/120/80/“+pictureItem.data.url+”）}，
听众：{
点击：功能（）{
viewport.update（pictureItem）；
}
}
}));
});
pictureBar.doLayout（）；
}
});

---

并生成一个类似这样的UI：

您需要使用哪一部分？你有没有看过下载sencha touch时得到的示例？在examples文件夹中有一个名为carousel的文件夹，该文件夹在一个页面中提供两个旋转木马，您可以对其进行修改，使其顶部有一个文本面板。Sencha下载附带的Kitchen sink应用程序（也在examples文件夹中）有触摸事件的示例。如果有一个特定的部分，你被卡住了，那么请提供更多的细节。