ExtJS comboboxのデフォルトオプションを設定

ドロップダウンボックスで一般的なオプションを選択するのは一般的なニーズで、HTMLのselectコントロールで実現するのは簡単ですが、ExtJSのcomboboxで実現するにはさらに苦労します.主な考え方は次のとおりです.

は自動ロード(autoLoad:true)のstoreを定義し、ユーザーがcomboboxと対話しない前にオプションデータが使用可能であることを保証します.

storeのロードが完了すると、プリセットが必要なデータ項目が見つかり、comboboxのsetValue()メソッドが呼び出されます.

以下に、実行可能な実装例を示します.
 

/* define the store */
var stDataSources = new Ext.data.JsonStore(
  { root: 'dataSources',
    totalProperty: 'total',
    idProperty: 'datadir',
    id:'datadir',
    autoLoad: true,
    remoteSort: false,
    fields: [
      {name: 'datadir', type: 'string'},
      {name: 'label', type: 'string'}
    ],
    baseParams: {usr: usr, pwd: pwd, org: org},
    sortInfo: {field: 'label', direction: 'ASC'},
    proxy: new Ext.data.HttpProxy({
      url: 'cgi/get-datasources.cgi'
    })
});

/* define the combobox field */
{ 
          fieldLabel:'Use data from',
          name: 'new_datasrc',
          id: 'cmbData',
          hiddenName: 'new_datasrc',
          hiddenId: 'new_datasrc',
          xtype: 'combo',
          triggerAction: 'all',
          allowBlank: false,
          forceSelection: true,
          mode: 'local',
          store: stDataSources,
          displayField:'label',
          valueField: 'datadir',
          typeAhead: true,
          forceSelection: true,
          selectOnFocus: true,
          minChars: 2,
          tooltipText: "Select Data Source.",
          listeners: {
            render: function(c) {
              c.getStore().on("load", function(s, r, o) {
                c.setValue(r[0].get('datadir'));
              });
            }
          }
        }

この例では、プリセットオプションを設定して、storeのloadイベント処理ルーチンを登録して実装します.renderイベントは通常storeのloadイベントよりも早く発生し、正しいタイミングを保証することができます.もう1つの方法は、comboxのshowイベントでstoreからプリセットオプションを直接取り出し、comboboxのsetValueメソッドを呼び出すことです.
 

          listeners: {
            show: function(c) {
              c.setValue(c.getStore().getAt(0).get('datadir'));
          }

しかし、comboboxのshowイベントはしばしばトリガーされない.