1. #101
    Ext JS Premium Member
    Join Date
    Jan 2012
    Posts
    32
    Vote Rating
    0
    metas is on a distinguished road

      0  

    Default How to import the component into Designer2.x?

    How to import the component into Designer2.x?


    Hi kveeiv,

    I want to use the component in designer2, how can I do it? Is there a .xdc file for us to import from?

    Thanks,
    Metas

  2. #102
    Sencha User
    Join Date
    Mar 2010
    Location
    Los Angeles, USA
    Posts
    4
    Vote Rating
    0
    Karthikeyan.rajmohan is on a distinguished road

      0  

    Default


    How can I remove an item from drop-down menu when user select that items?

  3. #103
    Sencha User
    Join Date
    Mar 2010
    Location
    Los Angeles, USA
    Posts
    4
    Vote Rating
    0
    Karthikeyan.rajmohan is on a distinguished road

      0  

    Default


    I've find out a way to remove the selected item. use the below override code to fix it. This is an override code using Ext.form.field.ComboBox, so this may affect the basic combobox functionality. You can copy the doQuery function into 'Ext.define('Ext.ux.form.field.BoxSelect', {' in Boxselect.js


    Code:
    Ext.override(Ext.form.field.ComboBox, {    doQuery: function(queryString, forceAll, rawQuery) {
            queryString = queryString || '';
            var me = this,
            qe = {
                query: queryString,
                forceAll: forceAll,
                combo: me,
                cancel: false
            },
            store = me.store,
            isLocalMode = me.queryMode === 'local';
            if (me.fireEvent('beforequery', qe) === false || qe.cancel) {
                return false;
            }
            queryString = qe.query;
            forceAll = qe.forceAll;
            if (forceAll || (queryString.length >= me.minChars)) {
                me.expand();
                me.lastQuery = queryString;
                if (isLocalMode) {
                    store.clearFilter(true);
    
    
                    store.filter([{
                        property: me.displayField,
                        value: queryString
                    },{
                        filterFn: function(item) {
                            var avail = false;
                            if (me.valueStore.getCount() != 0) {
                                me.valueStore.each( function(rec) {
                                    if (item.get(me.displayField) == rec.get(me.displayField))
                                        avail = true;
                                });
                                if (!avail)
                                    return item;
    
    
                            } else
                                return item;
                        }
                    }
                    ]);
    
    
                } else {
                    me.rawQuery = rawQuery;
                    if (me.pageSize) {
                        me.loadPage(1);
                    } else {
                        store.load({
                            params: me.getParams(queryString)
                        });
                    }
                }
    
    
                if (me.getRawValue() !== me.getDisplayValue()) {
                    me.ignoreSelection++;
                    me.picker.getSelectionModel().deselectAll();
                    me.ignoreSelection--;
                }
                if (isLocalMode) {
                    me.doAutoSelect();
                }
                if (me.typeAhead) {
                    me.doTypeAhead();
                }
            }
            return true;
        }
    });

    Code:
        var basicBoxselect2 = Ext.create('Ext.ux.form.field.BoxSelect', {            fieldLabel: 'More States',
                renderTo: 'basicBoxselect',
                displayField: 'name',
                width: 500,
                labelWidth: 130,
                store: statesStore,
                queryMode: 'local',
                emptyText: 'Pick a state, any state',
                valueField: 'abbr',
                value: 'WA',
                createNewOnEnter: true,            
                pinList: false,
                selectOnTab: true            
        });
    Attached Images

  4. #104
    Sencha User
    Join Date
    Feb 2012
    Posts
    5
    Vote Rating
    0
    cyborat is on a distinguished road

      0  

    Default Event for clicking/selecting item box?

    Event for clicking/selecting item box?


    Hi - first off, love the widget! Thanks for your work on it!

    I was wondering what the events and wire-up to them would look like when clicking on the item boxes? Not when hitting the 'x' to remove them, but when clicking the item itself?

    I'm implementing this into a query builder I'm putting together, and each item will represent a query option. Would like the user to be able to click one and modify their settings within that option. I'll of course be handling the form bindings etc, just need to figure out what the events are and where I'd wire up to them - would I do so within the boxselect's listeners, or do I need to elsewhere?

    Thanks!!

  5. #105
    Sencha User
    Join Date
    Nov 2008
    Location
    Lyon, France
    Posts
    223
    Vote Rating
    29
    christophe.geiser has a spectacular aura about christophe.geiser has a spectacular aura about

      0  

    Default


    An 4.1 extension that should serve similar purposes (and largely inspired from this one) is available here. It is certainly not as extensive as this extension and not as fully tested, but it should hopefully do the same thing.

    C.

  6. #106
    Sencha User
    Join Date
    Feb 2012
    Location
    Belgium, Antwerp
    Posts
    1
    Vote Rating
    0
    nathanmelis is on a distinguished road

      0  

    Default


    Quote Originally Posted by foxmarco View Post
    It would be fantastic if someone could add the action 'add all' to select all items with one click. Plz i'm not able to do this..

    Thanks
    You could extend this component and override the onKeyDown() function so you can select all items from the dropdown list with CTRL+A for example:

    Code:
    onKeyDown: function(e, t) {
        var me = this,
        key = e.getKey(),
        rawValue = me.inputEl.dom.value,
        valueStore = me.valueStore,
        selModel = me.selectionModel,
        stopEvent = false,
        rec, i;
        if (me.readOnly || me.disabled || !me.editable) {
            return;
        }
        
        // Insert all values from the data store
        if (me.isExpanded && (key == e.A && e.ctrlKey)) {
            me.select(me.getStore().data.items);
            selModel.deselectAll(true);
            me.collapse();
            me.inputEl.focus();
            stopEvent = true;
        } else {
            // Handle keyboard based navigation of selected labelled items
            if ((valueStore.getCount() > 0) &&
                ((rawValue == '') || ((me.getCursorPosition() === 0) && !me.hasSelectedText()))) {
                if ((key == e.BACKSPACE) || (key == e.DELETE)) {
                    if (selModel.getCount() > 0) {
                        me.valueStore.remove(selModel.getSelection());
                    } else {
                        me.valueStore.remove(me.valueStore.last());
                    }
                    me.setValue(me.valueStore.getRange());
                    selModel.deselectAll();
                    stopEvent = true;
                } else if ((key == e.RIGHT) || (key == e.LEFT)) {
                    if ((selModel.getCount() === 0) && (key == e.LEFT)) {
                        selModel.select(valueStore.last());
                        stopEvent = true;
                    } else if (selModel.getCount() > 0) {
                        rec = selModel.getLastFocused() || selModel.getLastSelected();
                        if (rec) {
                            i = valueStore.indexOf(rec);
                            if (key == e.RIGHT) {
                                if (i < (valueStore.getCount() - 1)) {
                                    selModel.select(i + 1, e.shiftKey);
                                    stopEvent = true;
                                } else if (!e.shiftKey) {
                                    selModel.deselect(rec);
                                    stopEvent = true;
                                }
                            } else if ((key == e.LEFT) && (i > 0)) {
                                selModel.select(i - 1, e.shiftKey);
                                stopEvent = true;
                            }
                        }
                    }
                } else if (key == e.A && e.ctrlKey) {
                    selModel.selectAll();
                    stopEvent = e.A;
                }
                me.inputEl.focus();
            }
        }
        if (stopEvent) {
            me.preventKeyUpEvent = stopEvent;
            e.stopEvent();
            return;
        }
        
        // Prevent key up processing for enter if it is being handled by the picker
        if (me.isExpanded && (key == e.ENTER) && me.picker.highlightedItem) {
            me.preventKeyUpEvent = true;
        }
        if (me.enableKeyEvents) {
            me.callParent(arguments);
        }
        if (!e.isSpecialKey() && !e.hasModifier()) {
            me.selectionModel.deselectAll();
            me.inputEl.focus();
        }
    }

  7. #107
    Sencha User
    Join Date
    Jun 2011
    Location
    Ukraine, Mykolayiv
    Posts
    101
    Vote Rating
    1
    rsqw is on a distinguished road

      0  

    Default


    Hi,

    First of all, Thank you for sharing this BoxSelect-componet
    In extjs4.0.7 all works perfectly, but in extjs4.1 it seems to be broken, width-property doesn't work , this this a real problem in my app, could you look about this?

    Many Thanks

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

      0  

    Default


    Christophe Geiser wrote a new implementation using the new possibilities of 4.1: http://www.sencha.com/forum/showthre...mbobox-for-4.1

  9. #109
    Sencha User
    Join Date
    Jun 2011
    Location
    Ukraine, Mykolayiv
    Posts
    101
    Vote Rating
    1
    rsqw is on a distinguished road

      0  

    Default


    Many, many thanks

  10. #110
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    374
    Vote Rating
    13
    ttbgwt will become famous soon enough

      0  

    Default


    Is there a 4.1 version of this?

Thread Participants: 94

  1. scottw (1 Post)
  2. Dumbledore (1 Post)
  3. mysticav (2 Posts)
  4. JorisA (5 Posts)
  5. bobmanc (2 Posts)
  6. notjoshing (4 Posts)
  7. grgur (1 Post)
  8. ValterBorges (2 Posts)
  9. WebProgrammer (1 Post)
  10. Schlurcher (1 Post)
  11. zacware (2 Posts)
  12. ngd (8 Posts)
  13. radtad (2 Posts)
  14. zombeerose (13 Posts)
  15. nicholasnet (1 Post)
  16. themightychris (3 Posts)
  17. abraxxa (8 Posts)
  18. ttbgwt (1 Post)
  19. Psychokrameur (2 Posts)
  20. commanche (1 Post)
  21. ernst96 (2 Posts)
  22. omarc (1 Post)
  23. qooleot (1 Post)
  24. foxmarco (1 Post)
  25. christophe.geiser (1 Post)
  26. wki01 (1 Post)
  27. purnama (1 Post)
  28. mediacept (1 Post)
  29. bareflix (2 Posts)
  30. User 0815 (1 Post)
  31. yuuzai (1 Post)
  32. talha06 (1 Post)
  33. xjpmauricio (1 Post)
  34. scishop (2 Posts)
  35. Smalltalker (1 Post)
  36. hazimdikenli (2 Posts)
  37. raz0r1 (1 Post)
  38. McQuack_82 (1 Post)
  39. elilindner (1 Post)
  40. hexawing (1 Post)
  41. maneljn (3 Posts)
  42. Tim Toady (2 Posts)
  43. alonweiss (1 Post)
  44. ubong (1 Post)
  45. salarmehr (5 Posts)
  46. koblass (1 Post)
  47. Karthikeyan.rajmohan (2 Posts)
  48. Reimius (1 Post)
  49. CSC-Germany (1 Post)
  50. sankarbaluz (2 Posts)
  51. alaley (2 Posts)
  52. navvn (2 Posts)
  53. danCTS (2 Posts)
  54. bentoo42 (1 Post)
  55. jmaia (2 Posts)
  56. maslofer (1 Post)
  57. cadror (3 Posts)
  58. mrinsan (1 Post)
  59. yumaa (1 Post)
  60. rsqw (2 Posts)
  61. mahesh21688 (3 Posts)
  62. derditze (3 Posts)
  63. kunalshah6363 (1 Post)
  64. NatVik (1 Post)
  65. softwareguy (1 Post)
  66. alicexyl (7 Posts)
  67. under_dog (1 Post)
  68. tommytob (2 Posts)
  69. charlie17 (5 Posts)
  70. nathanrice (1 Post)
  71. srarnold (3 Posts)
  72. ettavolt (1 Post)
  73. qnens (1 Post)
  74. nikadod (3 Posts)
  75. PanchiKB (1 Post)
  76. Hooped (1 Post)
  77. dedoz (3 Posts)
  78. metas (1 Post)
  79. lindemann-medien (2 Posts)
  80. nathanmelis (1 Post)
  81. cyborat (1 Post)
  82. Forn (1 Post)
  83. gaurav.rehan (1 Post)
  84. Avman2119 (3 Posts)
  85. zzhouag (5 Posts)
  86. andreas-spindler (3 Posts)
  87. Alvaro L (1 Post)
  88. hown (1 Post)
  89. edson.hh (2 Posts)
  90. QuantumScripting (1 Post)
  91. chungns (1 Post)
  92. Delphine (1 Post)
  93. folivieri (1 Post)
  94. Lpsmash (1 Post)

Tags for this Thread