2 Jul 2011 3:03 AM #1
BoxSelect for Ext 4, another implementation
when I discovered this thread by kveeiv, I was already almost through porting BoxSelect to Ext 4 (I decided to base my code on BoxSelect rather than 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).
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 #2
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 #3
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.I Meet Challenge with Excitement & My Only Gossip is Love
12 Jul 2011 4:28 AM #4
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.I Meet Challenge with Excitement & My Only Gossip is Love
13 Jul 2011 12:49 AM #5
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 #6
@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.