kleins
2 Jul 2011, 3:03 AM
Hi,
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...
[UPDATES]
- 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
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...
[UPDATES]
- 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