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);