web-dev-qa-db-ja.com

extjsコンボボックスの値を取得する方法は?

コンボボックスの次のコードがあります。コンボボックスで選択された値を取得し、その値を変数にロードして、後で使用するにはどうすればよいですか。

ありがとうございました

Ext.define('Column', {
    extend: 'Ext.data.Model',
    fields: ['data1', 'Data2']
});

var store = Ext.create('Ext.data.Store', {
    model: 'Column',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: '/data.xml',
        reader: {
            type: 'xml',
            record: 'result'
        }
    }
});

var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
    store: store,
    displayField: 'data1',
    valueField: 'data1',
    width: 250,
    labelWidth: 120,
    fieldLabel: 'select a value',
    renderTo: 'simpleCombo',
    queryMode: 'local',
    typeAhead: true
});
9
shiro

Selectイベントを使用するだけです

var simpleCombo = Ext.create('Ext.form.field.ComboBox', {
            store: store,
            displayField: 'data1',
            valueField: 'data1' ,
            width: 250,
            labelWidth: 120,
            fieldLabel: 'select a value',
            renderTo: 'simpleCombo',
            queryMode: 'local',
            typeAhead: true,
            listeners: { 
               select: function(combo, records) {
                   // note that records are a array of records to be prepared for multiselection
                   // therefore use records[0] to access the selected record
               }
        });

APIリンク

コメントからの追加コンテンツ:

コンボボックスの multiSelect プロパティを見てください。定義された区切り文字で区切られたすべての値を取得し、selectイベントは、複数のレコードを含むレコード配列を提供します。 getValue()は、レコード自体ではなく、文字列である定義済みのdisplayFieldのみを提供することに注意してください。したがって、iComboValue [0]を使用すると、最初の文字が得られます。選択したレコードには、常に選択したイベントを使用してアクセスする必要があります。ただし、後で使用するためにそれらを配列に格納し、新しい選択で上書きすることができます。

11
sra

次のものも使用できます。

var iComboValue = simpleCombo.getValue();
7
Izhaki

これを試してみるべきかもしれません

 // to get the combobox selected item outside the combo listener
        simpleCombo.on('change', function (combo, record, index) {

            alert(record);  // to get the selected item

            console.log(record);  // to get the selected item

        });
0
Ahmed MEZRI