1. #1
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default Ext.form.ux.MultiSelectField

    Ext.form.ux.MultiSelectField


    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!
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  2. #2
    Touch Premium Member
    Join Date
    Nov 2010
    Posts
    30
    Vote Rating
    0
    Buckeye is on a distinguished road

      0  

    Red face Multiselect list cannot mark the current selected items when showing up the list afte

    Multiselect list cannot mark the current selected items when showing up the list afte


    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!

  3. #3
    Touch Premium Member
    Join Date
    Nov 2010
    Posts
    30
    Vote Rating
    0
    Buckeye is on a distinguished road

      0  

    Red face


    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.

    Code:
    	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;
    	},

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Thank you! I will look into merging this in!
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Sencha User
    Join Date
    Feb 2011
    Posts
    74
    Vote Rating
    3
    shaneavery is on a distinguished road

      0  

    Default


    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.

Similar Threads

  1. Replies: 3
    Last Post: 28 Jun 2010, 2:21 PM
  2. Replies: 2
    Last Post: 29 Apr 2010, 6:00 AM
  3. Replies: 3
    Last Post: 16 Apr 2010, 4:42 AM

Thread Participants: 2