Sencha Touch 2 - Dataview里面实现items迭代并初始化items的一些属性

前提条件:ST2有很多items放到container里面需要用着模版使用。 items很多属性需要初始化并且赋值。当然itemTpl可以实现迭代。但是有个缺点是只能使用html标签。不能使用ST的一些控件标签。所以本文将介绍怎么使用dataitem方式迭代初始化控件。

item的模版，也就是模版的迭代部分

/**
* @author larrywoo Email:larrywoo1982@gmail.com
*/
Ext.define('DingCan.view.CartItem', {
extend : 'Ext.Container',
xtype : 'mydataview',
requires : ['Ext.Label'],

config : {
//scrollable : true,
//此处的fullscreen要慎用。不然dataview不能显示
//fullscreen : true,
layout : 'vbox',


items : [{
xtype : 'container',
layout : 'hbox',
items : [{
//id : 'image',
itemId : 'cartimage',
xtype : 'image',
mode : 'tag',
src : '',
cls : 'cart-item-thumb'
},

{
xtype : 'container',
flex : 1,


layout : 'vbox',
items : [{
itemId : 'name',
//id : 'name',
html : '产品名称',
cls : 'cart-item-name'
}, {
xtype : 'container',
cls : 'cart-item-props',


layout : 'vbox',
items : [{
itemId : 'price',
//id : 'price',
html : '价格：￥4.00',
cls : 'item-prop'
}, {
itemId : 'taste',
//id : 'taste',
html : '麻辣，少蒜少葱',
cls : 'item-prop'
}]
}]
}


]
}, {
itemId : 'quantity',
//id : 'quantity',
xtype : 'spinnerfield',
label : '数量',
labelWidth : '60%',
labelWrap : true,
labelAlign : 'right',
increment : 1,
minValue : 1,
maxValue : 50
}]
},


initialize : function() {
this.callParent(arguments);
},


beforeInitialize : function() {
this.nameEl = this.down('#name');
this.quantityEl = this.down('#quantity');
this.imageEl = this.down('#cartimage');
this.tasteEl = this.down('#taste');
this.priceEl = this.down('#price');
//this.totalSumEl = this.down('#totalSum');
},

//该方法需要在datatitem调用该方法
setPicImage : function(picImage) {
console.log(picImage);
//console.log(this.imageEl);
this.imageEl.setSrc(picImage)
},


setOwnName : function(ownName) {
this.nameEl.setHtml(ownName)
},


setPrice : function(price) {
this.priceEl.setHtml('价格￥' + price)


},


setQuantity : function(quantity) {
this.quantityEl.setValue(quantity)
}


})

dataitem的定义：

Ext.define('DingCan.view.Items', {
extend : 'Ext.dataview.component.DataItem',
xtype : 'cartitem',


config : {


dataMap : {
getMyComp : {

//里面的方法就是你需要从迭代中调用的，src就是store里面的字段，在后面我们会用到怎么去将store赋值
setPicImage : 'src',
setOwnName:'name',
setQuantity:'quantity',
setPrice:'price'
}
},

myComp : {

//调用之前的模版并定义为一个component
xtype : 'mydataview'
}


},

applyMyComp : function(config) {
return Ext.factory(config, 'DingCan.view.CartItem', this.getMyComp());
},


updateMyComp: function(newMyComp, oldMyComp) {
if (newMyComp) {
this.add(newMyComp);
}

//debugger;


if (oldMyComp) {
this.remove(oldMyComp);
}
}


});

itemlist也就是最后调用的界面,注意必须啊是dataview

Ext.define('DingCan.view.ItemsList', {
extend: 'Ext.DataView',
xtype: 'itemslist',


requires: [
'DingCan.view.Items'
],


config: {
useComponents: true,
defaultType: 'cartitem',
cls: 'cart-items-list',
scrollable: 'vertical'
},

initialize : function() {
this.callParent(arguments);
}
});

调用方法并迭代

var currentList = Ext.create('DingCan.view.ItemsList');

//读取store
var cartStore = Ext.getStore('cartitems');

//将store的赋值给dataitem 的list
currentList.setStore(cartStore);

this.getList().push(currentList);