我需要创建一个具有以下结构的数据视图组件
我学会了如何创建简单的文本组件,但这种结构更难。 我使用此代码,但只是名称字段
Ext.define('DEMO.view.product.ListItem', {
extend: 'Ext.dataview.component.DataItem',
xtype: 'product-list-item',
config: {
cls: 'product-list-item',
dataMap: {
getName: {
setHtml: 'name'
}
},
name: {
cls: 'x-name',
flex: 1
},
layout: {
type: 'hbox',
align: 'left'
}
},
applyName: function(config){
return Ext.factory(config, Ext.Component, this.getName());
},
updateName: function(newName, oldName) {
if (newName) {
this.add(newName);
}
if (oldName) {
this.remove(oldName);
}
}
});
答案 0 :(得分:1)
只需要添加其他组件作为名称。例如,
Ext.define('App.view.UserItem', {
extend: 'Ext.dataview.component.DataItem',
xtype: 'useritem',
config: {
cls: 'user-item',
firstName: { cls: 'first-name', flex: 1 },
lastName: { cls: 'last-name', flex: 2 },
layout: { type: 'hbox', align: 'center' },
dataMap: {
getFirstName: { setHtml: 'firstName' },
getLastName: { setHtml: 'lastName' }
}
},
applyFirstName: function(config) {
return Ext.factory(config, Ext.Component, this.getFirstName());
},
updateFirstName: function(newFirstName, oldFirstName) {
if(newFirstName) this.add(newFirstName);
if(oldFirstName) this.remove(oldFirstName);
},
applyLastName: function(config) {
return Ext.factory(config, Ext.Component, this.getLastName());
},
updateLastName: function(newLastName, oldLastName) {
if(newLastName) this.add(newLastName);
if(oldLastName) this.remove(oldLastName);
}
});
有关详细信息,请访问http://www.sencha.com/blog/dive-into-dataview-with-sencha-touch-2-beta-2/