Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Deselect ListItem on Tap?

  1. #1
    Sencha User
    Join Date
    Mar 2011
    Location
    Lincoln, UK
    Posts
    27
    Vote Rating
    0
      0  

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

  2. #2
    Sencha Premium Member StuartAshworth's Avatar
    Join Date
    Feb 2009
    Location
    Glasgow, Scotland
    Posts
    405
    Vote Rating
    37
      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?
    SenchaTalk.com - a premium Slack community for all things Sencha. Join Now!

    Learn Ext JS 6 with my new ebook - Ext JS 6: Getting Started. Get a Sample Chapter now!

    Need help with Sencha development, code reviews or training? Get in touch!

    stuart@stuartashworth.com
    @StuartAshworth9

  3. #3
    Sencha User
    Join Date
    Mar 2011
    Location
    Lincoln, UK
    Posts
    27
    Vote Rating
    0
      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
      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 StuartAshworth's Avatar
    Join Date
    Feb 2009
    Location
    Glasgow, Scotland
    Posts
    405
    Vote Rating
    37
      0  

    Default

    I think the deselect method is a method of the List rather than the store.
    SenchaTalk.com - a premium Slack community for all things Sencha. Join Now!

    Learn Ext JS 6 with my new ebook - Ext JS 6: Getting Started. Get a Sample Chapter now!

    Need help with Sencha development, code reviews or training? Get in touch!

    stuart@stuartashworth.com
    @StuartAshworth9

  6. #6
    Sencha User
    Join Date
    Mar 2011
    Location
    Lincoln, UK
    Posts
    27
    Vote Rating
    0
      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
      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
      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
      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
      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}'
        } 
    });

Page 1 of 2 12 LastLast

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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •