ComboBox with multiSelect and forceSelection does not render existing value

**jonathan.ingram** · 14 Sep 2011 3:12 PM

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));
    }

**evant** · 18 Sep 2011 10:36 PM

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
    });
});

**jonathan.ingram** · 4 Oct 2011 4:49 PM

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>

**evant** · 4 Oct 2011 7:30 PM

Looks like a duplicate of this: http://www.sencha.com/forum/showthre...y-loaded-Store

ComboBox with multiSelect and forceSelection does not render existing value

Thread Tools

Search Thread

Display

ComboBox with multiSelect and forceSelection does not render existing value

ComboBox with multiSelect and forceSelection does not render existing value

Tags for this Thread