Getting item id / item content from a list populated by AJAX

[Rohall]

Hi everyone,
I'm hoping that someone may have done something similar and can point me in the right direction. I have an Ext.List object which has been populated by an .update() from an AJAX call. This part is working well, but when I added an "itemtap" listener I'm only getting IDs of -1 and I'm not sure how else I can determine which item in the list was selected (except maybe checking the classes, but I'd rather avoid this approach if at all possible).

Any tips would be greatly appreciated, thanks in advance!

[Rohall]

Ok so I've started using .innerHTML to get the content from the list item. I believe this will work, but if there is a better/more standardized way please let me know!

Thanks again

[TommyMaintz]

The itemtap event should get the following parameters in this order

- The list
- The index of the item that has been tapped
- The item that has been tapped
- The tap event object

[d2ncal]

I am having the same problem.

I have a list, that is populated using update. The list renders fine, but all the itemtap events returns index as '-1/'.

Below are code snippets:

Test.userlist = Ext.extend(Ext.List, {
	itemSelector: '.list-item',
	singleSelect: true,
        tpl: '<tpl for="."><div class="list-item"><strong>{username}</strong> {status}</div></tpl>',

	initComponent: function() {		
		Test.userlist.superclass.initComponent.call(this);
		
		this.on('itemtap', function(dataview, index, item, e) { 
			console.log("Tapped index " + index + " dataview "  + dataview);
		});
	}
	
});

I can use the hack like Rohall mentioned (by using .innerHTML), but would much rather figure out why doesn't the event not return accurate index / item.

Thanks,
DD.

[evant]

It's difficult to say with just that, a slight modification to the list example behaves as I would expect:

Test = {};
Test.userlist = Ext.extend(Ext.List, {
    itemSelector: '.list-item',
    singleSelect: true,
    tpl: '<tpl for="."><div class="list-item"><strong>{firstName}</strong> {lastName}</div></tpl>',
    
    initComponent: function(){
        Test.userlist.superclass.initComponent.call(this);
        
        this.on('itemtap', function(dataview, index, item, e){
            alert(index);
        });
    }
    
});

Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function(){
        Ext.regModel('Contact', {
            fields: ['firstName', 'lastName']
        });
        
        var groupingBase = {
            tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
            itemSelector: 'div.contact',
            
            singleSelect: true,
            grouped: true,
            indexBar: true,
            
            store: new Ext.data.Store({
                model: 'Contact',
                sorters: 'firstName',
                
                getGroupString: function(record){
                    return record.get('firstName')[0];
                },
                
                data: [{
                    firstName: 'Tommy',
                    lastName: 'Maintz'
                }, {
                    firstName: 'Ed',
                    lastName: 'Spencer'
                }, {
                    firstName: 'Jamie',
                    lastName: 'Avins'
                }, {
                    firstName: 'Aaron',
                    lastName: 'Conran'
                }, {
                    firstName: 'Dave',
                    lastName: 'Kaneda'
                }, {
                    firstName: 'Michael',
                    lastName: 'Mullany'
                }]
            })
        };
        
        if (!Ext.platform.isPhone) {
            new Test.userlist(Ext.apply(groupingBase, {
                floating: true,
                width: 350,
                height: 350,
                centered: true,
                modal: true,
                hideOnMaskTap: false
            })).show();
        } else {
            new Test.userlist(Ext.apply(groupingBase, {
                fullscreen: true
            }));
        }
    }
});

[d2ncal]

Thanks. I know what's wrong now.

The events are reporting correct index/object if Ext.Store is used in the underlying structure for list. However, if data is directly used, it does not work.

For example, in your code sample, if you change groupingBase to as following, the list will get rendered properly but events will not have the correct index.

var groupingBase = {
            tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
            itemSelector: 'div.contact',
            
            singleSelect: true,
            grouped: false,
            indexBar: true,
                data: [{
                    firstName: 'Tommy',
                    lastName: 'Maintz'
                }, {
                    firstName: 'Ed',
                    lastName: 'Spencer'
                }, {
                    firstName: 'Jamie',
                    lastName: 'Avins'
                }, {
                    firstName: 'Aaron',
                    lastName: 'Conran'
                }, {
                    firstName: 'Dave',
                    lastName: 'Kaneda'
                }, {
                    firstName: 'Michael',
                    lastName: 'Mullany'
                }]
             };

[ssdesign]

Hi,
This is really great.
Worked for me.

Further question.

I am getting the index values correct, but I dont know how to extract data from this?

For example:

alert(dataview) // gives me [object, objct]
alert(e) // gives me [object, objct]
alert(item) // gives me [object HTMLDivElement]

How do I get more information from inner HTML.

My tpl looks like this:

tpl: '<tpl for="."><tpl if="5==5"><div class="glyph">{glyph}</div></tpl></tpl>'

[ssdesign]

hi,
somehow my previous post never appeared and went into moderation.

so i ask again

this solution worked for me but somehow i cant understand what does 'item', 'dataview' and 'e' supposed to return.

i get:

alert(dataview); // [Object Object]
alert(item); // [Object HTMLDivElement]
alert(e); // [Object Object]

What does each of this return?
how can i get values from my Div?

thanks