Results 1 to 3 of 3

Thread: Mixins, config:{} and control inconistencies

  1. #1
    Sencha User
    Join Date
    Jun 2008
    Posts
    242
    Answers
    22

    Default Mixins, config:{} and control inconistencies

    Can someone explain how config merging works with respect to mixins and controller.config.control?

    Please see these examples:


    • control property:
      • Mixin has reference=foo
      • CtrlA has nothing
      • CtrlB has reference=baz
      • Final control is reference=baz as reference=foo is lost
    • something1 property:
      • Mixin has reference=foo
      • CtrlA has reference=baz
      • CtrlB has reference=bar
      • Final something1 is reference=baz and reference=bar, foo is lost
    • something2 property:
      • Mixin has reference=foo
      • CtrlA has nothing
      • CtrlB has reference=bar
      • Final something2 is reference=foo and reference=bar, foo is not lost
    Why is something2 handled differently than control? Is this the desired behavior?

    What are the rules for when a mixin's configs are merged vs replaced?

  2. #2
    Sencha Premium User
    Join Date
    Dec 2016
    Posts
    8

    Default

    Bump. Having this same issue. Is it possible to have a controller mixin where the `control` config is inherited by the controllers that it is mixed into?

  3. #3
    Sencha Premium User
    Join Date
    Dec 2016
    Posts
    8

    Default

    Found a workaround for implementing `control` settings in a controller mixin such that they will be added to the control config of the child controllers. Using the example above, the solution looks like this:

    Code:
    Ext.define('TheMixin', {
        extend: 'Ext.Mixin'
        mixinConfig: { id: 'controllermixin' }
    
        init: function () {
            this.control({
                '[reference=foo]']: {
                    click: 'onFoo'
                }
            })
        }
    });
    
    Ext.define('CtrlA', {
        extend: 'Ext.app.ViewController',
        alias: 'controller.ctrla',
        
        mixins: {
            themixin: 'TheMixin'
        },
    
        control: {
            '[reference=baz]': {
                click: 'onBaz'
            }
        }
        
        init: function () {
            this.mixins.controllermixin.init.call(this)
            console.log(this.getControl())
        },
    
        onBaz: function () {
            console.log('onBaz got called!')
        }
    });
    
    Ext.define('CtrlB', {
        extend: 'CtrlA',
        alias: 'controller.ctrlb',
    
        mixins: {
            themixin: 'TheMixin'
        },
        
        control: {
            '[reference=bar]': {
                click: 'onBar'
            }
        },
    
        init: function () {
            this.mixins.controllermixin.init.call(this)
            console.log(this.getControl())
        },
    
        onBar: function () {
            console.log('onBar got called!')
        }
    });
    
    
    
    
    
    Ext.application({
        name : 'Fiddle',
    
        launch : function() {
            Ext.create('Ext.panel.Panel',{
                renderTo: Ext.getBody(),
                controller: 'ctrlb',
                title: 'Press do the bar',
                items: [{
                    xtype: 'button',
                    text: 'do the foo',
                    reference: 'foo'
                },{
                    xtype: 'button',
                    text: 'do the bar',
                    reference: 'bar'
                }]
            });
        }
    });
    Last edited by grant-humphries; 7 Jun 2017 at 3:09 PM. Reason: original code was causing duplicate listeners, this change corrects that

Posting Permissions

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