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

[andrei.neculau]

Thanks, Simon! Extension updated with a fix.

PS: neat testcase

[simonbun]

Thanks for the quick fix! It works perfectly.

regards,
Simon

[KimH]

@KimH - I will assume that "first dropdown" refers to the Select component - the 3rd dropdown, after ComboBox and ComboBox (Force).

First of all, please pay attention to what it is written on the demo page. It contains VALUABLE information. On the right column, you can read "(Diff) Doesn't select on TAB key press".

Because this component supports multiSelect, the TAB key needed to lose its make-selection function. In order for that to happen, you must use ENTER. TAB only goes to the next form field.

I'm sorry.... didn't see that specific Diff

Anyway... try it on the first select box (Combobox) and you'll see that the second select using tab will not set the Value even though the combobox is set to the value...

[andrei.neculau]

As the name suggests - ComboBox is not my Select component. The first two components (ComboBox) are put there in order to compare the formal ComboBox with my Select component.

Concerning the situation you are presenting - no bug in the component. Just a tippo in the testcase. Fixed in the zip now, and later on the live demo page.

[catacaustic]

Andrei, again a a fantastic widget. I've found that it works perfectly when I'm using it in a form.

Only one issue that I've found, and I'm not sure if is to do with your component, or with Ext itself... When I try to use this in an EditorGridPanel (V. 2.0) I can set the values with it correctly to start with, and by using editor.field.getRawValue () I'm returning the values when I render the grid cell. The problem is that when I go to edit that cell again, what's displayed is the value fields, and not the display fields as they should be. Also, the selected entries aren't displaying as selected in the drop-down list. This lets the selections get added two or more times to the selections list. From what I can see, this is because of the editors actions when it closes the field after editing, but I'm not to sure of how to get around it.

I've got fields with the same definitions working fine in a form, but not working in the editable grid. Not sure if there is anything that can be done about this.

[andrei.neculau]

@catacaustic - so apparently it's not working as perfect as you say it is

I don't know what to say. I have made a small testcase inside a grid, based on the Ext2 example - http://extjs.com/forum/showthread.php?p=83945#post83945 - it seems to work ok. If you can please post the config for the Select, or even bring a small testcase, or if you feel comfortable with it - message me in private with the link to your application.

As of now, I'm cleaning the code a bit, and improving some functions in order to publish v0.4 soon.

[catacaustic]

As I said, it works perfectly when I use it in a form.

Your editable grid example works fine... when the select box a single select. When I add in the config item of "multiSelect: true" to make it a multi-selectable ComboBox it displays the same problems that I've described. It doesn't remember (or doesn't display) the selections, and just keeps on adding selections even if they are already there. As I said, I'm pretty sure this is to do with the Editor trying to set the value of the select box when editing closes. This will set the values as a string, as it is returned from the select box, but the select box doesn't seem to parse that string into an array properly, so sees the full string as one single item. For some reason it also brings in a blank item at the start, probably also doe to the editor trying to set something that it shouldn't be doing.

The setup for the column with the multi-select editor that I've got here is:

{header: "<span ext:qtip=\"Tags set on this footprint\">Tags", dataIndex: "tags", width: 100, sortable: false, hidden: false, renderer: CF.Render.renderFootprintTags, editor: new Ext.grid.GridEditor (new Ext.form.MultiSelect ({
	store: new Ext.data.Store ({
		proxy: new Ext.data.HttpProxy ({
			url: "api/api-json.php?f=getTags", 
			method: "POST"
		}), 
		reader: new Ext.data.JsonReader ({
			root: "tags", 
			id: "id"
		}, [
			{name: "id", mapping: "id"}, 
			{name: "name", mapping: "name"}
		])
	}), 
	name: "tags", 
	listWidth: 200, 
	allowBlank: true, 
	emptyText: "All tags", 
	valueField: "id", 
	displayField: "name", 
	editable: false, 
	forceSelection: true, 
	triggerAction: "all", 
	title: "Tags", 
	loadingText: "Loading tags", 
	multiSelect: true
}))}

I hope this can help a little bit with some "fixing". I'm going to see what I can come up with too and if I get any results I'll post here again. Once again, thanks for your help, and helping everyone here.

[catacaustic]

I think I've got something worked out here. It looks like it's working in my system, so see what it can do from your end.

I've done some small changes to the setValue() function and it looks like it works. My changes are set out here:

setValue:function(v){
	// Don't set anything if the value isn't defined
	if (v !== undefined) {
		var result = [],
				resultRaw = [];
		if (!(v instanceof Array)){
			// Split a string into an array
			// v = [v];
			v = v.split (",");
		}
		if (!this.multiSelect && v instanceof Array){
			v = v.slice(0,1);
		}
		for (var i=0, len=v.length; i<len; i++){
			var value = v[i];
			var text = value;
			if(this.valueField){
				var r = this.findRecord(this.valueField, value);
				if(r){
					text = r.data[this.displayField];
				}
			}
			resultRaw.push(value);
			result.push(text);
		}
		v = resultRaw.join(',');
		text = result.join(',');
		
		this.lastSelectionText = text;
		this.valueArray = resultRaw;
		if(this.hiddenField){
			this.hiddenField.value = v;
		}
		Ext.form.ComboBox.superclass.setValue.call(this, text);
		this.value = v;
		if (this.view){
			this.view.clearSelections();
			this.selectByValue(this.valueArray);
		}
		
		if (this.oldValueArray != this.valueArray){
			this.fireEvent('change', this, this.oldValueArray, this.valueArray);
		}
		this.oldValueArray = Ext.apply([], this.valueArray);
		if (this.history && !this.multiSelect && this.mode == 'local'){
			this.addHistory(this.getRawValue());
		}
	} // if ()
	else {
		// Clear everything to start with
		this.valueArray = [];
	} // else
}

What was happening was the editor was trying to set values as single values of a string instead of a single ID or an array, and it was throwing everything out. By adding these changes in, it works well with editors as well as not being affected when it's used as a stand-alone field in a form. The "if" statement checks that there is actually a value being set as the editor initially wants to see a value of "undefined" as there's nothing selected in the component. The "else" statement clears the list of selected items so that when it is used in an editable grid it shows up with no selections for a field that doesn't have anything set. That isn't quite working right yet, but I'm trying to get it going unless anyone else can come up with a better solution.

Check this for yourself, and see if this works for you as well. I think I may be pretty close

[catacaustic]

I think I've got it. Small change to the "else" statement...

else {
	// Clear everything to start with
	if (this.view) {
		this.reset ();
	} // if ()
	
	while (this.valueArray.length > 0) {
		this.valueArray.pop ();
	} // for ()
} // else

That should do it. It's working great for me now with those changes.

[andrei.neculau]

@catacaustic - it figures that it has to do with that, but there's one thing: in case of multiSelect, the value given to setValue should be an array (when going to v0.3 I deliberately took out the "," separator)

So.. basically, in your record, the field tags should be an array, and not string.

But your experience will probably take me to re-implement the separator. It seems logical to have it - at least optional. - Most probably this evening.

PS: thanks for your great input - all your post put me little by little in the right direction without looking at the source, which saves time