sencha touch list + carousel scrollable(与其他控件共用滚动条)

有些时候我们需要实现这种效果

上边是一张图片或者一个跑马灯控件，这个布局实现起来比较容易

但是如何让他们共用一个滚动条，来实现以下效果就比较麻烦了。

在官方论坛查找资料得知，可以用以下写法实现：

/*
*动态
*/
Ext.define('app.view.new.Trend', {
    alternateClassName: 'newTrend',
    extend: 'Ext.List',
    requires: ['Ext.carousel.Carousel', 'Ext.plugin.PullRefresh', 'Ext.plugin.ListPaging'],
    xtype: 'newTrend',
    config: {
        title: '动态',
        cls: 'list',
        store: 'trendList',
        scrollable: {
            //如此设置carousel切换视图时滚动条不出现
            directionLock: true
        },
        plugins: ['pullrefresh', 'listpaging'],
        itemTpl:  '内容',
        items: [{
            xtype: 'carousel',
            //跟随滚动条滚动
            scrollDock: 'top',
            docked: 'top',
            height: '7em',
            tpl: '<div class="imgTitle img" style="background-image:url({TopBarImgPath})">{Title}<div>'
        }]
    }
});