前提条件: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);