View Full Version : BoxSelect for Ext 4, another implementation

2 Jul 2011, 3:03 AM

when I discovered this (http://www.sencha.com/forum/showthread.php?134751-Ext.ux.form.field.BoxSelect-Intuitive-Multi-Select-ComboBox) thread by kveeiv, I was already almost through porting BoxSelect (http://www.sencha.com/forum/showthread.php?33794-Ext.ux.BoxSelect-(like-the-Facebook-s-one)) to Ext 4 (I decided to base my code on BoxSelect rather than SuperBoxSelect (http://www.sencha.com/forum/showthread.php?69307-3.x-Ext.ux.form.SuperBoxSelect), because I found the code cleaner and more concise).

After downloading and trying kveeiv's implementation, I decided to carry on with my own implementation, as to me it seems that kveeiv's version is essentially a multiselect combobox that displays the selected values differently (i.e. as little boxes instead of a comma-separated list) which is not what I needed. I needed the behaviour of the original BoxSelect. Also, I was having problems using queryMode=remote with kveeiv's implementation.

So in case anyone else is interested in it, here is my shot at it. In the end it's become more of a rewrite than a port of the original boxselect and it extends the original features: in addition to supporting LEFT and RIGHT for keyboard navigation, it supports SHIFT for selecting multiple values (by keyboard or mouse) and CTRL+A to select all values.
Also, it fully works with queryMode=remote, even better than the original combobox which I think is still having problems when the value you try to set is currently not in the local store, because the local store always only contains a subset of the remote store (if you are interested, see this (http://www.sencha.com/forum/showthread.php?75751-OPEN-42-ComboBox-s-setValue-call-with-a-remotely-loaded-Store)).
So if BoxSelect cannot find the value you are trying to set, in queryMode remote it assumes that the value is simply not loaded and sends a query to the store with a parameter named by valueField and all selected values as a comma-separated list as its value.

There is hardly any documentation in my code for the moment, but I will add it, if anyone is interested (no need to add it for myself).

Configuration is basically like a ComboBox.
setValue accepts an array of valueField values, an array of Model instances or an array of data objects.
setRawValue accepts a comma-separated string of valueField values
getValue and getRawValue return a comma-separated string of valueField values

If this is of any use to you, have a go at it and support me by reporting back problems and questions so that I can fix them. Or if anyone wants to set up a live demo...

- emptyText now working, both if placeholders are supported and if not
- text cursor over whole field
- displayTpl is used to render the value
- the selection/highlighting of item boxes is kept when the field loses focus and getSelectedItems() gives you access to them

4 Jul 2011, 7:11 AM
Thanks, I'll give it a try once I find time to port our app to ExtJS 4 which requires some UX to be ported first.

12 Jul 2011, 4:20 AM
Just downloaded your code,after reading your post I feel confident about it, I hope it works for me.
Some documentation would have been really nice.

12 Jul 2011, 4:28 AM

Great Work Kudos, I don't think will be having any issue, but will surely let you know if I have.
Once again great Job and Thank you very much for sharing your work. :)


Notes: In case you wanted to know about the issues:
- emtyText not fully visible, also after selecting a value it still remains thr.
- The mouse pointer does not changes, which makes you feel for a moment that the field is disabled.
- Test your code in ie(I am using ie7), the box height is reduced to 80%,which makes the whole boxselect look ugly.

13 Jul 2011, 12:49 AM
Is it possible to make this component to work as email suggest?
There will be values from store but lets say you can also write a custom value and after ENTER or ',' it will automaticly be a box?

13 Jul 2011, 2:43 AM
@vishalnnsingh: thanks for the feedback. I will fix the emptyText issue in the next few days, I am quite busy right now. I will test with IE, too. I am not sure I understand what you mean if you say the mouse pointer didn't change, could you explain? I guess you mean, it doesn't change from arrow to cursor, at least not over the whole field?

@navvn: That'd be a nice feature and it could be tied to the forceSelection-option that combobox already offers. I am sure this can be done, too. I don't need it for my project, though, and I don't have the spare time to implement it right now. You could give it a go yourself, if you like.

13 Jul 2011, 8:12 AM
@kleins I am not sure I understand what you mean if you say the mouse pointer didn't change, could you explain? I guess you mean, it doesn't change from arrow to cursor, at least not over the whole field? Correct

1 Aug 2011, 1:09 AM
Thanks a ton kleins for a wonderful implementation of Boxselect...

In my project I required Boxselect to contains atleast 50k values from store and it should also give suggestion on user's key press(as it happens in facebook),so I modified kleins's boxselect code as per my requirement.

I am posting my version of boxselect in case anyone has the same requirement as I have...I will also post a new version of boxselect which will be faster than this one in next few days.....

P.S: I am a fresher and working on ExtJs only from last 15 days , I will definitely welcome any suggestion to improve my code...

29 Sep 2011, 2:22 AM
@kleins, @under_dog: Your BoxSelect control looks awesome. :) But before I can use it in a project, I need to check on the license - have you decided on one?

29 Sep 2011, 3:36 AM
As far as I'm concerned: would be nice if you'd mention me somewhere, other than that do with it whatever you like. So let's say MIT license.

4 Oct 2011, 11:51 PM
no prob from my side....
in fact I have used kleins code,whatever kleins decide would be okay

17 Mar 2012, 11:02 PM
under_dog, Kleins

have you used this with Ext MVC model ? I can't seem to get it to work. I don't get any error but the combo-box doesnt show up - I have used xtype:'boxselect'

18 Mar 2012, 5:44 AM
Have you set the requires property for the boxselect file? and places the files in the correct folder structure? working here in the MVC environment. Well it's showing up :)

requires: ['Ext.ux.form.field.DateTimeField', 'Ext.ux.form.field.BoxSelect'],

18 Mar 2012, 6:52 AM
Thanks Wedgybo - Yes, this was my issue plus I had extra "," in the items and IE hates extra ","

25 Apr 2012, 7:49 PM
Did anyone try to use it with ExtJS4.1 RC?

25 Apr 2012, 11:08 PM
There is a new extension for 4.1: http://www.sencha.com/forum/showthread.php?195773-Ext.ux.ComboFieldBox-intuitive-multi-select-combobox-for-4.1

27 Apr 2012, 12:37 AM
Seems this new extension not supporting input text to look up...

29 May 2013, 2:55 AM
Found a bug in 4.1 original version; if you provide an inputWidth but no width, the internal inputEl doesn't get sized.