1. #1
    Sencha User
    Join Date
    Dec 2010
    Posts
    2
    Vote Rating
    0
    deebugger is on a distinguished road

      0  

    Lightbulb Multi-select combo box with search

    Multi-select combo box with search


    Hi,

    I created two components: a multi-select combo-box extension which also has search and select all/limit/none capabilities, and a search-box component which the combo uses.

    Below is a screenshot of the component. The term 'b' is searched in this case, and since only some items are selected, the select all/none button is marked as "some" (kinda like gmail's email selector).

    Ext-ux-form-ExtendedComboBox.png

    The components can be found here:
    - Ext.ux.form.SearchBox: https://github.com/deebugger/Ext.ux.form.SearchBox
    - Ext.ux.form.ExtendedComboBox: https://github.com/deebugger/Ext.ux....tendedComboBox

    If you try it, let me know how it went and what's missing / useless / broken.

    Cheers!
    -DBG

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,549
    Vote Rating
    873
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Congrats on two more ux
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Sep 2010
    Location
    Netherlands
    Posts
    120
    Vote Rating
    4
    aacoro is on a distinguished road

      0  

    Default


    Quote Originally Posted by deebugger View Post
    Hi,

    I created two components: a multi-select combo-box extension which also has search and select all/limit/none capabilities, and a search-box component which the combo uses.

    Below is a screenshot of the component. The term 'b' is searched in this case, and since only some items are selected, the select all/none button is marked as "some" (kinda like gmail's email selector).

    Attachment 30659

    The components can be found here:
    - Ext.ux.form.SearchBox: https://github.com/deebugger/Ext.ux.form.SearchBox
    - Ext.ux.form.ExtendedComboBox: https://github.com/deebugger/Ext.ux....tendedComboBox

    If you try it, let me know how it went and what's missing / useless / broken.

    Cheers!
    -DBG
    Nice, I think I must try this one out, thanks!

  4. #4
    Sencha User Zeebee's Avatar
    Join Date
    Nov 2009
    Location
    zaventem
    Posts
    53
    Vote Rating
    0
    Zeebee is on a distinguished road

      0  

    Thumbs up


    The searchfunction in the extendedcombo did not work with me. The default was 'name', changed it to the chosen displayValue.


    Code:
    {
    id: 'multiSelectPopupSearch_' + me.id,
    hidden: !me.showSearch,
    xtype: 'ux-searchbox',
    searchFunction: function(value) {
    
    me.store.filter(me.displayField, value, true, false);
    me.updateSelectAllIcon(true);
    },
    clearFunction: function() {
    me.store.filter(me.displayField, '');
    me.updateSelectAllIcon(true);
    }
    }

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

      0  

    Default


    Changed in github - thanks for noticing!

  6. #6
    Sencha User
    Join Date
    Apr 2012
    Posts
    9
    Vote Rating
    0
    ldashevskiy is on a distinguished road

      0  

    Default Seems like there is a typo

    Seems like there is a typo


    on line 49 in file *.ExtendedComboBox.js

    Seems to me that you are also missing in your github archive the images used in your control, such as checked.gif, unchecked.gif, star.png, and star_empty.png -- the first two seem to be part of the standard Ext, but still it would be nice to include their copies nearby the actual css and js files, so that no editing shall be done to the paths in your css file...

    Also, the functionality of searching does not work for me fully. Namely, when I delete the searched for text, either by keyboard or by clicking on the X button, I do not get an updated full list of choices Is that a bug?

    Trying to get it to work at the moment...
    If you get this, what config options do I need to set, in order to have multi-select functionality as well as "select all"/"select none" options enabled?

    Thanks.

  7. #7
    Sencha User
    Join Date
    Jul 2012
    Posts
    11
    Vote Rating
    0
    harshp is on a distinguished road

      0  

    Default require example

    require example


    Hello,

    Can you please provide the example to implement this extension.

    Thanks in advance.

    HarshP

  8. #8
    Sencha User
    Join Date
    Jul 2013
    Posts
    1
    Vote Rating
    0
    talco is on a distinguished road

      0  

    Default


    some images in the control panel are missing,

    good extension, anyway.