XTemplate tanımı bir List'ın özelliği üzerinde özellik I

Question

Sencha 2.3.0 kullanıyorum ve bir XTemplate bir ListItem üzerinde bir bileşen (textfield) yan yana olması istiyorum. Yukarıdaki kod DataView/DataItem için iyi çalışıyor, ancak yalnızca List/ListItem'de bulunan gruplanmış mülk kullanmak istiyorum.

Yuvalanmış Xtemplate, DataItem öğesi olarak iyi işlenir. ListItem için nasıl çalışabilirim? Ben de bu iç içe geçmiş yapıyı bırakan ve xtemplate'i tI özelliği olarak doğrudan ListItem üzerinde kullanan çözümler için alışığım (tabii ki dinleyicileri olan metin alanı da uygulanmalıdır). peşin

liste

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

teşekkürler!

Answer 1

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

modeli:

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

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

    } 
     }); 

deposu

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

listesine

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