sencha-touch - 在 Dataview Sencha Touch 2 中创建 DataItem

Question

我需要创建一个具有以下结构的数据视图组件

结构

我学会了如何创建简单的文本组件，但这种结构比较困难。我使用此代码，但只是名称字段

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

});

Answer 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/