1. #141
    Sencha User
    Join Date
    Dec 2011
    Posts
    224
    Vote Rating
    9
    dedoz will become famous soon enough

      0  

    Default


    first i love this ux saved so much time, i dont use Ext.combo anymore all my combos are boxSelect ;d

    question, is there a event when user clicks a (already) selected value, that is displayed as a bubble in the rectangle field. when i click one of those it changes its color, so i guess theres a event for that ? thats not part of the default Ext.combox because there selected values arent displayed as bubbles :d


    edit.
    since i didnt find any event i added one :d, added one line that fires itemClick event passing the record clicked (added the red code)

    Code:
    onItemListClick: function(evt, el, o) {
            var me = this,
                itemEl = evt.getTarget('.x-boxselect-item'),
                closeEl = itemEl ? evt.getTarget('.x-boxselect-item-close') : false;
                
            
            if (me.readOnly || me.disabled) {
                return;
            }
            
            evt.stopPropagation();
    
            if (itemEl) {
                if (closeEl) {
                    me.removeByListItemNode(itemEl);
                } else {
                     me.fireEvent('itemClick',me.getRecordByListItemNode(itemEl));
                    me.toggleSelectionByListItemNode(itemEl, evt.shiftKey);
    
                }
                me.inputEl.focus();
            } else if (me.triggerOnClick) {
                me.onTriggerClick();
            }
            
            
        },

  2. #142
    Sencha User
    Join Date
    Sep 2011
    Posts
    16
    Vote Rating
    0
    srarnold is on a distinguished road

      0  

    Default Found a small issue with filterPickList: true

    Found a small issue with filterPickList: true


    It seems with this config option on, when I click on an empty control the first time I get this.createFilterFn is not a function line 946, my definition for the control is as follows:
    Code:
    {
    xtype: 'boxselect', labelAlign: 'top', labelSeparator: '', id: 'bxsTMRoles', fieldLabel: 'Roles', queryMode: 'local', editable: true, lastQuery: '', typeAhead: true, emptyText: 'Please select a role', width: 320, growMin: 75, growMax: 150, triggerOnClick: true, forceSelection: true, filterPickList: true, displayField: 'Name', valueField: 'RoleID', store: roleListStore, listeners: {
    beforequery: function(qe) {
    delete.qe.combo.lastQuery;
    }
    }
    }
    This does not seem to stop the control from working, I just keep getting these errors displaying in FireBug.

  3. #143
    Sencha Premium Member
    Join Date
    Mar 2008
    Posts
    92
    Vote Rating
    4
    kveeiv is on a distinguished road

      0  

    Default


    2.0.2 has been released! Please see the first post for more details. Most notably, events have been exposed for the selection/focusing of current values. I have added the event listeners of these (valuefocuschange, valueselectionchange) to the event logging example. This is somewhat experimental and I'd like to have a better use case and example for showing off this more advanced functionality. Feedback and contributions are greatly appreciated as always!

    A plea on bug reports and questions:
    I use the included examples/boxselect.html as a test bed when verifying a release against various browsers.

    I have been getting a huge increase in invalid bug reports through this thread, private messages, and the github repository issues, that have fallen in to 2 buckets. The first is not specifying the proper doctype tags for older versions of IE, and the second is using mismatched versions of this component and ExtJS.

    Please reproduce your issue in the simplified framework of examples/boxselect.html before submitting your request, as these reports are becoming quite time consuming and making it difficult to separate the signal from the noise for valid issues. By doing so, you will dramatically increase the odds and speed of someone helping resolve your issue! You are also much more likely to receive a response here in this thread than in a private message.

    Thanks for your help and consideration!

  4. #144
    Sencha User
    Join Date
    Sep 2011
    Posts
    573
    Vote Rating
    74
    ettavolt is just really nice ettavolt is just really nice ettavolt is just really nice ettavolt is just really nice

      0  

    Default Wrong relayout.

    Wrong relayout.


    Hello.
    Thank you very much for maintaining such a wonderful component. After I've used it, I was able to completely remove some blocks from page.
    However, there is a problem with laying out this field when it's width is managed by a container. InputElCt is sized with respect to old (before layout) field's width.
    To fix this, a component's layout should be changed:
    Code:
    Ext.define('Ext.ux.layout.component.field.BoxSelectField', {
    
        /* Begin Definitions */
    
        alias: ['layout.boxselectfield'],
    
        extend: 'Ext.layout.component.field.Trigger',
    
        /* End Definitions */
    
        type: 'boxselectfield',
    
        /*For proper calculations we need our field to be sized.*/
        waitForOuterWidthInDom:true,
    
        beginLayout: function(ownerContext) {
            var me = this,
                owner = me.owner;
    
            me.callParent(arguments);
    
            ownerContext.inputElCtContext = ownerContext.getEl('inputElCt');
            owner.inputElCt.setStyle('width','')
    
            me.skipInputGrowth = !owner.grow || !owner.multiSelect;
        },
    
        beginLayoutFixed: function(ownerContext, width, suffix) {
            var me = this,
                owner = ownerContext.target;
    
            owner.triggerEl.setStyle('height', '24px');
    
            me.callParent(arguments);
    
            if (ownerContext.heightModel.fixed && ownerContext.lastBox) {
                owner.listWrapper.setStyle('height', ownerContext.lastBox.height+'px');
                owner.itemList.setStyle('height', '100%');
            }
            /*No inputElCt calculations here!*/
        },
    
        /*Calculate and cache value of input container.*/
        publishInnerWidth:function(ownerContext) {
            var me = this,
                owner = me.owner,
                width = owner.itemList.getWidth(true) - 10,
                lastEntry = owner.inputElCt.prev(null, true);
    
            if (lastEntry && !owner.stacked) {
                lastEntry = Ext.fly(lastEntry);
                width = width - lastEntry.getOffsetsTo(lastEntry.up(''))[0] - lastEntry.getWidth();
            }
    
            if (!me.skipInputGrowth && (width < 35)) {
                width = width - 10;
            } else if (width < 1) {
                width = 1;
            }
            ownerContext.inputElCtContext.setWidth(width);
        }
    
    });
    Usually fields do no calculations, because they are rendered as<table>s.

    With hope this is useful,
    Arseniy.
    Last edited by ettavolt; 13 Jul 2012 at 4:50 AM. Reason: Fix layout initialization.

  5. #145
    Sencha User
    Join Date
    Jul 2012
    Posts
    1
    Vote Rating
    0
    gaurav.rehan is on a distinguished road

      0  

    Default Mobile version of boxSelect control

    Mobile version of boxSelect control


    Hi, is there a mobile version of BoxSelect available? I am working on a html application for Blackberry 9790 device. this BoxSelect control is little too heavy/and slow on the actual device. It will be good to know if there is a light weight/mobile friendly version of this control available.
    Thanks,
    Gaurav

  6. #146
    Sencha User
    Join Date
    Jul 2011
    Location
    San Francisco, CA
    Posts
    103
    Vote Rating
    5
    alicexyl is on a distinguished road

      0  

    Default


    Quote Originally Posted by salarmehr View Post
    How can I remove an item from drop-down menu when user select that items?
    (as SuperBox do).
    Thanks
    Use filterPickList. You can see this work in the demo.

  7. #147
    Sencha User
    Join Date
    Jul 2011
    Location
    San Francisco, CA
    Posts
    103
    Vote Rating
    5
    alicexyl is on a distinguished road

      0  

    Default


    While testing in Chrome, I found an issue where 'beforedeselect' event isn't fired when:
    1. The box select has just been loaded with existing value(s)
    2. User deletes one of the values
    In this case, only 'change' event is fired. If user adds a new value, then delete, then 'beforedeselect' is fired. Since 'change' event does not distinguish between user change and programmatic change, we don't want to put logic related to user-initiated change in its handler. Here's a test case:
    Code:
                var countrySelectionBox = X4.create('Ext.ux.form.field.BoxSelect', {
                    id:'countrySelectionBox',
                    emptyText: 'Enter a country',
                     store: <countries store>,
    
                   value: ['US', 'BR'],
                    queryMode: 'local',
                    displayField: 'value',
                    width:410,
                    valueField: 'id',
                    hideTrigger: true,
                    triggerOnClick: false, 
                    filterPickList: true, 
                    listConfig: {
                        resizable: true
                    },
                    listeners: {
                        'change': function (bs, newValue, oldValue) {
                            console.log("new: " + newValue + " old: " + oldValue);
                        },
                        'beforedeselect': function (bs, record) {
                            console.log("Removed " + record.getId());
                        },
                        'select': function (bs, records) {
                            console.log("Selected " + records);
                        }
                    }
                });
    UPDATE: Did more debugging. Looks like if user deletes a value right after the box select is loaded, then the picker is not available yet, so in BoxSelect.syncSelection(), a whole block of code is not run:
    Code:
        syncSelection: function() {
            var me = this,
            picker = me.picker,
            valueField = me.valueField,
            pickStore, selection, selModel;
    
    *** Block below not run because picker isn't available ***
            if (picker) {
                pickStore = picker.store;
    
    
                // From the value, find the Models that are in the store's current data
                selection = [];
                if (me.valueStore) {
                    me.valueStore.each(function(rec) {
                        var i = pickStore.findExact(valueField, rec.get(valueField));
                        if (i >= 0) {
                            selection.push(pickStore.getAt(i));
                        }
                    });
                }
    
    
                // Update the selection to match
                me.ignoreSelection++;
                selModel = picker.getSelectionModel();
                selModel.deselectAll();
                if (selection.length > 0) {
                    selModel.select(selection);
                }
                if (me.ignoreSelection > 0) {
                    --me.ignoreSelection;
                }
            }
        },
    UPDATE 2: I found a workaround that seems to work well for me, which is to call createPicker() in the 'change' event handler if it's not available yet:
    Code:
                'change': function (bs) {
                    if (!bs.getPicker()) {
                        bs.createPicker();
                    }
                }
    Last edited by alicexyl; 19 Jul 2012 at 3:51 PM. Reason: More info

  8. #148
    Sencha Premium Member
    Join Date
    Mar 2008
    Posts
    92
    Vote Rating
    4
    kveeiv is on a distinguished road

      0  

    Default


    2.0.3 has been released. Please see the first post for details. This release includes a layout fix posted by ettavolt that resolves field relayouts and some layout issues with older versions of IE. I had been having difficulty reproducing these IE issues, so much appreciation to ettavolt for providing a fix that has resolved them for the users that had been reporting them! This release also includes some changes to the example documentation to be able to see the configs of the example BoxSelect's inline.

    Quote Originally Posted by ettavolt View Post
    However, there is a problem with laying out this field when it's width is managed by a container. InputElCt is sized with respect to old (before layout) field's width.
    To fix this, a component's layout should be changed:
    ....
    [/CODE]
    Usually fields do no calculations, because they are rendered as<table>s.

    With hope this is useful,
    Arseniy.
    Thank you very much for this contribution. Several users had been reporting problems in IE7 and IE8 and this patch seems to have solved their problems as well, which I had not yet been able to reproduce.

    Quote Originally Posted by gaurav.rehan View Post
    Hi, is there a mobile version of BoxSelect available?
    There is not of this particular component. Anything targeting the mobile platforms should really be using the Sencha Touch framework instead. I haven't looked in a little bit, but I think a few options for multi-select capabilities were circulating around the forums for ST 2.

    Quote Originally Posted by [COLOR=#444444
    alicexyl[/COLOR]]



    While testing in Chrome, I found an issue where 'beforedeselect' event isn't fired when:
    1. The box select has just been loaded with existing value(s)
    2. User deletes one of the values
    Can you give me a description of what functionality you were creating off of this event? I am not currently accounting for deselect from an event perspective (beyond what the superclass combobox control provides) and when I went to fix this issue I was torn in a few ways as to when/where to implement it. Some use cases would help define this better for me. I'm glad you have found a workaround in the meantime.

  9. #149
    Ext JS Premium Member
    Join Date
    Dec 2007
    Posts
    229
    Vote Rating
    0
    ngd is an unknown quantity at this point

      0  

    Default


    I know my request is going to sound ridiculous but given that your component works beautifully with remote stores, i would suggest it anyway.

    For "single" valued combos, provide a config option that will make it look like a regular combo i.e. w/o the border and the "cross" symbol. That way I can use your combo everywhere. Currently I have a big problem in using ExtJS's native combo because it doesn't load default values in my combo if my combo is remote.

    I've posted in various forums without success on how to achieve this. But since you do it anyway, I think it will be good.

  10. #150
    Sencha User talha06's Avatar
    Join Date
    Jul 2009
    Location
    Turkey
    Posts
    306
    Vote Rating
    0
    talha06 is on a distinguished road

      0  

    Default


    Just a little suggestion, IMHO it'll be better if boxselect expands itself when input expands. And a clear button will be nice too..

    Thanks a lot again for this *MUST* extension..
    "People will never forget how you made them feel."
    linkedin.com/in/talhakabakus

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