Hybrid View

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    17
    Vote Rating
    0
    jonathan.ingram is on a distinguished road

      0  

    Default ComboBox with multiSelect and forceSelection does not render existing value

    ComboBox with multiSelect and forceSelection does not render existing value


    Ext version tested:
    • Ext 4.0 rev 6
    Browser versions tested against:
    • Chrome
    Description:
    • When you set both multiSelect: true and forceSelection: true, the combo box does not show existing values given to the combo box, but instead shows a red line on the box showing that "this field is required". When you remove forceSelection: true, the combo box populates correctly, but then allows users to type arbitrary text in.
    Test Case:
    Code:
    createTermComboBox : function(config) {        
            var me = this;
            
    
            Ext.override(Ext.form.field.ComboBox, {
                getSubmitData: function() {
                    var val = {};
    
    
                    val[this.name] = Ext.JSON.encode(this.getSubmitValue());
    
    
                    return val;
                }
            });
            
            return Ext.create("Ext.form.field.ComboBox", Ext.apply({
                columnWidth: 3/4,
                name: "Categories[Terms][]",
                value: [1,2,3,4],
                allowBlank: false,
                forceSelection: true,
                store: me.termStore,
                valueField: "Id",
                displayField: "Name",
                triggerAction: "all",
                lastQuery: "",
                multiSelect: true
            }, config));
        }

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,905
    Vote Rating
    626
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Can't confirm this in 4.0.6, please post a full test case:

    Code:
    Ext.define('Foo', {
        extend: 'Ext.data.Model',
        fields: ['Id', 'Name']
    });
    
    Ext.onReady(function(){
    
        var store = Ext.create('Ext.data.Store', {
            model: 'Foo',
            data: [
                {Id: 1, Name: 'One'}, 
                {Id: 2, Name: 'Two'}, 
                {Id: 3, Name: 'Three'}, 
                {Id: 4, Name: 'Four'}, 
                {Id: 5, Name: 'Five'}
            ]
        });
        
        Ext.create("Ext.form.field.ComboBox", {
            renderTo: document.body,
            value: [1, 2, 3, 4],
            allowBlank: false,
            forceSelection: true,
            store: store,
            valueField: "Id",
            displayField: "Name",
            triggerAction: "all",
            lastQuery: "",
            multiSelect: true
        });
    });
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Ext JS Premium Member
    Join Date
    Mar 2011
    Posts
    17
    Vote Rating
    0
    jonathan.ingram is on a distinguished road

      0  

    Default


    Does this help?

    Code:
    <!DOCTYPE html><html>
        <head>
            <title></title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <link href="http://dev.sencha.com/deploy/ext-4.0.2a/resources/css/ext-all.css" type="text/css" rel="stylesheet"/>
            <script src="http://dev.sencha.com/deploy/ext-4.0.2a/ext-all-debug.js" type="text/javascript"></script>
            
    <!--        <script src="http://localhost/ext-4.0.6/ext-all-debug.js" type="text/javascript"></script>-->
        </head>
        <body>
            <script type="text/javascript">
                Ext.define("Post", {
                    extend: 'Ext.data.Model',
                    proxy: {
                        type: 'jsonp',
                        url : 'http://www.sencha.com/forum/topics-remote.php',
                        reader: {
                            type: 'json',
                            root: 'topics',
                            totalProperty: 'totalCount'
                        }
                    },
    
    
                    fields: [
                        {name: 'id', mapping: 'post_id', type: 'int'},
                        {name: 'title', mapping: 'topic_title'}
                    ]
                });
    
    
                Ext.onReady(function(){
    
    
                    var store = Ext.create('Ext.data.Store', {
                        autoLoad: true,
                        model: "Post"
                    });
                    
                    /**
                     * This will populate the combo box value with three values (as 
                     * expected).
                     */
                    store.on("load", function() {
                        Ext.create("Ext.form.field.ComboBox", {
                            value: [604220, 604114, 604153],
                            allowBlank: false,
                            forceSelection: true,
                            store: store,
                            valueField: "id",
                            displayField: "title",
                            triggerAction: "all",
                            lastQuery: "",
                            multiSelect: true,
    
    
                            width: 1000,
                            renderTo: document.body
                        });
                    });
                    
                    /**
                     * This will NOT populate the combo value with anything and a 
                     * red line will show.
                     * 
                     * Note: I tried the same example with http://dev.sencha.com/deploy/ext-4.0.2a/ext-all-debug.js
                     * and the red line was NOT visible. But when I used v4.0.6, the
                     * red line appeared.
                     */
                    Ext.create("Ext.form.field.ComboBox", {
                        value: [604220, 604114, 604153],
                        allowBlank: false,
                        forceSelection: true,
                        store: store,
                        valueField: "id",
                        displayField: "title",
                        triggerAction: "all",
                        lastQuery: "",
                        multiSelect: true,
    
    
                        width: 1000,
                        renderTo: document.body
                    });
                });
            </script>
        </body>
    </html>

  4. #4
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,905
    Vote Rating
    626
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Thread Participants: 1

Tags for this Thread