Results 1 to 6 of 6

Thread: Binding ViewModel to stateful components

    You found a bug! We've classified it as EXTJS-19689 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    Oct 2009
    Location
    Aylesbury, Bucks, UK
    Posts
    69

    Default Binding ViewModel to stateful components

    Please see https://fiddle.sencha.com/#fiddle/vq8 for working example.

    When binding stateful components to ViewModel data, combobox restores from saved state but textfield and datefield don't. Which is correct and which is buggy? How do we correctly restore bound components from state manager?

  2. #2
    Sencha - Support Team bjdurham85's Avatar
    Join Date
    Mar 2014
    Posts
    962

    Default

    Hi--,

    Thanks for the report, I've opened a bug in our tracking system.


    Regards,
    Bryan

  3. #3
    Sencha User
    Join Date
    Mar 2011
    Location
    Arvada, CO
    Posts
    404

    Default

    This is still an issue 3 years later... is there any update? It seems comboboxes are the only ones that respect binding and state values.

  4. #4

    Default

    Hey,

    We used the code below to fix that:

    Code:
    Ext.define('Ext.mixin.StatefulBindable', {
        override: 'Ext.mixin.Bindable',
    
    privates: {
            onBindNotify: function(value, oldValue, binding) {
                binding.syncing = (binding.syncing + 1) || 1;
                if (binding.calls !== 1 || !this.getState || !this.getState() || !this.getState().hasOwnProperty(binding._config.name) || Ext.isEmpty(this[binding._config.names.get]())) {
                    this[binding._config.names.set](value);
                } else {
                    binding.setValue(this[binding._config.names.get]());
                }
                --binding.syncing;
            }
        }
    }, function () {
        var mixinId = this.prototype.mixinId;
    
        Ext.Object.each(Ext.ClassManager.classes, function(name, cls) {
                if (cls.prototype && cls.prototype.mixins && cls.prototype.mixins.hasOwnProperty("bindable")) {
                    cls.prototype.onBindNotify = this.prototype.onBindNotify;
                }
            }, this);
    });
    Or you can just override onBindNotify method where it is necessary.

  5. #5
    Sencha User
    Join Date
    Mar 2011
    Location
    Arvada, CO
    Posts
    404

    Default

    Quote Originally Posted by kartachena View Post
    Hey,

    We used the code below to fix that:

    Code:
    Ext.define('Ext.mixin.StatefulBindable', {
        override: 'Ext.mixin.Bindable',
    
    privates: {
            onBindNotify: function(value, oldValue, binding) {
                binding.syncing = (binding.syncing + 1) || 1;
                if (binding.calls !== 1 || !this.getState || !this.getState() || !this.getState().hasOwnProperty(binding._config.name) || Ext.isEmpty(this[binding._config.names.get]())) {
                    this[binding._config.names.set](value);
                } else {
                    binding.setValue(this[binding._config.names.get]());
                }
                --binding.syncing;
            }
        }
    }, function () {
        var mixinId = this.prototype.mixinId;
    
        Ext.Object.each(Ext.ClassManager.classes, function(name, cls) {
                if (cls.prototype && cls.prototype.mixins && cls.prototype.mixins.hasOwnProperty("bindable")) {
                    cls.prototype.onBindNotify = this.prototype.onBindNotify;
                }
            }, this);
    });
    Or you can just override onBindNotify method where it is necessary.
    This does not seem to work for a checkbox.

  6. #6
    Sencha User
    Join Date
    Mar 2011
    Location
    Arvada, CO
    Posts
    404

    Default

    Quote Originally Posted by incutonez View Post
    This does not seem to work for a checkbox.
    Correction, it does work for checkboxes if you use this override:

    Code:
    Ext.override(Ext.form.field.Checkbox, {
      stateEvents: [
        'change'
      ],
    
      applyState: function (state) {
        this.callParent(arguments);
        this.setValue(state.value);
      },
    
      getState: function () {
        return {
          value: this.getValue()
        };
      }
    })

Similar Threads

  1. VIewModel binding with togglefield
    By cesidio in forum Ext JS 6.x Q&A
    Replies: 1
    Last Post: 16 Sep 2015, 7:22 AM
  2. Binding ViewModel to 'hidden'.
    By HerbiePorter in forum Ext JS 6.x Q&A
    Replies: 3
    Last Post: 2 Sep 2015, 5:59 AM
  3. Binding viewModel with comboboxes
    By dexfit in forum Ext 5: Q&A
    Replies: 5
    Last Post: 20 Dec 2014, 7:56 AM

Posting Permissions

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