1. #1
    Sencha User
    Join Date
    Mar 2011
    Location
    Lincoln, UK
    Posts
    27
    Vote Rating
    0
    BenMajor is on a distinguished road

      0  

    Default Deselect ListItem on Tap?

    Deselect ListItem on Tap?


    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.
    Attached Images

  2. #2
    Sencha Premium Member
    Join Date
    Feb 2009
    Location
    Glasgow, Scotland
    Posts
    309
    Vote Rating
    9
    Stuart-SwarmOnline will become famous soon enough

      0  

    Default


    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?

  3. #3
    Sencha User
    Join Date
    Mar 2011
    Location
    Lincoln, UK
    Posts
    27
    Vote Rating
    0
    BenMajor is on a distinguished road

      0  

    Default


    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.

  4. #4
    Sencha User
    Join Date
    Mar 2011
    Location
    Lincoln, UK
    Posts
    27
    Vote Rating
    0
    BenMajor is on a distinguished road

      0  

    Default


    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:

    Code:
    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:
    Code:
    Object [object Object] has no method 'deselect'
    . Can anyone shed any light on the matter?

    Thanks,
    Ben.

  5. #5
    Sencha Premium Member
    Join Date
    Feb 2009
    Location
    Glasgow, Scotland
    Posts
    309
    Vote Rating
    9
    Stuart-SwarmOnline will become famous soon enough

      0  

    Default


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

  6. #6
    Sencha User
    Join Date
    Mar 2011
    Location
    Lincoln, UK
    Posts
    27
    Vote Rating
    0
    BenMajor is on a distinguished road

      0  

    Default


    Thanks for the quick reply, that seems to have prevented the error from occurring, but no deselect occurs. Am I using the method correctly?

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

  7. #7
    Sencha User
    Join Date
    Mar 2011
    Location
    Lincoln, UK
    Posts
    27
    Vote Rating
    0
    BenMajor is on a distinguished road

      0  

    Default


    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.

  8. #8
    Sencha User d5chris's Avatar
    Join Date
    Feb 2011
    Location
    Sydney
    Posts
    59
    Vote Rating
    2
    d5chris is on a distinguished road

      1  

    Default


    This is how i do it on my lists:

    Code:
    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);
    	}
    }

  9. #9
    Sencha User
    Join Date
    Mar 2011
    Location
    Lincoln, UK
    Posts
    27
    Vote Rating
    0
    BenMajor is on a distinguished road

      0  

    Default


    Hi Chris,

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

    Best regards,
    Ben.

  10. #10
    Sencha User
    Join Date
    Aug 2012
    Posts
    2
    Vote Rating
    0
    SachinWarke is on a distinguished road

      0  

    Default


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

    Code:
    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}'
        } 
    });

Similar Threads

  1. Button in listitem
    By J-zY in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 18 Mar 2011, 12:20 AM
  2. datepicker deselect value
    By nicobarten in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 8 Mar 2010, 5:48 AM
  3. GridPanel deselect
    By bello in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 14 Feb 2010, 10:17 AM
  4. [already on its way] Ext.View - deselect
    By andrei.neculau in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 22 Sep 2007, 10:34 PM
  5. Help Deselect Tab
    By reang in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 9 Apr 2007, 2:26 AM

Thread Participants: 4