Results 1 to 10 of 18

Thread: BoxSelect for Ext 4, another implementation

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Jun 2009
    Heidelberg, Germany
    Vote Rating

    Default 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
    Attached Files Attached Files

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts