Custom xtypes as a cell in ext.listview

Question

I am using sencha touch 2 and not getting help inside sencha forum, so I hope you guys can help me.

I want to create a list with custom items. In this custom item i want to have a horizontal scrollable listview with buttons as items. I tried to do it component.DataItem but it does no work for me. I tried also to add an custom xtype als an item in a list, but this does not work.

I think this is a simple task but sencha touch makes it a challenge for me.

So please help me and show me, how can I get a view like shown in this picture.

Answer 1

Instead of a standard list you are going to want to use Component DataView. Essentially, you are going to need to first define an Ext.dataview.component.DataItem, which is then implemented into the DataView. Below is a simple example of a buttons in a DataView as referenced from the DataView guide: http://docs.sencha.com/touch/2-0/#!/guide/dataview

First create the DataItem:

Ext.define('MyApp.view.DataItemButton', {
    extend: 'Ext.dataview.component.DataItem',
    requires: ['Ext.Button'],
    xtype: 'dataitembutton',    
    config: {
        nameButton: true,    
        dataMap: {
            getNameButton: {
                setText: 'name'
            }
        }
    },    
    applyNameButton: function(config) {
        return Ext.factory(config, Ext.Button, this.getNameButton());
    },    
    updateNameButton: function(newNameButton, oldNameButton) {
        if (oldNameButton) {
            this.remove(oldNameButton);
        }

        if (newNameButton) {
            this.add(newNameButton);
        }
    }
});

• We must extend Ext.dataview.component.DataItem for each item. This is an abstract class which handles the record handling for each item.
• Below the extend we require Ext.Button. This is simply because we are going to insert a button inside our item component.
• We then specify the xtype for this item component.
• Inside our config block we define nameButton. This is a custom configuration we add to this component which will be transformed into a button by the class system. We set it to true by default, but this could also be a configuration block. This configuration will automatically generate getters and setters for our nameButton.
• Next we define the dataMap. The dataMap is a map between the data of a record and this view. The getNameButton is the getter for the instance you want to update; so in this case we want to get the nameButton configuration of this component. Then inside that block we give it the setter for that instance; in this case being setText and give it the field of the record we are passing. So, once this item component gets a record it will get the nameButton and then call setText with the name value of the record.
• Then we define the apply method for our nameButton. The apply method uses Ext.factory to transform the configuration passed into an instance of Ext.Button. That instance is then returned, which will then cause updateNameButton to be called. The updateNameButton method simply removes the old nameButton instance if it exists, and adds the new nameButton instance if it exists.

Now create the DataView:

Ext.create('Ext.DataView', {
    fullscreen: true,

    store: {
        fields: ['name', 'age'],
        data: [
            {name: 'Jamie Avins',  age: 100},
            {name: 'Rob Dougan',   age: 21},
            {name: 'Tommy Maintz', age: 24},
            {name: 'Jacky Nguyen', age: 24},
            {name: 'Ed Spencer',   age: 26}
        ]
    },

    useComponents: true,
    defaultType: 'dataitembutton'
});

In your case, rather than using a button for the DataItem, you'll want to use a horizontal scrolling list. Here is an example that I found from this answer: Horizontal scrolling list

var list = Ext.create('Ext.DataView',{
   store: store,
   itemTpl: new Ext.XTemplate('<img src="{icon}" />'),
   inline: { wrap: false },
   scrollable: {
     direction: 'horizontal',
     directionLock: true
   }
});

Note that you will probably have to use components in the second dataview as well in order to achieve your buttons with image