30

アプリケーションを ExtJs 3 から 4 バージョンに移行しています。formPanel にいくつかのコンボボックスがあり、以前は、displayField の代わりに、hiddenName などを使用して valueFieldを送信していました。

私の適応はすべて正常に機能します (値フィールドは送信されます) が、コンボボックスのデフォルト値を設定できません。ページの読み込み後に空として表示されます。以前は、構成で「値」パラメーターを指定するだけでそれを行いました。それを修正する方法はありますか？

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

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
}
4

9 に答える 9

23

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

ストアにアイテムを追加した後に次の行を追加しましたが、問題なく動作します。

Ext.getCmp('selectList').setValue(store.getAt('0').get('id'));
于 2011-08-18T09:38:51.647 に答える
13

ストア構成に追加loading: trueすると修正されます。autoLoad: trueとに問題があるようforceSelection: trueです。この小さなハックにより、ロード関数がまだ起動されていなくても、ストアがロードされているとコンボボックスに信じ込ませることができます。

于 2013-01-21T14:13:42.197 に答える
11

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

このコードを参照してください：

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);    
        }
    }
});
于 2013-01-06T10:31:16.040 に答える
4

ロジックをコールバックに直接配置するか、すべてのストアを処理する関数を設定できます。

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
    }
}

=====================

これらの読み取りでは、「コンボ」オブジェクトの値config/property を何らかの値に設定して、コンボ ボックスが初期値を取得するようにする必要があります。あなたはすでにこれを行っています。デフォルトとして設定する前に、値「all」もストアにある必要があります。

value: 'all'

また、すでに行っているvalueField 構成の値を設定することをお勧めします。そうしないと、combo.getValue() を呼び出したときに選択リスナーが正しい値を取得できません。

于 2012-09-20T01:49:23.273 に答える
1

構成で「値」パラメーターを指定することは、コンボボックスの既定値を設定する正しい方法です。

あなたの例では、設定するだけ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'}
        ]
    })

あなたはそれがうまくいくのを見るでしょう！

于 2013-06-05T09:11:06.853 に答える
1

Extjs 5.0.1 では、構成コンボでこれが機能するはずです:

...
editable: false,
forceSelection: true,
emptyText: '',
于 2014-08-25T06:32:17.240 に答える
1

このコードを試してください：

var combo = new Ext.form.field.ComboBox({
    initialValue : something,
    listeners: {
        afterrender: function(t,o ) {
           t.value = t.initialValue;    
        }
    }
})
于 2011-12-03T23:22:36.963 に答える
1

これは、コンボボックスを (非同期で) ロードする時間と、コンボボックスの値を設定する時間に関係していると思います。この問題を解決するには、次のようにします。

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();(最初の投稿のコードを使用して)、ストアを手動でロードするだけです。

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

于 2011-11-30T13:26:44.983 に答える