Deselect ListItem on Tap?

[BenMajor]

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?

Thanks,
Ben.

[Stoot98]

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?

[BenMajor]

Thanks Stoot, this is the solution I have at the moment, but just wondered if there was a parameter built into the List constructor?

Regards,
Ben.

[BenMajor]

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');
    friendActionSheet.show();
}

However, this seems to return the error:

Object [object Object] has no method 'deselect'

. Can anyone shed any light on the matter?

Thanks,
Ben.

[Stoot98]

I think the deselect method is a method of the List rather than the store.

[BenMajor]

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);

[BenMajor]

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?

Thanks,
Ben.

[d5chris]

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
		setTimeout(function(){dv.deselect(ix);},500);
	}
}

[BenMajor]

Hi Chris,

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

Best regards,
Ben.

[SachinWarke]

In Sencha Touch 2, we can add a config while creating a list as disableSelection: true

Ext.define('App.view.NewsList',{    
    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}'
    } 
});