Results 1 to 6 of 6

Thread: TwinTrigger Question

  1. #1
    Sencha Premium Member
    Join Date
    Apr 2009
    Posts
    290
    Answers
    9
    Vote Rating
    21
      0  

    Default TwinTrigger Question

    In Ext JS 3.x, I used a 'twin trigger' combo box to implement a search field. The box displayed one or two triggers at a time, depending on whether there was data entered into the text field. I know how to create a twin trigger field in Ext JS 4, I just need to specify additional trigger classes, what I'm not clear on how to do is to selectively hide and show just one of the triggers. For example, when the field is first visible, I want the first trigger to be hidden (x-form-clear-trigger), but to show the second trigger (x-form-search-trigger). When the user enters text in the field I want to show the first trigger. When the user clicks the first trigger I want to clear the field and have the trigger disappear. I can capture all the events I need to make this work, I just don't know how to selectively turn a trigger on and off and have the layout look correct.

    Any help would be appreciated.

    Thanks.

    Jim

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716
    Vote Rating
    504
      0  

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2009
    Posts
    290
    Answers
    9
    Vote Rating
    21
      0  

    Default

    That looks like it might be a useful plugin to use. It still seems to me that if the Trigger field is designed to display multiple triggers, there should be some way to hide specific triggers. Looking at the Trigger field code I don't see any functionality that would support that, however.

  4. #4
    Sencha Premium User
    Join Date
    Jan 2009
    Posts
    452
    Answers
    19
    Vote Rating
    242
      0  

    Default

    It would be nice if API methods were exposed for this. However, it is still possible. The idea is to use the triggerEl property, get the trigger by index, get its table cell, and hide / show it. For example,

    Code:
    this.triggerEl.item(0).up('td').show();

  5. #5
    Sencha Premium Member
    Join Date
    Apr 2009
    Posts
    290
    Answers
    9
    Vote Rating
    21
      0  

    Default

    Thanks for the tip. My guess is that I would also have to do something with regenerating the layout because showing/hiding of a trigger will shorten/lengthen the input field. I'm going to look at how the regular trigger gets hidden and see if I can work out a way to hide/show an arbitrary trigger (unless someone provides more info in the interim).

    Thanks again!

  6. #6
    Sencha Premium User
    Join Date
    Jan 2009
    Posts
    452
    Answers
    19
    Vote Rating
    242
      0  

    Default

    I think you can exert some control over whether the input field gets shortened or not by using the visibility mode when you hide / show. For example, using DISPLAY should cause the trigger not to take up space.

    Code:
                
    this.triggerEl.item(0).up('td').setVisibilityMode(Ext.Element.DISPLAY).hide();

Posting Permissions

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