Results 1 to 3 of 3

Thread: Updating a bound datapoint based on another binding

  1. #1
    Sencha Premium User
    Join Date
    Jan 2014
    Location
    Fort Worth, TX, USA
    Posts
    64
    Answers
    2

    Default Answered: Updating a bound datapoint based on another binding

    In my app, I have a situation where I need to bind some fields to behave in the following way:
    • If Checkbox A is checked, Textfield B is enabled.
    • If ComboBox C = 1, 2, or 3, Checkbox A is disabled and automatically set to checked.
    I have the A-> B relationship working and have a formula in my viewmodel that condenses C's value to '{isforced}'. The C->A relationship with disabled works, but how would I go about forcing the value of A to be checked when A is already bound to a datapoint?

  2. Try something like this:

    Code:
    Ext.onReady(function() {
    
        Ext.define('Foo', {
            extend: 'Ext.app.ViewModel',
            alias: 'viewmodel.foo',
    
            data: {
                isChecked: false
            },
            formulas: {
                isBadValue: function(get) {
                    return Ext.Array.contains([1, 2, 3], get('comboValue'));
                }
            },
    
            constructor: function(config) {
                this.callParent([config]);
                this.bind('{isBadValue}', this.onBadValueChange, this);
            },
    
            onBadValueChange: function(v) {
                if (v) {
                    this.set('isChecked', true);
                }
            }
        })
    
        var form = new Ext.form.Panel({
            renderTo: document.body,
            viewModel: {
                type: 'foo'
            },
            items: [{
                xtype: 'checkbox',
                boxLabel: 'Check A',
                bind: {
                    value: '{isChecked}',
                    disabled: '{isBadValue}'
                }
            }, {
                xtype: 'textfield',
                fieldLabel: 'Text B',
                bind: {
                    disabled: '{!isChecked}'
                }
            }, {
                xtype: 'combobox',
                boxLabel: 'Combo C',
                store: [1, 2, 3, 4, 5],
                bind: '{comboValue}'
            }]
        });
    
    });

  3. #2
    Sencha Premium User
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258
    Answers
    759

    Default

    Try something like this:

    Code:
    Ext.onReady(function() {
    
        Ext.define('Foo', {
            extend: 'Ext.app.ViewModel',
            alias: 'viewmodel.foo',
    
            data: {
                isChecked: false
            },
            formulas: {
                isBadValue: function(get) {
                    return Ext.Array.contains([1, 2, 3], get('comboValue'));
                }
            },
    
            constructor: function(config) {
                this.callParent([config]);
                this.bind('{isBadValue}', this.onBadValueChange, this);
            },
    
            onBadValueChange: function(v) {
                if (v) {
                    this.set('isChecked', true);
                }
            }
        })
    
        var form = new Ext.form.Panel({
            renderTo: document.body,
            viewModel: {
                type: 'foo'
            },
            items: [{
                xtype: 'checkbox',
                boxLabel: 'Check A',
                bind: {
                    value: '{isChecked}',
                    disabled: '{isBadValue}'
                }
            }, {
                xtype: 'textfield',
                fieldLabel: 'Text B',
                bind: {
                    disabled: '{!isChecked}'
                }
            }, {
                xtype: 'combobox',
                boxLabel: 'Combo C',
                store: [1, 2, 3, 4, 5],
                bind: '{comboValue}'
            }]
        });
    
    });

  4. #3
    Sencha Premium User
    Join Date
    Jan 2014
    Location
    Fort Worth, TX, USA
    Posts
    64
    Answers
    2

    Default

    Thanks, that worked brilliantly. Related question: we use JSDuck for our documentation. Does it support ExtJS 5, and if so, is there any special formatting sugar to use with ViewModels?

Similar Threads

  1. Replies: 5
    Last Post: 6 May 2015, 7:51 AM
  2. [DUP] Grid Summary not updating on ViewModel bound Store
    By stildalf in forum Ext 5: Bugs
    Replies: 1
    Last Post: 15 Jan 2015, 6:03 AM
  3. Accessing bound data via a data view based on a formula?
    By Necro-Engineering in forum Ext 5: Q&A
    Replies: 7
    Last Post: 18 Jun 2014, 7:13 PM
  4. Replies: 2
    Last Post: 12 May 2014, 4:39 PM
  5. [1.2.2] Bound bean is not updating the form
    By sdc in forum Sencha GXT Q&A
    Replies: 6
    Last Post: 10 Feb 2009, 6:01 AM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •