Definizione XTemplate sugli oggetti proprietà di un ListItem

Question

Sto usando Sencha 2.3.0 e voglio avere un XTemplate side-to-side a un componente (campo di testo) su un ListItem. Il codice sopra funziona bene per DataView/DataItem, ma voglio usare la proprietà raggruppata che è disponibile solo su List/ListItem.

Xtemplate nidificato viene sottoposto a rendering come DataItem. Come posso farlo funzionare per ListItem? Sono anche ricettivo per le soluzioni che abbandonano questa struttura nidificata e usano l'xtemplate come proprietà tpl direttamente su ListItem (ovviamente anche il campo di testo con gli ascoltatori deve essere implementato).

lista

Ext.define('app.view.myList', { 
    //extend: 'Ext.dataview.DataView', 
    extend: 'Ext.dataview.List', 

    xtype: 'mylist', 

    requires: [ 
     'app.view.MyItem' 
    ], 

    config: { 
     title: "myTitle", 
     cls: 'mylist', 
     defaultType: 'myitem', 
     grouped: true, 
     store: 'myStore', 
     useComponents: true, 
     itemCls: 'myitem', 

     items: [ 
      { 
       // some components 
      } 
     ] 
    } 
}); 

listitem

Ext.define('app.view.myItem', { 

    //extend: 'Ext.dataview.component.DataItem', 
    extend: 'Ext.dataview.component.ListItem', 
    xtype: 'myitem', 

    config: { 
     cls: 'myitem', 

     items: [ 
      { 
       xtype: 'component', 
       tpl: new Ext.XTemplate([ 
         '<table cellpadding="0" cellspacing="0" class="myitemXTemplate">', 
          //some xtemplate content 
         '</table>' 
        ].join(""), 
        { 
         compiled: true 
        }) 
      }, 

      { 
       label: 'some label', 
       cls : 'myitemtextfield', 
       xtype: 'textfield', 
       name: 'myitemtextfield' 
      } 
     ] 
    } 
}); 

Grazie in anticipo!

Answer 1

modifed /touch-2.4.2/examples/list/index.html

Il modello:

Ext.define('model1', { 
    extend: 'Ext.data.Model', 
    config: { 
     fields: [ 
      {name: 'firstName', type: 'string'}, 
      {name: 'lastName', type: 'string'} 
     ] 
    } 
}); 

Il CustomListItem

Ext.define('DataItem', { 
extend: 'Ext.dataview.component.ListItem', 
     xtype: 'basic-dataitem', 
     requires: [ 
       'Ext.Button', 
       'Ext.Component', 
       'Ext.layout.HBox', 
       'Ext.field.Checkbox' 
     ], 
     config: { 
     dataMap : { 
     /* getFirstname : { 
     setData : 'firstName' 

     },*/ 
     getLastname : { 
     setValue : 'lastName' 
     } 
     }, 
       layout: { 
       type: 'hbox', 
         height:'200px', 
       }, 
       firstname: { 
       cls: 'firstname', 
         xtype:'component', 
         data:{data:'hej'}, 
         tpl: new Ext.XTemplate([ 
           '<H1>', 
           '{data}', 
           '</H1>' 
         ].join(""), 
         { 
         compiled: true 
         }) 

       }, 
       lastname: { 
       xtype:'textfield', 
       css:'lastname' 



       } 

     }, 
     applyFirstname : function (config) { 
      return Ext.factory(config, Ext.Component, this.getFirstname()); 
     }, 
     updateFirstname : function (newName) { 
      if (newName) { 
       this.add(newName); 
      } 
     }, 
     applyLastname : function (config) { 
      return Ext.factory(config, Ext.Component, this.getLastname()); 
     }, 
     updateLastname : function (newAge) { 
      if (newAge) { 
       this.add(newAge); 
      } 
     }, 
     applyFirstName: function (config) { 
      return Ext.factory(config, 'Ext.Component', this.getLastname()); 
     }, 
     updateRecord: function(record) {  
     if (!record) { 
      return; 
     } 


     this.getFirstname().setData({data:record.get("firstName")}); 
     this.callParent(arguments); 

    } 
     }); 

Il negozio

var store = Ext.create('Ext.data.Store', { 
     //give the store some fields 
     model: 'model1', 
     //filter the data using the firstName field 
     sorters: 'firstName', 
     //autoload the data from the server 
     autoLoad: true, 
     //setup the grouping functionality to group by the first letter of the firstName field 
     grouper: { 
      groupFn: function (record) { 
       return record.get('firstName')[0]; 
      } 
     }, 
     //setup the proxy for the store to use an ajax proxy and give it a url to load 
     //the local contacts.json file 
     proxy: { 
      type: 'ajax', 
      url: 'contacts.json' 
     } 
    }); 

L'elenco

xtype: 'list', 
      useSimpleItems: false, 
      defaultType: 'basic-dataitem', 
      id: 'list', 
      ui: 'round',  
      //bind the store to this list 
      store: store