[CLOSED] 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)); }

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

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>  </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>

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