1

アプリケーションでextjs-6を使用しています。私はコンボボックスを持っています。このコンボは 3 つの値を持つことができます。ユーザーがvalue1またはを選択した場合はvalue22 つ登録する必要がありますが、選択した場合は3 つ登録する必要があります。 textfieldvalue3textfield

私はextjs-6にreference設定があることを知っており、次のように使用できます：

Ext.create('Ext.panel.Panel', {
    title: 'Sign Up',

    viewModel: {
        type: 'test'
    },

    items: [{
        xtype: 'checkbox',
        boxLabel: 'Is Admin',
        reference: 'isAdmin'
    },{
        xtype: 'textfield',
        fieldLabel: 'Admin Key',
        bind: {
            disabled: '{!isAdmin.checked}'
        }
    }]
});

どうすればこれを実装できますか?
注: これらtextfield(theme for の 2 つと theme forvalue1, vlaue1の 3 つvalue3が必要です)。

4

1 に答える 1

3

私の例では、コンボボックスの選択されたレコードに基づいてテキストフィールドを無効にします。これを実現するには、2 つ (またはそれ以上) の方法があります。

  1. このバインドされたレコードを使用して、コンボの選択されたレコードをバインドし、テキストフィールド (またはバインド可能な構成) を「無効」に設定できます。

  2. 数式を使用して、コンボの選択した値に基づいて true または false (または選択したレコードの別のプロパティ) を返し、テキストフィールドを「無効」に設定できます。

選択したレコードをビューの宣言にバインドします (viewmodel を使用せずに)

選択したレコードをプロパティにバインドするには、これをコンボ構成に追加します。

{
    xtype: 'combo',
    bind: {
        selection: '{selectedRecord}'
    }
}

これで、そのプロパティを使用して無効に設定できるようになりました。これをテキストフィールドの構成に追加します。

{
    xtype: 'textfield',
    bind: {
        disabled: '{!selectedRecord.value}'
    }
}

ここで実際の例を見つけることができます: https://fiddle.sencha.com/#fiddle/tec

数式を使用して、(選択したレコードに基づいて) 値を返し、バインドします

コンボの選択されたレコードを取得するには、参照構成を使用してコンボにバインドされる数式を作成します。

formulas: {
     disableTextField: {
         bind: {
             bindTo: '{data2.selection}',
             deep: true
         },
         get: function(record) {
             return record ? record.id !== 3 : true;
         }
    }
 }

次に、'disableTextField' の戻り値をテキスト フィールドの目的のプロパティにバインドします。

{
    xtype: 'combo',
    reference: 'data2'
}, {
    xtype: 'textfield',
    bind: {
        disabled: '{disableTextField}'
    }
}

ここで実際の例を見つけることができます: https://fiddle.sencha.com/#fiddle/te8

于 2015-09-06T13:42:14.533 に答える