View Full Version : Deselect ListItem on Tap?

18 Mar 2011, 2:22 PM
Sorry, it's me again. It's been a long day today and I'm tired so perhaps I missed it, but I can't get the items in a List to deselect when showing an ActionSheet.

Essentially, I want the list to display an ActionSheet when the user taps an item. I've got all of this working without problem, but for I can't figure out to remove the selected class once the ActionSheet has been displayed. Here's a screenshot of the situation at the moment:


As you can see, the item is still selected underneath the overlay. Any idea how I can prevent it from remaining selected?


19 Mar 2011, 3:32 AM
You could call the deselect method of the Ext.List class when you show the action sheet passing in the output of the getSelectedRecords method?

19 Mar 2011, 5:11 AM
Thanks Stoot, this is the solution I have at the moment, but just wondered if there was a parameter built into the List constructor?


20 Mar 2011, 7:54 AM
Back again, and still not able to solve the problem here - sorry to be such a pain.

Here's the function I have bound to the itemTap event:

itemTap: function(list, index)
// Deselect the selected record:
var currentRecord = list.getStore().getAt(index);
currentRecord.forename = currentRecord.get('forename');
currentRecord.surname = currentRecord.get('surname');
currentRecord.phoneNumber = currentRecord.get('phoneNumber');
currentRecord.shortFullName = currentRecord.forename + ' ' + currentRecord.surname[0];

list.getStore().deselect(index, true);

callButton.setText('Call ' + currentRecord.shortFullName + ' (' + currentRecord.phoneNumber + ')');
unfriendButton.setText('Remove ' + currentRecord.shortFullName + ' as friend');

However, this seems to return the error:
Object [object Object] has no method 'deselect'. Can anyone shed any light on the matter?


20 Mar 2011, 7:58 AM
I think the deselect method is a method of the List rather than the store.

20 Mar 2011, 8:01 AM
Thanks for the quick reply, that seems to have prevented the error from occurring, but no deselect occurs. Am I using the method correctly?

list.deselect(list.getStore().getAt(index), true);

20 Mar 2011, 11:06 AM
It seems that calling list.refresh() removes the highlighting, but also prevents the item from appearing in the 'x-view-selected' completely, which I don't think is good for HCI (there's no feedback to the user as to which list item was tapped.

I noticed that if I remove the showing of the ActionSheet, the list item remains selected unless I tap another item, in which case the latter is given the blue 'selected' class. Surely there must be away to deselect the current list item in Sencha, since the built-in methods of the ListView seem to achieve it? Any help?


20 Mar 2011, 5:28 PM
This is how i do it on my lists:

listeners: {
itemtap: function(dv, ix, item, e) {
// Delay the selection clear
// so they get a nice blue flash for HCI's sake

21 Mar 2011, 2:02 AM
Hi Chris,

That was fantastic and did the job precisely. Thanks for your help!

Best regards,

8 Oct 2012, 9:50 PM
In Sencha Touch 2, we can add a config while creating a list as disableSelection: true

extend: 'Ext.List',
xtype: NEWS_LIST,

config: {
store: NEWS_FEED,
//deselectOnContainerClick: true,// not working in Sencha Touch 2
disableSelection: true, // since Sencha Touch 2
itemTpl: '{heading}'

5 Nov 2012, 10:47 AM
In sencha touch 1.x it is also possible. When creating list you can specify:
disableSelection: true/false,
multiSelect: true/false,
allowDeselect: true/false,

And you can also select/deselect from code, using SelecionModel:

var SM = list.getSelectionModel(); // list = some Ext.List component

SM.select(0); //selects an item specified by index