Valor predeterminado de Extjs 4 combobox

extjs4

Question

Estoy migrando mi aplicación de la versión 3 a 4 de ExtJs. Tengo varios cuadros combinados en formPanel, y anteriormente he usado hiddenName y todo eso para enviar valueField en lugar de displayField.

Todas mis adaptaciones funcionan bien (presentación del campo de valor IS), pero no puedo establecer los valores predeterminados para los cuadros combinados, se muestran como vacíos después de la carga de la página. Anteriormente, lo hice solo al especificar el parámetro ''valor'' en config. ¿Hay alguna idea de cómo solucionar eso?

Mi código - Modelo y tienda:

Ext.define(''idNamePair'', {
    extend: ''Ext.data.Model'',
    fields: [
        {name: ''id'', type: ''string''},
        {name: ''name'',  type: ''string''}
    ]
});

var dirValuesStore = new Ext.data.Store({
    model: ''idNamePair'',
    proxy: {
        type: ''ajax'',
        url: ''../filtervalues.json'',
        reader: {
            type: ''json'',
            root: ''dir''
        }
    },
    autoLoad: true
});

Configuración combinada:

{
    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
}

Answer 1

Agregar loading: true a la configuración de tu tienda lo arreglará. Parece que hay un problema con autoLoad: true y forceSelection: true . Este pequeño truco hará que tu combobox crea que la tienda está cargando incluso si la función de carga no se ha activado aún.

Answer 2

Apuesto a que esto tiene que ver con el momento en que (asincrónicamente) carga el cuadro combinado y la hora en que establece el valor del cuadro combinado. Para superar este problema, simplemente haz esto:

Ext.define(''idNamePair'', {
    extend: ''Ext.data.Model'',
    fields: [
        {name: ''id'', type: ''string''},
        {name: ''name'',  type: ''string''}
    ]
});

var dirValuesStore = new Ext.data.Store({
    model: ''idNamePair'',
    proxy: {
        type: ''ajax'',
        url: ''../filtervalues.json'',
        reader: {
            type: ''json'',
            root: ''dir''
        }
    },
    autoLoad: false // set autoloading to false
});

La carga automática de la tienda está apagada. Ahora, después de haber colocado su ComboBox en un lugar determinado, usando el código en su publicación inicial, simplemente carga la tienda manualmente: dirValuesStore.load(); .

Eso es probablemente después de la configuración Ext.apply(this, {items: [..., {xtype: ''combo'', ...}, ...]}) en el componente initComponent() algún componente.

Answer 3

En Extjs 5.0.1 esto debería funcionar, en config combo:

...
editable: false,
forceSelection: true,
emptyText: '''',

Answer 4

Especificar el parámetro ''valor'' en la configuración es una forma correcta de establecer los valores predeterminados para los cuadros combinados.

En su ejemplo, simplemente configure forceSelection:false , funcionará bien.

En caso de que desee establecer forceSelection:true , debe asegurarse de que los datos devueltos desde su tienda contengan un artículo que tenga el valor igual a su valor predeterminado (''all'' en este caso). De lo contrario, será un texto vacío por defecto. Para ser más claro, reemplace su definición dirValuesStore por esto:

    var dirValuesStore = Ext.create(''Ext.data.Store'', {
        fields: [''id'', ''name''],
        data: [
            {id: ''all'', name: ''All''},
            {id: ''1'', name: ''Name 1''},
            {id: ''2'', name: ''Name 2''},
            {id: ''3'', name: ''Name 3''},
            {id: ''4'', name: ''Name 4''}
        ]
    })

¡Verás que funciona!

Answer 5

La mejor manera de hacerlo es escuchar el evento afterrender y luego establecer el valor predeterminado en la función de devolución de llamada.

Vea este código:

new Ext.form.field.ComboBox({
    //This is our default value in the combobox config
    defaultValue: 0,
    listeners: {
        //This event will fire when combobox rendered completely
        afterrender: function() {
           //So now we are going to set the combobox value here.
           //I just simply used my default value in the combobox definition but it''s possible to query from combobox store also.
           //For example: store.getAt(''0'').get(''id''); according to Brik''s answer.
           this.setValue(this.defaultValue);    
        }
    }
});

Answer 6

Noté que tu configuración Combo tiene queryMode: ''local'' . Ese valor está destinado a cuando sus datos se almacenan localmente en una matriz. Pero su modelo está usando un proxy AJAX. ¿Podría ser que esto confunde a Ext, por lo que no puede encontrar el valor predeterminado que intentas establecer? Intenta eliminar queryMode para que queryMode el valor predeterminado de ''remote'' (o queryMode explícitamente).

ACTUALIZACIÓN: estaba migrando mi propia aplicación de Ext3 a 4 justo después de publicar lo anterior, y me encontré con el mismo problema. Estoy seguro de que queryMode es parte de esto, pero el problema principal es que el combobox aún no cuenta con los datos necesarios en el momento en que se procesa. El value configuración le da un valor, pero todavía no hay nada en el almacén de datos para que coincida, por lo que el campo aparece en blanco. Descubrí que la propiedad autoLoad también puede especificar una función de devolución de llamada que se utilizará cuando se carguen los datos. Esto es lo que puedes hacer:

store: new Ext.data.Store({
    model: ''MyModel'',
    autoLoad: {
        scope: this,
        callback: function() {
            var comboBox = Ext.getCmp("MyComboBoxId");
            var store = comboBox.store;

            // set the value of the comboBox here
            comboBox.setValue(blahBlahBlah);
        }
    }
    ...
})

Answer 7

Prueba este código:

var combo = new Ext.form.field.ComboBox({
    initialValue : something,
    listeners: {
        afterrender: function(t,o ) {
           t.value = t.initialValue;    
        }
    }
}) 

Answer 8

Puede poner la lógica directamente en la devolución de llamada o configurar una función para manejar todas las tiendas.

var store1 = Ext.create(''Ext.data.Store'', {
    ...
    autoLoad: {
        callback: initData 
    }
});

var store2 = Ext.create(''Ext.data.Store'', {
    ...
    autoLoad: {
        callback: initData 
    }
});

var myComboStores = [''store1'', ''store2'']

function initData() {
    var loaded = true;
    Ext.each(myComboStores, function(storeId) {
        var store = Ext.StoreManager.lookup(storeId);
        if (store.isLoading()) {
            loaded = false;
        }
    }
    if(loaded) {
        // do stuff with the data
    }
}

=====================

Para aquellos que leen, el valor config / property en su objeto ''combo'' debe establecerse en algún valor para que el cuadro combinado obtenga un valor inicial. Ya has hecho esto. El valor ''todo'' también debe estar en su tienda antes de que lo configure como el predeterminado.

value: ''all''

Además, es una buena práctica establecer un valor para la configuración de ValueField , que ya has hecho. Si no lo hace, el oyente de selección no obtendrá el valor correcto al llamar a combo.getValue ().

Answer 9

Tuve el mismo problema, afaik tiene que ver con la representación de la lista de selección antes de que los artículos se agreguen a la tienda. Probé el método de devolución de llamada mencionado anteriormente sin suerte (supongo que tendría que ser una devolución de llamada en la lista de selección en lugar de la tienda).

Agregué esta línea después de agregar elementos a la tienda y funciona bien:

Ext.getCmp(''selectList'').setValue(store.getAt(''0'').get(''id''));