Ext.form.ux.MultiSelectField

[mitchellsimoens]

The current Ext.form.Select field isn't very customizable. It determines whether or not to use the List or Picker and you cannot override this. If you do use a List, you cannot do multiselect. So I have thrown together a new component that extends Select to accomplish this.

Specify inputType to picker, list, or dataview and it will build this. Specify multiSelect: true for either list or dataview inputTypes and you will then enjoy multi selecting! Plus you can now override the different functions for building each inputType, much more customization this way.

Git - https://github.com/mitchellsimoens/E...ch.MultiSelect
Demo - http://www.simoens.org/Sencha-Projects/demos/

Let me know what you think, especially the dataview version!

[Buckeye]

Excellent Demos!

But I found out a problem of the Ext.form.ux.touch.MultiSelect list. If already select some items from the list, next time when click the list and bring up the list, there is no item is marked as selected based on current display from the field. This does not behave like normal select box. Could you please give suggestion how to fix this?

Thank you!

[Buckeye]

I have a fix for the problem I described in previous post: display the previous selected items when select panel is brought up.

Modify showComponent function in Ext.form.ux.touch.MultiSelect.js as following. Now if preselect some items from 'List'. Next time, these items will be marked as selected when select panel shows up.

	showComponent: function() {
		var itemType = this.itemType;
		if (itemType === "picker") {
			this.getPicker().show();
		} else {
			var itemPanel = this.getItemPanel();

			itemPanel.showBy(this.el, "fade", false);
			
            //display multiple selection mark from previous value (DX)
			if(itemType === "list"){
	            if (this.value != "") {
	                var values = this.value.toString().split(",");
	                for (var i = 0; i < values.length; i++) {
	                    index = this.store.findExact(this.valueField, values[i]);
	                    itemPanel.down('#list').getSelectionModel().select(index != -1 ? index : 0, true, true); //use true to allow multiple selection
	
	                }
	            }
			}			
		}
		this.isActive = true;
	},

[mitchellsimoens]

Thank you! I will look into merging this in!

[shaneavery]

Hello,

Thanks for this component. I am trying to use it with Sencha Touch 2 PR3 and have had some success getting it updated. One issue: line 207 uses a deprecated property - fieldEl. When debugging, the console reports below from line 40862 of sencha-touch-all-debug.js:

"[DEPRECATE][Ext.form.ux.touch.MultiSelect#undefined] 'fieldEl' is deprecated, please use getInput() to get an instance of Ext.field.Field instead"

And then Afterwards:

"Uncaught TypeError: Object [object Object] has no method 'getInput'"

My question is: how would you recommend changing that line of code such that the correct property is set using Sencha Touch2 PR3's updated components?

Thanks again for providing this.