1

次の構造のデータビュー コンポーネントを作成する必要があります

構造

単純なテキスト コンポーネントの作成方法を学習しましたが、この構造はより困難です。私はこのコードを使用しますが、名前フィールドのみです

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

});

4

1 に答える 1

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/ をご覧ください。

于 2012-04-23T18:45:03.517 に答える