Extjs 4コンボボックスのデフォルト値

Question

私はExtJs 3から4バージョンからアプリケーションを移行しています。 私はformPanelでいくつかのコンボボックスを持っていましたが、以前はhiddenField とそのすべてstuffを使ってdisplayFieldの代わりにvalueFieldを送信しました。

私のすべての適応はうまく動作します（値フィールドは送信しています）が、コンボボックスのデフォルト値を設定できません。ページ読み込み後に空白として表示されます。 以前は、configの 'value'パラメータを指定するだけでした。 これを修正する方法はありますか？

私のコード - モデルとストア：

Ext.define('idNamePair', { 
    extend: 'Ext.data.Model', 
    fields: [ 
     {name: 'id', type: 'string'}, 
     {name: 'name', type: 'string'} 
    ] 
}); 

var dirValuesStore = new Ext.data.Store({ 
    model: 'idNamePair', 
    proxy: { 
     type: 'ajax', 
     url: '../filtervalues.json', 
     reader: { 
      type: 'json', 
      root: 'dir' 
     } 
    }, 
    autoLoad: true 
}); 

コンボの設定：

{ 
    triggerAction: 'all', 
    id: 'dir_id', 
    fieldLabel: 'Direction', 
    queryMode: 'local', 
    editable: false, 
    xtype: 'combo', 
    store : dirValuesStore, 
    displayField:'name', 
    valueField:'id', 
    value: 'all', 
    width: 250, 
    forceSelection:true 
} 

Answer 1

私はあなたのコンボの設定がqueryMode: 'local'を持って気づきました。この値は、データが配列内にローカルに格納されるときに使用されます。しかし、あなたのモデルはAJAXプロキシを使用しています。 Extが混乱して、設定しようとしているデフォルト値が見つからないことがありますか？

アップデート：上記の投稿後、自分のアプリをExt3から4にマイグレーションしていましたが、まったく同じ問題が発生しました。 。 queryModeがその一部だと確信していますが、主な問題は、コンボボックスにレンダリング時に必要なデータがまだないことです。設定値valueには値はありますが、データストアにはまだ一致するものはありません。したがって、フィールドは空白になります。 autoLoadプロパティは、データがロードされたときに使用されるコールバック関数を指定できることも発見しました。

store: new Ext.data.Store({ 
    model: 'MyModel', 
    autoLoad: { 
     scope: this, 
     callback: function() { 
      var comboBox = Ext.getCmp("MyComboBoxId"); 
      var store = comboBox.store; 

      // set the value of the comboBox here 
      comboBox.setValue(blahBlahBlah); 
     } 
    } 
    ... 
}) 

Answer 2

私は同じ問題を抱えていましたが、アイテムがストアに追加される前に選択リストのレンダリングと関係がありました。私は幸運なことなく上記のコールバックメソッドを試してみました（ストアではなく選択リストにコールバックする必要があると思います）。

私は店にアイテムを追加した後、この行を追加し、それが正常に動作します：

Ext.getCmp('selectList').setValue(store.getAt('0').get('id')); 

Answer 3

私は、これはあなたが（非同期）コンボボックスをロードする時、あなたは値を設定した時間に関係しています賭けますコンボボックスのこの問題を解決するには、次のようにします。

Ext.define('idNamePair', { 
    extend: 'Ext.data.Model', 
    fields: [ 
     {name: 'id', type: 'string'}, 
     {name: 'name', type: 'string'} 
    ] 
}); 

var dirValuesStore = new Ext.data.Store({ 
    model: 'idNamePair', 
    proxy: { 
     type: 'ajax', 
     url: '../filtervalues.json', 
     reader: { 
      type: 'json', 
      root: 'dir' 
     } 
    }, 
    autoLoad: false // set autoloading to false 
}); 

ストアのオートロードはオフです。今すぐの後にComboBoxを特定の場所に配置した場合 - 開始ポストのコードを使用して、ストアを手動でロードするだけです：dirValuesStore.load();。

これはおそらく、一部のコンポーネントのinitComponent()の設定Ext.apply(this, {items: [..., {xtype: 'combo', ...}, ...]})の後です。

Answer 4

は、このコードを試してみてください。

var combo = new Ext.form.field.ComboBox({ 
    initialValue : something, 
    listeners: { 
     afterrender: function(t,o) { 
      t.value = t.initialValue;  
     } 
    } 
}) 

Answer 5

あなたは、コールバックに直接ロジックを置く、またはすべての店舗を処理するための機能を設定することができます。これらの読み取りのために=====================

var store1 = Ext.create('Ext.data.Store', { 
    ... 
    autoLoad: { 
     callback: initData 
    } 
}); 

var store2 = Ext.create('Ext.data.Store', { 
    ... 
    autoLoad: { 
     callback: initData 
    } 
}); 

var myComboStores = ['store1', 'store2'] 

function initData() { 
    var loaded = true; 
    Ext.each(myComboStores, function(storeId) { 
     var store = Ext.StoreManager.lookup(storeId); 
     if (store.isLoading()) { 
      loaded = false; 
     } 
    } 
    if(loaded) { 
     // do stuff with the data 
    } 
} 

、あなたの 'コンボ' に値設定/プロパティコンボボックスに初期値が設定されるようにオブジェクトをある値に設定する必要があります。あなたはすでにこれをしています。値 'all'は、デフォルトとして設定する前に店舗内にある必要があります。

value: 'all' 

また、それはあなたがすでにやったvalueField設定、の値を設定することをお勧めします。そうしないと、combo.getValue（）を呼び出すときに選択リスナーが正しい値を取得しません。

Answer 6

これを実行する最善の方法は、afterrenderイベントをリッスンしてから、コールバック関数のデフォルト値を設定することです。

は、このコードを参照してください：お店の設定にloading: trueを追加

new Ext.form.field.ComboBox({ 
    //This is our default value in the combobox config 
    defaultValue: 0, 
    listeners: { 
     //This event will fire when combobox rendered completely 
     afterrender: function() { 
      //So now we are going to set the combobox value here. 
      //I just simply used my default value in the combobox definition but it's possible to query from combobox store also. 
      //For example: store.getAt('0').get('id'); according to Brik's answer. 
      this.setValue(this.defaultValue);  
     } 
    } 
}); 

Answer 7

はそれを修正します。 autoLoad: trueとforceSelection: trueに問題があるようです。 この小さなハックは、コンボボックスが、ロード機能がまだ起動されていなくてもストアがロードしていると信じさせます。

Answer 8

configの 'value'パラメータを指定すると、コンボボックスのデフォルト値を正しく設定できます。

例では、ちょうどforceSelection:falseと設定しても正常に動作します。

forceSelection:trueに設定する場合は、店舗から返されたデータにデフォルト値（この場合は「all」）に等しい値を持つ項目が含まれていることを確認する必要があります。デフォルトでは空のテキストです。 がより明確にするために、このことによってあなたのdirValuesStore定義を交換してください：

var dirValuesStore = Ext.create('Ext.data.Store', { 
     fields: ['id', 'name'], 
     data: [ 
      {id: 'all', name: 'All'}, 
      {id: '1', name: 'Name 1'}, 
      {id: '2', name: 'Name 2'}, 
      {id: '3', name: 'Name 3'}, 
      {id: '4', name: 'Name 4'} 
     ] 
    }) 

あなたはそれが機能が表示されます！ ExtJS 5.0.1では

Answer 9

これは設定コンボで、動作するはずです：

... 
editable: false, 
forceSelection: true, 
emptyText: '',