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