View Full Version : Ext.ux.form.MultiTriggerField

2 Aug 2008, 2:18 PM
My first extension shared. Have fun.

Basically, it's a heavily modified version of the dual trigger included, but undocumented, in the main library.

I'm not sure that I've done everything completely in line with the API - I think that I'm only 80% of the way toward knowing the Ext code base as I hope to eventually. So, that said - all suggestions welcome.

Documentation is included, but I'll cover a quick summary here:

Basically it creates a compound field with a text box and triggers (as many as you want, but don't go crazy) ;) - such as a combo box with more than one trigger.

Each trigger can be configured to appear to the right (default) or the left of the primary field (the textbox) and each can have a handler attached, via multiple means - including the ability to set events to be raised on click. The latter was something I noticed missing from either the triggerfield of dual triggerfield in the 2.1 code base.

I have tested on 2.1 only.

You can also set relaying of events, so that any event raised by a trigger click can be forwarded to another observable.

My hat in the air to Jack and Co ... because this was much easier than anticipated. The Ext code base is a fantastic primer in OO for anyone wanting to learn, or a very easily extended base, for anyone past that stage. Okay, suck-up over :) - though I meant every word. The base class took less that an hour to cobble. The documentation took longer.

Note: images for the left hand side versions of triggers (standard, date, search and close) are included. I have them also for the grey theme so just ask if you want them. For any other theme, it is easy to convert - load right hand versions into adobe/whatever ... horizontally flip every 17 pixel block in place and you are done). Easy.

Ahem. So yes - screen shots below and Extension attached.

I hate extracting 'test bundles' to the examples folder because it just gets too cluttered, so it is set to run in a web root directory. Fear not, everything extracts to it's own directory there. It also makes assumptions about paths such as ext/ so adjust as required.

The samples show most of the options available (including an auto blur for the text field on enter key, for the second panel).

Any questions, just ask.

Oh - the 2nd panel on the example page also shows how to set a trigger to open a menu.

Anyway - read the documentation for the rest - or just ask (please -AFTER you read ... unless you want me giving you this face! :(( ).

I am now working on several fields that extend this, such as a text field (with an arrow either side) that will allow scrolling through edit-history. That one is almost done already.

Anyway - is late here - is tired. Night. :)


18 Apr 2009, 2:39 PM
I was looking for that. Great job! But, anyway to plug this in Ext.form.* fields? Or maybe set a "xtype" attribute for the field... For example, i want a datefield with a custom trigger icon on the left side. I need it because i want define rules for grid filters fields. See http://www.extjs.com/forum/showthread.php?t=65340 for details.