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

[saJoshua]

Hi,

The problem must be with a different piece of your code. Attached is a mini project that uses the snippet you posted. No problem there.

Joshua

[joao_candido]

I

[AmitOlsys]

Dear All,
I want to add multiselect combo in editorgrid panel for editing purpose.

columns:[{
                             header:'Term'
                             ,id:'Term'
                             ,align:'center'
                             ,dataIndex:'Term'
                             ,width:75
                             ,sortable:false
                             ,editor: new Ext.form.ComboBox({
                                           typeAhead: true,
                                           triggerAction: 'all',
                                           transform:'Term',
                                           lazyRender:true,
                                           listClass: 'x-combo-list-small'
                                        })
                             },{
                             header:'DataItem'
                             ,dataIndex:'DataItem'
                             ,width:70
                             ,align:'center'
                             ,sortable:false
                             ,editor: new Ext.form.ComboBox({
                                           typeAhead: true,
                                           triggerAction: 'all',
                                           transform:'DataItem',
                                           lazyRender:true,
                                           listClass: 'x-combo-list-small'
                                        })
                             }]

I wanted to add multiselect combo in one column field of editorgrid panel as an editor:,
right now I am using only comboBox. iT works fine for me and on a single click of editor-grid columns the combo box with single select available. I wanted to convert that in to multiselect combo.
please let me know what process I will have to carry to perform this task.

Any help to this newbie is must appreciating.
Thanks and Regards
AmitOlsys

[AmitOlsys]

Dear Andrei,
Great work, I am trying to get it from last 3 days..
But the problem now is that the multiselect combo is rendered properly but..I can still select only one value at a time. Is it necessary to include GroupingView.js file, because I excluded that for now.

Thanks
AmitOlsys

First of all be sure that you have the latest version!

Secondly, I don't know if I follow you on this.
I modified the grid example in examples/grid in order to use Ext.ux.Andrie.Select. It seems to be working ok. I'm attaching them now - you need to change the path to the Select component in the html file.

I admit that at the moment I'm busy with others, and I did not develop an application with the new Ext.ux.Andrie.Select for Ext2.0 , so you may be right that there is a bug - can anyone confirm this situation? any details?

As regards the sorting - sure. Sorting is available as it is for ComboBox. Just sort its store (selectComponent.store)!

[Zyclops]

I was having issues with multiselect shrinking to about 5px wide if I called .reset on it when it was display: none;

When I commented out the show() and hide() it fixed the issue without side effects.. What exactly are show() and hide on the triggers supposed to do?

	onChange:function(){
		if (!this.clearTrigger){
			return;
		}
		if (this.getValue() != ''){
		//	this.triggers[0].show();
		}else{
		//	this.triggers[0].hide();
		}
	},

[AmitOlsys]

Basically there are two triggers on right of multiselect combo. first one for clear the contents selected, and after clearing the contents this trigger is also being hide. and the second one trigger is for droping down the selection list.
the function you wrote was for the functionality of the first trigger thats why the 5px width is rendered.

Cheers
AmitOlsys

[AmitOlsys]

Hi Andrie,
I am using your this extension to have multiselect combo box.But instead of populating multiselect combo from html code

<select name="light" id="light" style="display: none;">
    <option value="Shade">Shade</option>
    <option value="Mostly Shady">Mostly Shady</option>
    <option value="Sun or Shade">Sun or Shade</option>

    <option value="Mostly Sunny">Mostly Sunny</option>

    <option value="Sunny">Sunny</option>
</select>

I am populating it from an xml file.But in that case its multiselect features are not working.Please let me know how can I create Multiselect Combo which has its options from an xml file store.

Cheers!
AMitOlsys

First of all be sure that you have the latest version!

Secondly, I don't know if I follow you on this.
I modified the grid example in examples/grid in order to use Ext.ux.Andrie.Select. It seems to be working ok. I'm attaching them now - you need to change the path to the Select component in the html file.

I admit that at the moment I'm busy with others, and I did not develop an application with the new Ext.ux.Andrie.Select for Ext2.0 , so you may be right that there is a bug - can anyone confirm this situation? any details?

As regards the sorting - sure. Sorting is available as it is for ComboBox. Just sort its store (selectComponent.store)!

[fangzhouxing]

Hi Andrie,if this extension can be editable with multiselect features, it may be more perfect!

[thoreking]

Hi,

nice extension !..

As I use custom trigger class in my combobox, it would be nice to change the arrow trigger def to allow that (changes in red) in Select.js:

	initComponent:function(){
		//from twintrigger
		this.triggerConfig = {
			tag:'span', cls:'x-form-twin-triggers', cn:[
				{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.trigger1Class},
				{tag: "img", src: Ext.BLANK_IMAGE_URL, cls: "x-form-trigger " + this.triggerClass}
			]
		};
		Ext.ux.Andrie.Select.superclass.initComponent.call(this);
		if (this.multiSelect){
			this.typeAhead = false;
			this.editable = false;
			//this.lastQuery = this.allQuery;
			this.triggerAction = 'all';
			this.selectOnFocus = false;
		}
		if (this.history){
			this.forceSelection = false;
		}
		if (this.value){
			this.setValue(this.value);
		}
	},

	hideTrigger1:true,
	
	getTrigger:Ext.form.TwinTriggerField.prototype.getTrigger,
	
	initTrigger:Ext.form.TwinTriggerField.prototype.initTrigger,
	
	trigger1Class:'x-form-clear-trigger',
	//trigger2Class:'x-form-add-trigger',

[Rajnishc]

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)

Provided zip for multiselection in combo box is corrupted. Thanks for providing the new one.