Configurar los datos de la tienda de un cuadro combinado de extjs 6 en tiempo de ejecución da como resultado un error de visualización

2

Tengo un prototipo de cuadro combinado en el que intento configurar los datos de la tienda en tiempo de ejecución.

Cuando trato de hacer esto, el menú debajo del cuadro combinado no se procesa (o se muestra tan pequeño que en realidad no se puede ver). Está aquí en sencha violín :

Ext.define('ComboBoxRates',{
    extend: 'Ext.data.Store',
    alias: 'store.rates',
    storeId: 'ratescombo',
    fields: ['rate', 'description', 'price' ]
});

Ext.define('ComboPanel',{
    extend: 'Ext.panel.Panel',
    title: 'Test',
    renderTo: Ext.getBody(),
    items:[
        {
            xtype: 'combobox',
            editable: false,
            displayField: 'description',
            valueField: 'price',
        }
    ]    
});


Ext.application({
    name : 'Fiddle',

    launch : function() {

        var data = [
            {
                description: "$105: Standard Registration",
                price: "105",
                rate: "rate1"
            },
            {
                description: "$125: Non-Member Rate",
                price: "125",
                rate: "rate2"
            },
            {
                description: "$44: Price for SK tester",
                price: "44",
                rate: "rate3"
            },
            {
                description: "$11: Another price :O",
                price: "11",
                rate: "rate5"
            }
        ];

        var rates = Ext.create('ComboBoxRates');

        rates.setData(data);

        // Showing data is loaded into the store
        console.group('directly from store instance');
        rates.each(function (rate){
           console.log(rate.getData());
        });
        console.groupEnd();

        var panel = Ext.create('ComboPanel');


        panel.down('combobox').setStore(rates);

        // Showing that the data is definitely in the widget's store        
        console.group('from widget store');
        panel.down('combobox').getStore().each(function (rate){
           console.log(rate.getData());
        });
        console.groupEnd();



    }
});

Sé que los datos se cargan en la tienda del cuadro combinado (abra el registro de la consola en el violín), así que no estoy seguro de por qué no se está procesando correctamente.

Sé que esto parece una tontería en este contexto, pero el prototipo es una lógica extraída de la columna de widgets de una cuadrícula donde cada fila tiene diferentes datos de la tienda.

También construí un prototipo de un paso atrás con la misma estructura pero los mismos datos están incluidos en la definición de la tienda y eso funciona:

Ext.define('ComboBoxRates',{
    extend: 'Ext.data.Store',
    alias: 'store.rates',
    storeId: 'ratescombo',
    fields: ['rate', 'description', 'price' ],
    data: [
        {
            description: "$105: Standard Registration",
            price: "105",
            rate: "rate1"
        },
        {
            description: "$125: Non-Member Rate",
            price: "125",
            rate: "rate2"
        },
        {
            description: "$44: Price for SK tester",
            price: "44",
            rate: "rate3"
        },
        {
            description: "$11: Another price :O",
            price: "11",
            rate: "rate5"
        }
    ]
});

Ext.define('ComboPanel',{
    extend: 'Ext.panel.Panel',
    title: 'Test',
    renderTo: Ext.getBody(),
    items:[
        {
            xtype: 'combobox',
            editable: false,
            displayField: 'description',
            valueField: 'price',
        }
    ]    
});


Ext.application({
    name : 'Fiddle',

    launch : function() {


        var rates = Ext.create('ComboBoxRates');

        var panel = Ext.create('ComboPanel');

        panel.down('combobox').setStore(rates);
    }
});

Pensé que un updateLayout resolvería el problema, pero no es así.

¿Hay algún problema con mi código? ¿Hay alguna forma de configurar los valores de un cuadro combinado en tiempo de ejecución?

3
  • Problema con tu tienda. no está bien definido. Mira eso 30 oct 2015 a las 3:17
  • ¿Qué no está definido correctamente en la tienda? 30 oct 2015 a las 3:18
  • Traté de inspeccionar su tienda que se muestra indefinida. por lo que solo no se pudieron configurar sus datos. compruebe si se perdió la oportunidad de llamar a la tienda dentro de la aplicación externa. y tarifas = Ext.getStore ('ComboBoxRates'); es la sintaxis correcta 30 oct 2015 a las 3:37
2

Falta queryMode, utilícelo queryMode: 'local'en el combo.

Ejemplo de trabajo: https://fiddle.sencha.com/#fiddle/10al

1
  • 1
    Me di cuenta de que en algún momento después de usar setStore()/ setData()combo, la lista se dibuja correctamente. ¿Podría explicar por qué queryModecausa tal problema? 26/07/17 a las 16:29