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

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

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

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

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

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>'

        }]

    }

});

 

你可能感兴趣的:(Sencha Touch)