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

效果图：