REQUIRED INFORMATION


Ext version tested:
  • Sencha Touch 2.1
Browser versions tested against:
  • Chrome 23.0
Description:
  • As this thread, on Sencha Touch 2.1 I think that Ext.dataview.List can handle ListItem with components. So I tried to use ListItem, then it showed records in components. But the item tap event were not fired. It seems that components interrupt touch events.
Steps to reproduce the problem:
  • Define a class extended from Ext.dataview.List with configuration set as useComponents:true, defaultType:[correspond ListItem's xtype].
  • Define a class extended from Ext.dataview.component.ListItem.
  • Create a instance of the List class and add it as a main view.
The result that was expected:
  • Click a list item.
  • The itemtap event is fired.
The result that occurs instead:
  • Click a list item.
  • The itemtap event is never fired except a area around right end of each items.
Test Case:

List.js
Code:
Ext.define('WSChat.view.List', {
    extend: 'Ext.dataview.List',
    xtype: 'list',
    requires: [
        'Ext.data.Store',
        'WSChat.view.ListItem',
    ],
    config: {
        title: 'Names',
        store: {
            fields: ['name', 'age'],
            data: [
                {name: 'Jamie',  age: 100},
                {name: 'Rob',   age: 21},
                {name: 'Tommy', age: 24},
                {name: 'Jacky', age: 24},
                {name: 'Ed',   age: 26}
            ]
        },


        //itemTpl: '{name}:{age}',
        
        useComponents: true,
        defaultType: 'listitem',
        
        listeners: {
            itemtap: function( list, index, item, record){
                console.log(record);
                console.log('Item tapped:' + record.get('name'));
            },
        },
    }
});
ListItem.js
Code:
Ext.define('WSChat.view.ListItem', {
    extend: 'Ext.dataview.component.ListItem',
    xtype: 'listitem',
    requires: [
        'Ext.Panel',
        'Ext.Label',
    ],
    config: {
        layout: 'hbox',
        items: [
            {xtype: 'panel', itemId:'name', flex: 1, width: "100%", height: "100%"},
            {xtype: 'label', itemId:'age', docked: 'bottom', style: 'font-size: 75%'},
        ],
        listeners: {
            updatedata: function( listItem, newData, eOpts ){
                if(newData != null){
                    listItem.getComponent('name').setHtml(newData.name);
                    listItem.getComponent('age').setHtml(newData.age);
                }
            }
        }        
    },
});
HELPFUL INFORMATION


Debugging already done:
  • none
Possible fix:
  • not provided
Additional CSS used:
  • only default ext-all.css
Operating System:
  • Mac OS X 10.7.4