0

最初の extjs コンボ ボックスを選択すると、残りの値がフォームに表示されます。

Extjs を使用してアドレス帳アプリケーションを作成しています。

最初のコンボボックスを選択すると、残りの値が以下の形式で表示されます。

以下はコードです：

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

user : [{"FirstName": "sssss", "EmailAddress": "bbb@gmail.com}, {"FirstName": "bbbb", "EmailAddress": "aaa@gmail.com"}]

コンボボックスから FirstName を選択すると、下のテキストフィールドに EmailAddress が表示されます。

var cntry_panel = new Ext.Panel({
    header: false,
    id: 'org-main',
    layout: 'form',
    labelWidth: 200,
    border: false,
    bodyStyle: 'padding:15px',
    title: 'Select Country And State',
    labelAlign: "right",
    renderTo: Ext.getBody(),
    items: [{
        xtype: 'combo',
        fieldLabel: 'First Name',
        id: 'Name',
        store: user, 
        displayField: 'FirstName',
        mode: 'remote',
        width: 260,
        forceSelection: true,
        triggerAction: 'all',
        emptyText: 'Select FirstName...',
     }, {
         xtype: 'combo',
         fieldLabel: 'Email Address',
         store: user, 
         mode: 'local',
         width: 150,
         forceSelection: true,
         triggerAction: 'all',
         selectOnFocus: true
    }]
});
4

1 に答える 1

0

まず、電子メール アドレスのフィールドはtextfield、そのフィールドに として使用している値のリストがない限り、おそらく である必要がありますcombo。

次に、簡単にアクセスできるように、メール フィールドに などのitemIdプロパティを設定します。emailField

次に、First Name フィールドの構成で、selectイベントのリスナーを追加します。

{
    xtype: 'combo',
    fieldLabel: 'First Name',
    //...other properties...
    listeners: {
        select: function(combo, records) {
            combo.up('#org-main').down('#emailField').setValue(records[0].get('email'));
        }
    }
}

でのイベントのドキュメントを実際に確認する必要がありますExt.form.field.ComboBox。これは非常に一般的な操作であり、大量の ExtJS を使用する場合に理解することが重要です。 http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.ComboBox

于 2013-07-01T12:26:48.280 に答える