1. #1
    Sencha User
    Join Date
    Jun 2009
    Location
    Heidelberg, Germany
    Posts
    52
    Vote Rating
    1
    kleins is on a distinguished road

      0  

    Default BoxSelect for Ext 4, another implementation

    BoxSelect for Ext 4, another implementation


    Hi,

    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...

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

  2. #2
    Ext JS Premium Member
    Join Date
    May 2008
    Location
    Austria, Vienna
    Posts
    218
    Vote Rating
    1
    abraxxa is on a distinguished road

      0  

    Default


    *subscribe*
    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.

  3. #3
    Sencha User vishalnnsingh's Avatar
    Join Date
    Sep 2010
    Location
    Kolkata, India
    Posts
    115
    Vote Rating
    0
    vishalnnsingh is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha User vishalnnsingh's Avatar
    Join Date
    Sep 2010
    Location
    Kolkata, India
    Posts
    115
    Vote Rating
    0
    vishalnnsingh is on a distinguished road

      0  

    Default




    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

  5. #5
    Sencha User
    Join Date
    Dec 2010
    Posts
    46
    Vote Rating
    0
    navvn is on a distinguished road

      0  

    Default


    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?

  6. #6
    Sencha User
    Join Date
    Jun 2009
    Location
    Heidelberg, Germany
    Posts
    52
    Vote Rating
    1
    kleins is on a distinguished road

      0  

    Default


    @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.

  7. #7
    Sencha User vishalnnsingh's Avatar
    Join Date
    Sep 2010
    Location
    Kolkata, India
    Posts
    115
    Vote Rating
    0
    vishalnnsingh is on a distinguished road

      0  

    Default


    @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
    I Meet Challenge with Excitement & My Only Gossip is Love

  8. #8
    Sencha User
    Join Date
    Jul 2011
    Posts
    3
    Vote Rating
    0
    under_dog is on a distinguished road

      0  

    Default


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

  9. #9
    Sencha User
    Join Date
    Sep 2011
    Posts
    2
    Vote Rating
    0
    sebholl is on a distinguished road

      0  

    Question License?

    License?


    @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?

  10. #10
    Sencha User
    Join Date
    Jun 2009
    Location
    Heidelberg, Germany
    Posts
    52
    Vote Rating
    1
    kleins is on a distinguished road

      0  

    Default


    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.