web-dev-qa-db-ja.com

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

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

私の適応はすべて正常に機能します（値フィールドIS submitting）が、コンボボックスのデフォルト値を設定することはできず、ページのロード後に空として表示されます。 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
}
extjscomboboxextjs4
29
BlackLine

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

ストアにアイテムを追加した後に次の行を追加しましたが、正常に機能します。

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

ストア構成にloading: trueを追加すると修正されます。 autoLoad: trueとforceSelection: trueに問題があるようです。この小さなハックにより、ロード機能がまだ実行されていない場合でも、ストアがロードされているとコンボボックスに認識させます。

10
Triqui

これを行う最良の方法は、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);    
        }
    }
});
7
Afshin Mehrabani

コンボの設定にqueryMode: 'local'。この値は、データがローカルに配列に保存されるときに使用されます。しかし、モデルはAJAXプロキシを使用しています。これはExtを混乱させ、設定しようとしているデフォルト値を見つけられない可能性がありますか？queryMode soを削除してくださいデフォルトは 'remote'の値です（または明示的に設定します）。

更新：上記を投稿した直後に自分のアプリを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);
        }
    }
    ...
})
4
curtisdf

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

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

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

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

value: 'all'

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

3
MacGyver

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

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

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

それはおそらく、いくつかのコンポーネントのExt.apply(this, {items: [..., {xtype: 'combo', ...}, ...]})のc​​onfig initComponent()の後です。

0
hvtilborg

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

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

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

あなたの例では、forceSelection:falseを設定するだけで問題なく動作します。

forceSelection:trueを設定する場合は、ストアから返されるデータに、デフォルト値（この場合は「すべて」）に等しい値を持つアイテムが含まれていることを確認する必要があります。それ以外の場合は、デフォルトでは空のテキスト。より明確にするために、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'}
        ]
    })

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

0
Haminh Nguyen

Extjs 5.0.1では、これは設定コンボで機能するはずです：

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