PDA

View Full Version : Getting item id / item content from a list populated by AJAX



Rohall
9 Jul 2010, 8:29 AM
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
9 Jul 2010, 8:42 AM
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
13 Jul 2010, 11:44 AM
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
16 Jul 2010, 10:46 AM
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
18 Jul 2010, 9:17 PM
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
19 Jul 2010, 11:51 PM
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
23 Jul 2010, 12:53 AM
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
23 Jul 2010, 7:48 AM
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