Come creare dati complessi in Sencha touch 2.1?

Question

Voglio creare dataitem in un elenco che assomiglia a questo:

ma non sono in grado di rendere centrale vbox sezione con 3 componenti. Sto seguendo questo esempio: http://www.sencha.com/blog/dive-into-dataview-with-sencha-touch-2-beta-2/

Questo è come mi sto definendo il mio oggetto di dati:

Ext.define('MyTabApp.view.CartListItem', { 
    extend : 'Ext.dataview.component.DataItem', 
    alias : 'widget.cartlistitem', 
    requires: [ 
       'Ext.Img' 
    ], 
    config : { 
     cls: 'cart-list-item', 
     layout: { 
      type: 'hbox', 
      align: 'center' 
     }, 
     image: true, 
     details: { 
      cls: 'x-details', 
      flex: 3, 
     }, 
     pricing: { 
      cls: 'x-pricing', 
      flex: 1 
     }, 
     removeButton: { 
      iconCls  : 'delete', 
      iconMask : true, 
      ui   : 'astonvilla', 
      style  : 'margin-left: 5px; margin-top:10px; padding:5px;' 
     }, 
     moveButton: { 
      iconCls  : 'reply', 
      iconMask : true, 
      ui   : 'astonvilla', 
      style  : 'margin-left: 5px; margin-top:10px; padding:5px;' 
     }, 
     editButton: { 
      iconCls  : 'compose', 
      iconMask : true, 
      ui   : 'astonvilla', 
      style  : 'margin-left: 5px; margin-top:10px; padding:5px;' 
     }, 
     dataMap: { 
      getImage: { 
       setSrc   : 'itemImage' 
      }, 

      getDetails: { 
       setItemTitle : 'title', 
       setQuantity  : 'quantity' 
      }, 

      getPricing: { 
       setHtml   : 'totalPrice' 
      }, 
     }, 
    }, 
    applyImage: function(config) { 
     return Ext.factory(config, Ext.Img, this.getImage()); 
    }, 

    updateImage: function(newImage, oldImage) { 
     if (newImage) { 
      this.add(newImage); 
     } 

     if (oldImage) { 
      this.remove(oldImage); 
     } 
    }, 

    applyDetails: function(config) { 
     console.log("applyDetails"); 
     var details = Ext.factory(config, MyTabApp.view.CartListItemDetails, this.getDetails()); 
     console.log("applyDetails done"); 
     console.log(details); 
     return details; 
    }, 

    updateDetails: function(newDetails, oldDetails) { 
     console.log("updateDetails"); 
     if (newDetails) { 
      this.add(newDetails); 
     } 

     if (oldDetails) { 
      this.remove(oldDetails); 
     } 
    }, 

    applyPricing: function(config) { 
     return Ext.factory(config, Ext.Component, this.getPricing()); 
    }, 

    updatePricing: function(newPricing, oldPricing) { 
     if (newPricing) { 
      this.add(newPricing); 
     } 

     if (oldPricing) { 
      this.remove(oldPricing); 
     } 
    }, 

    applyRemoveButton: function(config) { 
     return Ext.factory(config, Ext.Button, this.getRemoveButton()); 
    }, 

    updateRemoveButton: function(newRemoveButton, oldRemoveButton) { 
     if (oldRemoveButton) { 
      this.remove(oldRemoveButton); 
     } 

     if (newRemoveButton) { 
      // add an event listeners for the `tap` event onto the new button, and tell it to call the onNameButtonTap method 
      // when it happens 
      newRemoveButton.on('tap', this.onRemoveButtonTap, this); 

      this.add(newRemoveButton); 
     } 
    }, 

    onRemoveButtonTap: function(button, e) { 
     var record = this.getRecord(); 

     Ext.Msg.alert(
      record.get('title'), // the title of the alert 
      "Id of this item is: " + record.get('itemId') // the message of the alert 
     ); 
    }, 

    applyEditButton: function(config) { 
     return Ext.factory(config, Ext.Button, this.getEditButton()); 
    }, 

    updateEditButton: function(newEditButton, oldEditButton) { 
     if (oldEditButton) { 
      this.remove(oldEditButton); 
     } 

     if (newEditButton) { 
      // add an event listeners for the `tap` event onto the new button, and tell it to call the onNameButtonTap method 
      // when it happens 
      newEditButton.on('tap', this.onEditButtonTap, this); 

      this.add(newEditButton); 
     } 
    }, 

    onEditButtonTap: function(button, e) { 
     var record = this.getRecord(); 

     Ext.Msg.alert(
      record.get('title'), // the title of the alert 
      "Id of this item is: " + record.get('itemId') // the message of the alert 
     ); 
    }, 

    applyMoveButton: function(config) { 
     return Ext.factory(config, Ext.Button, this.getMoveButton()); 
    }, 

    updateMoveButton: function(newMoveButton, oldMoveButton) { 
     if (oldMoveButton) { 
      this.remove(oldMoveButton); 
     } 

     if (newMoveButton) { 
      // add an event listeners for the `tap` event onto the new button, and tell it to call the onNameButtonTap method 
      // when it happens 
      newMoveButton.on('tap', this.onMoveButtonTap, this); 

      this.add(newMoveButton); 
     } 
    }, 

    onMoveButtonTap: function(button, e) { 
     var record = this.getRecord(); 

     Ext.Msg.alert(
      record.get('title'), // the title of the alert 
      "Id of this item is: " + record.get('itemId') // the message of the alert 
     ); 
    } 
}); 

E la sezione centrale, che io chiamo details è definito come visualizzazione personalizzata con vbox layout è definito come questo :

Ext.define('MyTabApp.view.CartListItemDetails', { 
    extend : 'Ext.Component', 
    alias : 'widget.cartlistitemdetails', 
    config : { 
     cls  : 'x-details', 
     flex : 3, 
     layout : 'vbox', 
     titleCell: null, 
     qtyCell: null, 
     items : [{ 
      xtype : 'panel', 
      flex : 1, 
      itemId : 'titleCell', 
      html : 'blahblah' 
     }, 
     { 
      xtype : 'component', 
      flex : 1, 
      itemId : 'qtyCell', 
      html : 'blahblah' 
     }], 
    }, 
    setItemTitle : function(title){ 
//  this.down('#titleCell').setHtml(title); 
     console.log(this.getItems()); 
     this.getItems()[0].html = title; 
    }, 
    setQuantity : function(qty){ 
//  this.down('#qtyCell').setHtml(qty); 
     console.log(this.getItems()); 
     this.getItems()[0].html = qty; 
    } 
}); 

Questo sta rendendo voci di elenco con immagini, prezzi & pulsanti allineate orizzontalmente. La sezione centrale che è un componente personalizzato non viene renderizzata. Se ho Inspect Element è come viene generato html:

<div class="x-details x-layout-box-item x-flexed x-stretched" id="ext-cartlistitemdetails-1" style="-webkit-box-flex: 3;"></div> 

come potete vedere non c'è nulla all'interno di questo div, e questo è come viene reso:

Sembra che io sono vicino perché il metodo setItemTitle viene chiamato ma ancora this.down('#titleCell').setHtml(title) o this.getItems()[0].html = title; non funziona.

Answer 1

Stavo anche cercando di implementare un layout di dati complessi. Sto usando il pannello di vbox all'interno degli elementi di hbox e in grado di implementarlo.

Check it out https://github.com/tomalex0/senchatouch-complex-dataitem

Demo http://tomalex0.github.io/senchatouch-complex-dataitem/

Provatelo e fatemi sapere se funziona per voi.