Search code examples
javascriptextjsextjs4

ExtJs - Textfield with dynamic closeable labels

I am using ExtJS 4 and I need to implement something similar to the closable labels that you get in GMail when typing an email address in a textfield (see screenshot below). I've been reviewing the ExtJS library and the closest I see to this is to provide some type of layout with custom closable panels or to use CellEditing with a grid, but I still haven't seen a way to do it with a textfield.

So my question is, am I in the right track or is there another component I should consider that would be more suitable for the job? Additionally, if somebody could point or provide a code example with something closer what I have in the screenshot then that would be also very helpful.

GMail - Email Labels

Solution

  • As you are on ExtJS 4, You should look into BoxSelect.

    Here and there you may need to make necessary customizations. But high-level this is pretty decent field for inputing tags for Ext-4.

    In-fact the Tag field in ExtJS5 is inspired by BoxSelect.