Selected records on list are incorrect

[withanx]

Anyone know what I could be doing wrong? The selected item is incorrect when I log it to the console. It appears correct visually, but it returns the wrong record.



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady : function() {
Ext.regModel('Location', {
fields: ['name', 'state_name']
});

var locationListBase = {
listeners: {
itemtap: function(list, subIdx, el, e){
var selected = list.getSelectedRecords();
console.info(selected) // Returns the wrong record, not the actually selected one
}
},
itemTpl: '<div class="contact2"><strong>{name}</strong></div>',
grouped: true,
store: new Ext.data.Store({
model: 'Location',
sorters: 'name',
getGroupString: function(record) {
return record.get('state_name');
},
proxy: {
type: 'ajax',
url : '/locations.json',
reader: {
type: 'json'
}
},
autoLoad: true
})
};

var location_list = new Ext.List(locationListBase);

var p = new Ext.Panel({
fullscreen: true,
dockedItems: [
{
dock : 'top',
xtype: 'toolbar',
title: 'App Title'
},
],
layout: 'card',
items: [location_list,{
html: 'Card 2'
}]
});
p.setActiveItem(0);
X = p
}
});


The JSON data returned looks like this:



[{"name":"Birmingham, MI","state_name":"Michigan"},{"name":"Cincinnati, OH","state_name":"Ohio"},{"name":"Farmington Hills/Farmington","state_name":"Michigan"},{"name":"Royal Oak, MI","state_name":"Michigan"},{"name":"Waterford, MI","state_name":"Michigan"},{"name":"West Bloomfield, MI","state_name":"Michigan"}]

[xnakxx]

the subIdx on the itemtap function be the index of the selected record within the list
http://dev.sencha.com/deploy/touch/docs/output/Ext.List.html#Ext.List-itemtap
then using getStore() and getAt() you can select the record from the store

[withanx]

This is still not working, same result as last with the wrong record being selected. Is it because of grouping?

I changed the code as you suggested to:



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady : function() {
Ext.regModel('Location', {
fields: ['name', 'state_name']
});

var locationListBase = {
listeners: {
itemtap: function(list, subIdx, el, e){
// Changed here:
var selected = list.getStore().getAt(subIdx)
console.info(selected) // Returns the wrong record, not the actually selected one
}
},
itemTpl: '<div class="contact2"><strong>{name}</strong></div>',
grouped: true,
store: new Ext.data.Store({
model: 'Location',
sorters: 'name',
getGroupString: function(record) {
return record.get('state_name');
},
proxy: {
type: 'ajax',
url : '/locations.json',
reader: {
type: 'json'
}
},
autoLoad: true
})
};

var location_list = new Ext.List(locationListBase);

var p = new Ext.Panel({
fullscreen: true,
dockedItems: [
{
dock : 'top',
xtype: 'toolbar',
title: 'App Title'
},
],
layout: 'card',
items: [location_list,{
html: 'Card 2'
}]
});
p.setActiveItem(0);
X = p
}
});

[withanx]

It does seem to be the grouping. It works as expected when grouped is set to false on the list.

[tomalex0]

Me too encountered similar issue.

http://www.sencha.com/forum/showthread.php?116960-List-Store-index-is-not-sorted-based-on-Grouping.

[withanx]

I'm still unable to get any kind of selection working with grouped lists. I'm assuming I must be doing something wrong or everyone's apps would be broken. This seems like a pretty major feature. Anyone see what's wrong with my code?

[withanx]

It does work fine if I return the JSON in the exact order it will appear in when grouped and turn off the sorter option.

[holmesjr]

I was able to get around this issue with this:


listeners: {
itemTap: function (dv, index, item, e) {
var allItems = [];
var groupedItems = dv.getStore().getGroups();
for (var i=0; i<groupedItems.length; i++) {
allItems = allItems.concat(groupedItems[i].children);
}
var clickedItem = allItems[index];
}
}

[SimonFlack]

That worked for me too... Thanks ;-)