sencha touch carousel 扩展 CardList 可绑定data/store

扩展代码:

/*
*扩展carousel
*通过data,tpl,store配置数据
*/
Ext.define('ux.CardList', {
    extend: 'Ext.carousel.Carousel',
    xtype: 'cardList',
    config: {
        //单个项配置
        itemConfig: {},
        //数据展示模版
        tpl: null,
        //数据源
        store: null,
        //数据源
        data: null
    },
    //数据源事件
    storeEventHooks: {
        load: 'onLoad'
    },
    //填充数据
    updateData: function (data) {
        var me = this,
        store = me.getStore();
        if (!store) {
            this.setStore(Ext.create('Ext.data.Store', {
                data: data,
                autoDestroy: true
            }));
        } else {
            store.add(data);
        }
    },
    //创建store
    applyStore: function (store) {
        var me = this,
        bindEvents = Ext.apply({},
        me.storeEventHooks, {
            scope: me
        });
        //获取store,绑定事件
        if (store) {
            store = Ext.data.StoreManager.lookup(store);
            store.on(bindEvents);
        }
        return store;
    },
    //数据加载成功
    onLoad: function (store) {
        var me = this,
        tpl = me.getTpl(),
        config = me.getItemConfig(),
        item;
        if (tpl) {
            //遍历store，动态添加元素
            config.tpl = tpl;
            store.each(function (record, index, length) {
                config.record = record;
                //展示数据，绑定点击事件
                item = Ext.factory(config, 'Ext.Container');
                item.element.on({
                    scope: me,
                    tap: 'onItemTap'
                });
                me.add(item);
            });
        }
    },
    //更新store
    updateStore: function (newStore, oldStore) {
        var me = this,
        bindEvents = Ext.apply({},
        me.storeEventHooks, {
            scope: me
        });
        //移除绑定事件，销毁
        if (oldStore && Ext.isObject(oldStore) && oldStore.isStore) {
            oldStore.un(bindEvents);
            if (oldStore.getAutoDestroy()) {
                oldStore.destroy();
            }
        }
        if (newStore.getCount()) {
            this.onLoad(newStore);
        }
    },
    //触发单项点击事件
    onItemTap: function () {
        var me = this,
        item = me.getActiveItem();
        me.fireEvent('itemTap', me, me.getActiveIndex(), item, item.getRecord());
    }
});

使用示例：

   xtype: 'cardList',
            title: '动态',
            ui: 'card',
            store: 'trendTopList',
            height: 231,
            tpl: '<div class="imgTitle img" style="background-image:url({TopBarImgPath})"><div class="cardTitle">{Title}</div></div>'

控制层监听：

            cardList: {
                initialize: 'listInit',
                //和list一样的监听
                itemTap: 'itemtap'
            }

效果图：