ListTtem

Question

की वस्तुओं की संपत्ति पर XTemplate परिभाषा मैं सेन्चा 2.3.0 का उपयोग कर रहा हूं और मैं ListTtem पर एक घटक (टेक्स्टफील्ड) के लिए एक XTemplate साइड-टू-साइड रखना चाहता हूं। उपरोक्त कोड DataView/DataItem के लिए ठीक काम करता है, लेकिन मैं समूहीकृत संपत्ति का उपयोग करना चाहता हूं जो केवल सूची/ListItem पर उपलब्ध है।

नेस्टेड एक्सटेम्प्लेट को डेटाइटम के रूप में ठीक किया जाता है। मैं इसे ListItem के लिए कैसे काम कर सकता हूं? मैं उन समाधानों के लिए भी ग्रहणशील हूं जो इस घोंसले की संरचना को छोड़ते हैं और xtemplate का उपयोग सीधे सूची सूची पर टीपीएल संपत्ति के रूप में करते हैं (बेशक श्रोताओं के साथ टेक्स्टफील्ड भी लागू किया जाना चाहिए)।

सूची

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

अग्रिम धन्यवाद!

Answer 1

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

मॉडल:

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

    } 
     }); 

दुकान

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

सूची

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