Results 1 to 6 of 6

Thread: Override a mixin in Extjs 5

  1. #1

    Default Override a mixin in Extjs 5

    Due to a data binding bug we needed to override the publishState method of Ext.mixin.Bindable (explanation of the bug in a separate thread). Forum and Google searching did not provide a good answer - mostly explanations of why it doesn't work and how the override doesn't propagate to classes that already received the mixin.
    We were able to get around the propagation problem by applying the override directly to the prototype of all classes that received the mixin. Ext.ClassManager makes this easy. Code is below.

    A few notes:
    1. The hasOwnProperty check on cls.prototype.mixins ensures only classes that directly received the mixin get the override, vs. classes that just inherit the mixin.
    2. Must explicitly set the override method by name (cls.prototype.publishState = this.prototype.publishState). So if you override 3 methods you must explicitly set all three in the code. We weren't sure how to get a list of overridden methods to automate this.
    3. Any class that receives the mixin after the override is applied will get the overridden code and doesn't need special treatment.
    We have a large application (forms, fields, grids, stores, charts, etc.) that uses a lot of data binding. After applying this code we set a breakpoint on the original publishState code and went through the entire application without hitting it so we have high confidence this works as intended.

    We have only tested this in our particular use case so others may encounter things we didn't. Please share any findings in this thread.

    Code:
    Ext.define('overrides.mixin.Bindable', {
        override: 'Ext.mixin.Bindable',
    
        publishState: function (property, value) {
            // override code
        }
    }, 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(mixinId)) {
                // Explicitly apply all overridden functions here (must do manually - unsure how to retrieve a list of overrides)
                cls.prototype.publishState = this.prototype.publishState;
            }
        }, this);
    });

  2. #2
    Sencha - Support Team
    Join Date
    Mar 2015
    Location
    Chicago
    Posts
    239
    Answers
    40

    Default

    Hi,

    Just one question, do you need to override that method for every single bindable component in your app?

    Thanks,
    Guilherme Lopes
    Sencha Support

  3. #3

    Default

    Yes - we found a bug in publishState where a component's value never gets set in the view model (haven't written up a bug report yet). Every class that receives Ext.mixin.Bindable is susceptible to the bug, so our override had to be applied directly to every class that already received the mixin by the time overrides.mixin.Bindable was called.

  4. #4
    Sencha User
    Join Date
    Apr 2013
    Posts
    137

    Default

    Have a same problem, is there any way to do this?

  5. #5
    Sencha User
    Join Date
    Nov 2015
    Location
    Paris
    Posts
    36

    Default

    Hi,

    I've tried to apply rmichelly method with ext 6.0.1 on container.DockingContainer mixin, in order to solve https://www.sencha.com/forum/showthr...e-a-form-panel
    but it doesn't work.

    Here's my code :
    Code:
    Ext.define('Ext.overrides.container.DockingContainer', {    override: 'Ext.container.DockingContainer',
    
    
        getDockedItems: function(selector, beforeBody) {
            console.log("Ext.overrides.container.DockingContainer getDockedItems()");
            if (typeof (this.getComponentLayout().getDockedItems) === "function") {
                return this.callOverridden([selector, beforeBody]);
            }
            else {
                return [];
            }
        }
    },
        function() {
            var mixinId = this.prototype.mixinId;
            console.log("Ext.overrides.container.DockingContainer : création");
    
    
            Ext.Object.each(Ext.ClassManager.classes, function(name, cls) {
                if (cls.prototype && cls.prototype.mixins && cls.prototype.mixins.hasOwnProperty(mixinId)) {
                    // BUT PROBLEM HERE : we never get here, it doesn't apply to any case
                    cls.prototype.getDockedItems = this.prototype.getDockedItems;
                }
            }, this);
        }
    );

  6. #6
    Sencha User
    Join Date
    Jul 2016
    Posts
    38
    Answers
    1

    Default

    Instead of mixinId write 'docking'.

    Code:
    Ext.define('Ext.overrides.container.DockingContainer', {    
        override: 'Ext.container.DockingContainer',
        getDockedItems: function(selector, beforeBody) {
             }
        },
        function() {
            Ext.Object.each(Ext.ClassManager.classes, function(name, cls) {
                if (cls.prototype && cls.prototype.mixins && cls.prototype.mixins.hasOwnProperty("docking")) {
                    cls.prototype.getDockedItems = this.prototype.getDockedItems;
                }
            }, this);
        }
    );

Similar Threads

  1. How to override a Mixin in Ext 4
    By phani.gutha in forum Ext: Q&A
    Replies: 1
    Last Post: 4 Mar 2014, 6:20 AM
  2. Is it possible to override a mixin?
    By Patlatus in forum Ext: Discussion
    Replies: 2
    Last Post: 16 Apr 2013, 5:03 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
  •