The combo box does not select a value from the drop-down list.

Question

I am using ExtJs to create combobox. Here is my code:

Ext.define('Form.FormTypeDialog', { extend : 'Ext.Window', id: 'formTypeDialog', formId: null, callbackFunction : null, modal: true, statics : { show : function(formId, callback) { Ext.create(Form.FormTypeDialog", { formId : formId, callbackFunction : callback }).show(); } }, constructor : function(config) { var me = this; Ext.apply(this, { buttons : [ { text:"#{msgs.form_create_dialog_button_cancel}", cls : 'secondaryBtn', handler: function() { me.close(); } }, { text:"#{msgs.form_create_dialog_button_next}", handler: function() { // Get selected form type } } ] }); this.callParent(arguments); }, initComponent:function() { this.setTitle("#{msgs.form_create_dialog_title}"); this.setHeight(175); this.setWidth(327); var formTypeStore = Mystore.Store.createRestStore({ url : getRelativeUrl('/rest/form/formTypes'), root: 'objects', fields: ['name','value'] }); this.form = new Ext.form.Panel({ style:'padding:15px;background-color:#fff' , border:false, bodyBorder:false, items:[ new Ext.form.Label({ text: "#{msgs.form_create_dialog_select_type_label}", margin: "25 10 25 5" }), new Ext.form.ComboBox({ id: 'createformTypeCombo', margin: "8 10 25 5", allowBlank: false, forceSelection: true, editable:false, store: formTypeStore, valueField: 'value', displayField: 'name', width: 260, emptyText: '#{msgs.form_create_dialog_select_type}' }) ] }); this.items = [ this.form ]; this.callParent(arguments); } }); 

I create this window on the xhtml page by clicking a button using:

 Form.FormTypeDialog.show(null, showFormWindowCallBack); 

It works fine and a combo box is displayed and I can select a value.

But if I open and close it 4 times, then the next display shows the values, but this does not allow me to select the last two values. I can only select the first value.

Please offer.

Note. I tried to copy and execute this code on the forms of other pages of my application. But the behavior is the same in all cases. This combo box is included in Ext.Window.

EDIT: JSON RESPONSE FROM Rest:

{"attributes": NULL, "full": true, "counting": 3, "errors": zero, "failure": false, "METADATA": NULL, "objects": [{"name": "Application" Provisioning policy form "," value ":" Application "}, {" name ":" Role "Provisioning policy form", "value": "Role"}, {"name": "Workflow Form", "value": "Workflow"}], "RequestID": NULL, "repeat" false "retryWait": 0, "status": "Success", "success": true, "warnings": zero}

Answer 1

I re-created this code, I had some errors displayed in Firefox using your code directly, so I changed some things.

By executing the code below and calling Ext.create("Form.FormTypeDialog", {}).show(); in the console window, closing the window and repeating do not replicate this problem. Could you try to use the code that I have and see if you have the same problem.

 Ext.application({ name: 'HelloExt', launch: function () { Ext.define('Form.FormTypeDialog', { extend: 'Ext.Window', id: 'formTypeDialog', formId: null, callbackFunction: null, modal: true, constructor: function (config) { var me = this; Ext.apply(this, { buttons: [ { text: "#{msgs.form_create_dialog_button_cancel}", cls: 'secondaryBtn', handler: function () { me.close(); } }, { text: "#{msgs.form_create_dialog_button_next}", handler: function () { // Get selected form type } } ] }); this.callParent(arguments); }, initComponent: function () { this.setTitle("#{msgs.form_create_dialog_title}"); this.setHeight(175); this.setWidth(327); var myData = [ ["Application Provisioning Policy Form", "Application"], ["Role Provisioning Policy Form", "Role"], ["Workflow Form", "Workflow"], ]; var formTypeStore = Ext.create("Ext.data.ArrayStore", { fields: [ 'name', 'value' ], data: myData, storeId: "myStore" }); this.form = Ext.create("Ext.form.Panel", { style: 'padding:15px;background-color:#fff', border: false, bodyBorder: false, items: [ Ext.create("Ext.form.Label", { text: "#{msgs.form_create_dialog_select_type_label}", margin: "25 10 25 5" }), Ext.create("Ext.form.ComboBox", { id: 'createformTypeCombo', margin: "8 10 25 5", allowBlank: false, forceSelection: true, editable: false, store: formTypeStore, valueField: 'value', displayField: 'name', width: 260, emptyText: '#{msgs.form_create_dialog_select_type}' }) ] }); this.items = [ this.form ]; this.callParent(arguments); } }); Ext.create('Ext.Button', { text: 'Click me', renderTo: Ext.getBody(), handler: function() { Ext.create("Form.FormTypeDialog", {}).show(); } }); } }); 

You can also play with this code using / forking from this feed

Answer 2

It is not clear what the problem is. I use remote combo:

 Ext.define('ComboRemote', { extend: 'Ext.form.ComboBox', xtype: 'ComboRemote', emptyText: 'empty', width: 75, displayField: 'name', valueField: 'id', store: { model: 'ComboModel', proxy: { type: 'rest', url: '/serv/Res', extraParams: { query: '' }, reader: { root: "result", type: 'json' } }, autoLoad: true, }, queryMode: 'remote', pageSize: false, lastQuery: '', minChars: 0}); Ext.define('ComboModel', { extend: 'Ext.data.Model', fields: [ 'id', 'name' ]}); 

I hope to help

Answer 3

Try these possible solutions 1. Make the AutoLoad property of the repository true. 2. Add a delay of several ms