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'

            }

效果图：