[2.x] Ext.ux.Andrie.Select (ComboBox with multiSelect)

Great sample. Thanks Andrie. I did not read all the posts but I did find an issue. You have:
this.fireEvent('change', this, this.oldValueArray, this.valueArray);
this.fireEvent('change', this, this.oldValue, this.getRawValue());

In itself, that is fine but it does not match the api for the combobox. It should be:
this.fireEvent('change', this, this.valueArray, this.oldValueArray);
this.fireEvent('change', this, this.getRawValue(), this.oldValue);

For my purpose, I also had to comment out:
this.valueArray = resultRaw; (line ~502)

That seemed to replace a set value when moving to other combo boxes. I am using 7 of your multi select combo boxes on one page. I do have an issue that I have work around but could not fix the code. I have listeners ('change') in each combo box. The newValue and oldValues work fine. There is a miss fire that messes it all up. If I make a selection from one combo box, all is fine. When I go to click on a different box, the onchange is fired on the first combo box twice. The first fires is ok. The second on the first combo box replaces the newValue with a string of results instead of an array of results. So the string is a comma separated from of the array. I could not figure out a fix for that so instead of using the newValue and oldValue in:

'change': function (combo, newValue, oldValue)

I am using the this.valueArray, this.oldValueArray as the work around. Did anyone encounter that issue? Thanks.

Hi all I have a problem with this widget. When i use a multiselect combobox and when i select a value in combo
first value is automatically show but not checked
for example when i choose M (also first element is M ) then combo's display is M;M
for example when i choose D (just only checked D ) then combo's display is M;D.

Thanx

hii andrei,

i have used ur mulitselect in my form , but on post m getting display field in comma seperated but i want the value field what can i do for this :) please suggest ..

thanks

rahul

I encountered the following problem after upgrading to ExtJs 2.3. It's a pretty unique scenario but I thought I'd post it here just in case someone might make use of it.

I have a form containing some AndrieSelect components. Parts of the form are initially hidden. The form has a reset button. When the reset button is clicked, the widths of the AndrieSelect components are mangled by the onChange method attempting to hide the trigger (which is of course also hidden). Thus, when the form is made visible, the widths of each AndrieSelect are completely messed up (10 - 20px wide).

To fix this I wrote a very simple override which tests the visibility of the trigger before trying to hide it:

Code:

---

  onChange: function() {
    if (!this.clearTrigger) {
      return;
    }
    if (this.getValue() !== '') {
      this.triggers[0].show();
    } else {
      //check to see if triggers[0] is visible before hiding, only hide it
      //if it's visible first
      if (this.triggers[0].isVisible()) {
        this.triggers[0].hide();
      }
    }
  }

---

Here's is a patch that adds a config option called "multipleHiddenFields" which if set to true will split the hidden field into multiple hidden fields (one for each value) with the same name, to match the data sent using a regular HTML Select input.

Code:

---

--- Ext.ux.Andrie.Select.js.orig    Fri Jul 23 14:12:47 2010
+++ Ext.ux.Andrie.Select.js    Fri Jul 23 14:18:54 2010
@@ -76,6 +76,10 @@
      * @cfg {String} displaySeparator Separator to use for displaying the values (defaults to comma)
      */
    displaySeparator:',',
+    /**
+    * @cfg {Boolean} multipleHiddenFields Split different values into multiple hidden fields to match the regular HTML Select input value sent (defaults to false)
+    */
+    multipleHiddenFields:false,
   
    // private
    valueArray:[],
@@ -107,6 +111,16 @@
            this.setValue(this.value);
        }
    },
+   
+    // private
+    onRender : function(ct, position){
+        Ext.ux.Andrie.Select.superclass.onRender.call(this, ct, position);
+       
+        if(this.multipleHiddenFields){
+            this.hiddenFields = [];
+            Ext.get(this.hiddenField).remove();
+        }
+    },
   
    hideTrigger1:true,
       
@@ -562,7 +583,21 @@
        this.lastSelectionText = text;
        this.valueArray = result;
        this.rawValueArray = resultRaw;
-        if(this.hiddenField){
+       
+        if(this.multipleHiddenFields){
+            var hiddenField;
+       
+            for (var i=0; i<this.hiddenFields.length; i++) {
+                Ext.get(this.hiddenFields[i]).remove();
+            }
+            this.hiddenFields = [];
+           
+            for (var i=0; i<this.valueArray.length; i++) {
+                hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, value: this.valueArray[i]}, 'before', true);
+                this.hiddenFields.push(hiddenField);
+            }
+        }
+        else if(this.hiddenField){
            this.hiddenField.value = v;
        }
        Ext.form.ComboBox.superclass.setValue.call(this, text);

---

items : {
xtype : 'fieldset',
title : 'Target Filter',
items : [
new Ext.ux.Andrie.Select( {
id : 'qTBucket',
fieldLabel : 'Opty Size Bucket',
xtype : 'combo',
typeAhead : true,
triggerAction : 'all',
width : 140,
editable: true,
visible:true,
mode : 'local',
displayField: 'value',
multiSelect:true,
valueField : 'value',
lazyInit : true,
store : optySizeBucketStore,
listClass : 'x-combo-list-small'})
,

Quote:

---

Originally Posted by andrei.neculau

March 26, 2008
This extension has been discontinued! A new extension with the same capabilities, but with cleaner and smarter code will be uploaded within the future days.
---------------
* This extension is merely the new-comer after Ext.ux.form.Select for Ext 1.x

Same features are available. To summarize: a ComboBox with multiple selection support.
Nothing much changed on the surface, other than switching the config property singleSelect to it's counter-property: multiSelect. The reason behind the change is to make it more logical when using Ext.DataView.

Since 0.3.6 - it also features history capabilities (the former HistoryComboBox)

Live DEMO is available here. Testcase is included in the attached ZIP file.

As always - looking forward to reactions on this! :)

TO DO (not in the very near future)
------
- add key search (Ext 1.x - SelectBox)
- add grouping capability (Ext 1.x - GroupComboBox)


Post Scriptum

• I sincerely apologize, but you won't be seeing "Mine is better because..." regarding this post. People can choose and make up their own mind. This is one reason why I switched to Ext.ux.Andrie namespace. I want to govern over Ext.ux.Select (sounds like community-work, consensus toward official release) no more than I want somebody else to use Ext.ux.Andrie namespace (personal work).
• I apologize for a second time because there was a "nice" delay since I promised to support Ext 2.x and the current time - release time. To be honest, this switch has only taken one day - today -, so it could have been released a long time ago.
• All in all, I'd like to thanks the Ext2 team - it was fairly easier to implement this on the new framework, than it was on Ext1.

-
[GMT 14:33 Nov. 5] - Update to v0.3.4 (fixed clearValue, improved reset, new clear button/trigger)
[GMT 23:14 Nov. 5] - Update to v0.3.5 (improved clear trigger and transform capabilities)
[GMT 10:04 Nov. 6] - Update to v0.3.6 (added history capabilities) [GMT 13:40 Nov. 7] - Update to v0.3.7 (removed a faulty JS hack - It's important to go ahead with this update!!!)
[GMT 17:02 Nov. 12] - Update to v0.3.8 (improved setValue function)
[GMT 10:35 Nov. 17] - Update to v0.4 (improvements and fixes + cleaner code; full changelog on the demo page)
[GMT 14:19 Nov 20] - Update to v0.4.1 - LIVE DEMO IS NOT YET UPDATED TO USE THE LATEST VERSION! (Having problems with accessing the webhost)

---

I've been battling with this plugin for about a day now and felt compelled to contribute. This plugin does not behave as I had expected. Even the demos seem to produce unpredictable results.

I know this plugin appears to be marked discontinued and this post is quite old but I feel the need to explain my findings.

Using the demo page "multiselect from markup" as an example:

• Select two values
• See the country codes in the value box
• Blur the field
• See the country codes converted into the value representation
• Select more values
• See the country codes appended to the value
• See the country codes duplicate into the value field
• Repeat

Hope this helps anybody else struggling to get sane results from this plugin. This plugin does look exactly the way I wanted but unfortunately does not function well.

A plugin that I finally got to work the way I wanted (multiple select) is http://lovcombo.extjs.eu/.

I've used this plugin for multiselect combo in extjs 3.4.
Steps to follow:
1) include the plugin in your directory (js and css files)
2) you may need to comment out some lines as following in Select.js file of the plugin:
Ext.ux.Andrie.Select = function(config){
//following lines commented out intentionally to avoid some unexpected errors
/*if (config.transform && typeof config.multiSelect == 'undefined'){
var o = Ext.getDom(config.transform);
config.multiSelect = (Ext.isIE ? o.getAttributeNode('multiple').specified : o.hasAttribute('multiple'));
}
config.hideTrigger2 = config.hideTrigger2||config.hideTrigger;*/
Ext.ux.Andrie.Select.superclass.constructor.call(this, config);
}
3) use something like this:
this.cmbo = new Ext.ux.Andrie.Select({
id: 'OfficeCombo',
xtype: 'combo',
emptyText: 'Select All',
autoScroll: true,
store: enggOfficeStore,
displayField: 'FullName',
multiSelect: true,
valueField: 'ShortName',
mode: 'local',
listeners:{
select: function(record, index) {
alert(record.getValue());
//................
}
}
});
4) In the panel, you can use something like this
this.pnlEnggScreen = new Ext.Panel({
layout: 'column',
items: [this.cmbo]
})