ExtJS 5 - 렌더링 후 선택한 레코드를 프로그래밍 방식으로 설정 하시겠습니까?

Question

동일한 저장소를 사용하는 2 개의 콤보 상자가있는 웹 응용 프로그램을 구축하고 있습니다.

사용자가 먼저 콤보 상자 1을 설정하면 콤보 상자 2는 사용자가 특정 단추를 클릭 할 때 표시되는 부동 패널에 있습니다. 내가 원하는 것은 콤보 상자 2가 나타나면 미리 선택된 레코드가 콤보 상자 1에서 선택된 레코드가 될 것입니다.

지금까지 콤보 상자 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); 

나는 상자 1 콤보에서 선택한 레코드와 인덱스를 가져온 다음 시도과 설정 내가 뭘입니다 : 여기

내 afterrender 함수의 몸 : 아무것도 작동하는 것 같다 콤보 상자 2의 값입니다. select 명령이 작동하지 않았습니다. 나는 또한 다음을 시도했다 :

component.select(record, true); 

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

그러나 그 중 아무 것도 잘 작동하지 않는다.

나는 몇 시간 동안이 작품을 만들려고 노력했지만 아무 것도 작동하지 않으며 좌절하기 시작했습니다.

누구나 콤보 상자의 기본 선택 항목을 프로그래밍 방식으로 설정하려고 했습니까? 모든 리드가 인정 될 것입니다. 감사.

Answer 1

이 (복사 및 바이올린에 붙여 넣기)하십시오 :

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