Установка данных хранилища extjs 6 combobox во время выполнения приводит к ошибке отображения

Question

У меня есть прототип комбинированного блока, в котором я пытаюсь установить данные хранилища во время выполнения.

Когда я пытаюсь это сделать, меню под выпадающим списком не отображает (или оно становится настолько маленьким, что вы на самом деле не видите его). Это here on sencha fiddle:

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



    } 
}); 

Я знаю, что данные загружаются в хранилище COMBOBOX (в открыть журнал консоли в скрипкой), так что я не знаю, почему это не правильно делает.

Я знаю, что в этом контексте это кажется глупым, но прототип выводится из столбца виджета сетки, где каждая строка имеет разные данные хранилища.

Я также построил one-step-back prototype с той же структурой, но и те же данные встраиваются в определении магазина и что работает:

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

Я думал UpdateLayout бы решить эту проблему, но это не так.

С кодом нет в коде? Есть ли способ установить значения combobox во время выполнения?

Answer 1

Вам не хватает queryMode, используйте queryMode: 'local' в комбо.

Рабочий пример: https://fiddle.sencha.com/#fiddle/10al