Objects passed in data item definition don 't has to be simple elements with a simple setter attached, on the pattern specified by you:
Code:
config: {
dataMap: {
getName: {
setHtml: 'name'
}
},
name: {
cls: 'x-name',
flex: 1
}
}
If you look in the dataitem source code you see how mapping works:
Code:
for (componentName in dataMap) {
setterMap = dataMap[componentName];
component = me[componentName]();
if (component) {
for (setterName in setterMap) {
if (component[setterName]) {
component[setterName](data[setterMap[setterName]]);
} } } }
So instead of using setHtml method of a Component one could create a new component with setters for every property he needs.
Code:
Ext.define('MyProduct',{
extend:'Ext.Contaier',
xtype:'mycomponenttype',
config:{
name:null,
image:null,
quantity:null,
items:[
{xtype:'component', id:'name'},
{xtype:'component', id:'image'}
{xtype:'component', id:'quantity'}
]
},
setName:function(name)
{
//update view element
},
setImage:function(image)
{
//update image element
},
setQuantity:function(image)
{
//update quantity
}
});
Now you have a new type that has setters for your needs, mycomponenttype, that could have any layout or tpl you want.
Now in you data item implementation you can set things like:
Code:
config: {
dataMap: {
getMyComp: {
setName: 'name',
setImage:'image',
setQuantity:'quantity'
}
},
myComp: {
xtype:'mycomponenttype'
}
}
,
applyMyComp: function(config){
return Ext.factory(config, MyProduct , this.getMyComp());
}
Of course this is not a working code, but I hope you get the idea
If you don t have a large number of items, using a container instead of Dataview might be more handy.