ExtJS 5 - Программная настройка выбранной записи после рендеринга?

Question

Я создаю веб-приложение, где у меня есть 2 комбинированных блока, которые используют один и тот же магазин.

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

До сих пор я использую привязку события afterrender для поля со списком 2, но ничего не кажется, работает:

Вот тело моей функции afterrender:

console.log('after render combobox hit!'); 

var comboBox1 = Ext.getCmp('comboBox1'); 

var store = component.getStore(); 
var record = comboBox1.findRecordByValue(comboBox1.getValue()); 
var rowIndex = store.indexOf(record); 

var selectedRecord = comboBox1.getStore().getAt(rowIndex); 

console.log('combobox selection index = ' + rowIndex); 

console.log('selected record = ' + selectedRecord.get('device_name')); 

component.select(selectedRecord); 

то, что я делаю, я получаю запись и индекс, выбранный в Combo Box 1, а затем попытаться установить, что, как значение в Combo Box 2. Команда select не работает. Я также пробовал следующее:

component.select(record, true); 

component.setValue(record.get('device_name')); 
component.setRawValue(record.get('device_name')); 

, но ни один из них не работал.

Я пытался сделать эту работу часами и ничего не работаю, и она начинает расстраивать.

Кто-нибудь еще пытался программным образом установить выбор по умолчанию для combobox? Любое руководство будет оценено по достоинству. Благодарю.

Answer 1

Попробуйте это (копирование и вставка на Fiddle):

  var states = Ext.create('Ext.data.Store', { 
       fields: ['abbr', 'name'], 
       data : [ 
        {"abbr":"AL", "name":"Alabama"}, 
        {"abbr":"AK", "name":"Alaska"}, 
        {"abbr":"AZ", "name":"Arizona"} 
        //... 
       ] 
      }); 

      Ext.create('Ext.form.ComboBox', { 
       fieldLabel: 'Combobox 1', 
       itemId: 'combobox1ItemId', 
       emptyText: 'Select item', 
       store: states, 
       queryMode: 'local', 
       displayField: 'name', 
       valueField: 'abbr', 
       renderTo: Ext.getBody() 
      }); 

      Ext.create('Ext.Button', { 
       text: 'Click me', 
       width: 120, 
       margin: '10 2 10 120', 
       renderTo: Ext.getBody(), 
       handler: function() { 

        var combo1 = Ext.ComponentQuery.query('#combobox1ItemId')[0]; 
        var combo2 = Ext.ComponentQuery.query('#combobox2ItemId')[0]; 
        var combo1Value = combo1.getValue(); 

        combo2.select(combo1Value) 

        var store = combo2.getStore(); 
        var item = store.findRecord(combo2.displayField, combo1Value); 

        setTimeout(function() { 
         combo2.fireEvent('select', combo2, [item]); 
        }, 200); 

       } 
      }); 

      Ext.create('Ext.form.ComboBox', { 
       fieldLabel: 'Combobox 2', 
       itemId: 'combobox2ItemId', 
       store: states, 
       queryMode: 'local', 
       displayField: 'name', 
       valueField: 'abbr', 
       renderTo: Ext.getBody() 
      });