PDA

View Full Version : TwinTrigger Question



jhoweaa
20 Mar 2014, 6:31 AM
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

scottmartin
20 Mar 2014, 8:00 AM
Perhaps this UX may be of interest to you:
http://www.sencha.com/forum/showthread.php?132775
Demo:
http://www.eekboom.de/ClearButton.html

jhoweaa
20 Mar 2014, 9:26 AM
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.

firefoxSafari
20 Mar 2014, 10:51 AM
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,


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

jhoweaa
20 Mar 2014, 10:54 AM
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!

firefoxSafari
20 Mar 2014, 10:59 AM
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.



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