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>'
        }]
    }
});