Estoy tratando de establecer un valor predeterminado en un ComboBox en ExtJS 3.4. He intentado establecer el value: 'Standard' en la configuración de ComboBox, pero eso solo coloca una cadena en el cuadro. Investigué un poco y traté de configurar la función de procesamiento posterior, pero aún no he conseguido que se complete. El objetivo es hacer que el cuadro seleccione realmente el valor y llene el cuadro con los datos de Json, de modo que el usuario pueda seleccionar entre los cuadros combinados posteriores.
var hatComboStore = new Ext.data.JsonStore({ autoLoad: true, fields: [ 'BIN_ID', 'BIN_DESC' ], baseParams: { method: 'post' }, url: 'json_bin_hat.php' }); var hatCombo = new Ext.form.ComboBox({ allowBlank: false, autoSelect: true, displayField: 'BIN_DESC', emptyText: 'Select a hat...', fieldLabel: 'Hat', forceSelection: false, hiddenName: 'hatId', itemId: 'hatId', listEmptyText: 'No records found', listeners: { afterrender: function(combo, record, index) { var hat = combo.getValue(); binCombo.store.baseParams.hat = hat; }, select: function(combo, record, index) { var hat = combo.getValue(); binCombo.store.baseParams.hat = hat; }, focus: function(combo) { binCombo.clearValue(); } }, mode: 'remote', msgTarget: 'side', name: 'hatDesc', store: hatComboStore, submitValue: true, triggerAction: 'all', valueField: 'BIN_ID' });¿Alguien tiene alguna idea? ¡Gracias por tu ayuda!
Lo tengo para trabajar usando un método de anulación .
Básicamente, displayValue es lo que quería mostrar ( 'Standard' ) y el value es lo que quería ejecutar ( value: 1 ). Aparentemente, es un poco difícil trabajar con la tienda remota, por eso fue necesaria la anulación.
var hatComboStore = new Ext.data.JsonStore({ autoLoad: true, fields: [ 'BIN_ID', 'BIN_DESC' ], baseParams: { method: 'post' }, url: 'json_bin_hat.php' }); var hatCombo = new Ext.form.ComboBox({ allowBlank: false, autoSelect: true, displayField: 'BIN_DESC', displayValue: 'Standard', emptyText: 'Select a hat...', fieldLabel: 'Hat', forceSelection: false, hiddenName: 'hatId', itemId: 'hatId', listEmptyText: 'No records found', listeners: { afterrender: function(combo, record, index) { var hat = combo.getValue(); binCombo.store.baseParams.hat = hat; }, select: function(combo, record, index) { var hat = combo.getValue(); binCombo.store.baseParams.hat = hat; }, focus: function(combo) { binCombo.clearValue(); } }, mode: 'remote', msgTarget: 'side', name: 'hatDesc', store: hatComboStore, submitValue: true, triggerAction: 'all', valueField: 'BIN_ID' value: 1 }); //Override method to default hatCombo value to 'Standard' while underlying value = 1 Ext.override(Ext.form.ComboBox, { initValue: Ext.form.ComboBox.prototype.initValue.createSequence(function() { if (this.mode == 'remote' && !!this.valueField && this.valueField != this.displayField && this.displayValue) { if (this.forceSelection) { this.lastSelectionText = this.displayValue; } this.setRawValue(this.displayValue); } }) });Parece que la propuesta de value no funciona para las tiendas remotas. Probablemente el combo se renderice antes de que se cargue la tienda. Puede establecer el valor después de que se haya cargado la tienda.
Esto funciona para mí (probado como un violín ExtJS 3.4 ).
var hatComboStore = new Ext.data.JsonStore({ autoLoad: true, fields: [ 'id', 'title' ], url: 'https://jsonplaceholder.typicode.com/todos' }); var hatCombo = new Ext.form.ComboBox({ fieldLabel: 'Hat', store: hatComboStore, displayField: 'title', valueField: 'id', mode: 'local', submitValue: true, triggerAction: 'all', // Apparently does not work with remote store. // value: '1' }); hatComboStore.on('load', () => hatCombo.setValue('1')); new Ext.form.FormPanel({ items: hatCombo, renderTo: Ext.getBody() });ver ejemplo de configuración de valor predeterminado:
Combo config: { triggerAction: 'all', id: 'dir_id', fieldLabel: 'Direction', queryMode: 'local', editable: false, xtype: 'combo', store : dirValuesStore, displayField:'name', valueField:'id', value: 'all', width: 250, forceSelection:true }