Create DataItem in Dataview Sencha Touch 2

[Kikketer]

I'm not sure if it's possible to put buttons inside a template. So for your case I would actually use an hbox.

layout: 'hbox'
items : [
  {
    xtype : 'component',
    html : 'something?',
    tpl : '{item1}'
  },
  {
    xtype : 'button'
  },
  {
    xtype : 'button'
  }
]

Pardon the strange code, I wrote it directly in here, so there may be a couple flaws.
I hope this is what you are trying to do, or helps in some way.

[hjeDK]

Not quite.
I'm trying to adapt this example of a component list:
http://www.sencha.com/blog/dive-into...touch-2-beta-2

with a label and two buttons on each item. however I don't know where to put the template. For now I got it running using only one field as described in the example from the blog.

[bluehipy]

Depends on how you want to do it.

Why do you want components? In most cases List with itemTpl is better, mpov.

[hjeDK]

I know, but in this situation I need two buttons to appear in the list when an item is swiped.

[bluehipy]

You have to:
1) Define a custom component, maybe extending Ext.Container, which has the desired items and functionality.
2) Define a custom component extending Ext.dataview.component.DataItem as described in documentation with a xtype:'myItemRenderer', http://docs.sencha.com/touch/2-0/#!/guide/dataview
3) Instead of list use DataView with useComponents:true and defaultType:'myItemRenderer'

[hjeDK]

Thanks.
I think what I need is you point #1. a custom component to accepting a template. I have everything else in place.

[Kikketer]

I've personally done #2 and #3 and it seemed to work ok. But I'm no expert and I'm sure my code is a laughing point for sencha experts

[bluehipy]

I don't think so

#1 is the easy one :

Ext.define("MyApp.namespace.CustomItem",
{
  extend:"Ext.Container",
  config:{
    layout:'hbox',
    items:[
      {xtype:'label',html:'damn!'},
      {xtype:''button", action:'action1', hidden:true},
      {xtype:''button", action:'action2', hidden:true}
    ]
  },
  initialize:function()
  {
           this.callParent(arguments);
          //add custom behavior
         this.label = this.down('label');
         this.btn1 =  this.down('button[action=action1]');
         this.btn2 =  this.down('button[action=action2]');
        //swipe event ?!?!
        this.label.on('tap', this.onLabelSwiped, this);
        //tap buttons
        this.btn1.on('tap',this.onAction1,this);
        this.btn2.on('tap',this.onAction2,this);
   },
//handlers
onLabelSwiped:function()
{
       this.btn1.show();
       this.btn2.show();
       this.fireEvent('labelswiped'); //eventually
},
onAction1:function()
{
   //your thing here
    this.fireEvent('listitemaction1');

},
onAction2:function()
{
   //your thing here
    this.fireEvent('listitemaction2');
},
//entry points for the dataitem wrapper
// in your dataitem implementation
// datamap :{
// getComponent:{
// setLabel: 'model_field_for_label'
//}
//}
setLabel:function(value)
{
       this.label.setHtml(value);
}
}); 

or not so easy...

[hjeDK]

I see your point with you code. and I think that's kind of what I have so far. but do I need a label-component for each field? or how can I do this? My model contains several fields that I want to combine into that single label.
The easiest work around I can come up with is combining all those fields in to a single one already in my php-code that provides the data to my app.

[bluehipy]

Sorry you didn't get it

Try reading all the documentation and come back:
http://docs.sencha.com/touch/2-0/#!/guide