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

 1 /*
 2 *扩展carousel
 3 *通过data,tpl,store配置数据
 4 */
 5 Ext.define('ux.CardList', {
 6     extend: 'Ext.carousel.Carousel',
 7     xtype: 'cardList',
 8     config: {
 9         //单个项配置
10         itemConfig: {},
11         //数据展示模版
12         tpl: null,
13         //数据源
14         store: null,
15         //数据源
16         data: null
17     },
18     //数据源事件
19     storeEventHooks: {
20         load: 'onLoad'
21     },
22     //填充数据
23     updateData: function (data) {
24         var me = this,
25         store = me.getStore();
26         if (!store) {
27             this.setStore(Ext.create('Ext.data.Store', {
28                 data: data,
29                 autoDestroy: true
30             }));
31         } else {
32             store.add(data);
33         }
34     },
35     //创建store
36     applyStore: function (store) {
37         var me = this,
38         bindEvents = Ext.apply({},
39         me.storeEventHooks, {
40             scope: me
41         });
42         //获取store,绑定事件
43         if (store) {
44             store = Ext.data.StoreManager.lookup(store);
45             store.on(bindEvents);
46         }
47         return store;
48     },
49     //数据加载成功
50     onLoad: function (store) {
51         var me = this,
52         tpl = me.getTpl(),
53         config = me.getItemConfig(),
54         item;
55         if (tpl) {
56             //遍历store，动态添加元素
57             config.tpl = tpl;
58             store.each(function (record, index, length) {
59                 config.record = record;
60                 //展示数据，绑定点击事件
61                 item = Ext.factory(config, 'Ext.Container');
62                 item.element.on({
63                     scope: me,
64                     tap: 'onItemTap'
65                 });
66                 me.add(item);
67             });
68         }
69     },
70     //更新store
71     updateStore: function (newStore, oldStore) {
72         var me = this,
73         bindEvents = Ext.apply({},
74         me.storeEventHooks, {
75             scope: me
76         });
77         //移除绑定事件，销毁
78         if (oldStore && Ext.isObject(oldStore) && oldStore.isStore) {
79             oldStore.un(bindEvents);
80             if (oldStore.getAutoDestroy()) {
81                 oldStore.destroy();
82             }
83         }
84         if (newStore.getCount()) {
85             this.onLoad(newStore);
86         }
87     },
88     //触发单项点击事件
89     onItemTap: function () {
90         var me = this,
91         item = me.getActiveItem();
92         me.fireEvent('itemTap', me, me.getActiveIndex(), item, item.getRecord());
93     }
94 });

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

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