ExtJS 5 - レンダリング後に選択したレコードをプログラムで設定しますか？

Question

私は、同じストアを使用するコンボボックスが2つあるWebアプリケーションを構築しています。

ユーザは最初にコンボボックス1を設定します。コンボボックス2は、ユーザが特定のボタンをクリックすると表示されるフローティングパネルにあります。コンボボックス2が表示されたら、コンボボックス1で選択されたレコードがコンボボックス2に表示されます。

これまでコンボボックス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() 
      });