PDA

View Full Version : Mixins, config:{} and control inconistencies



The0s
6 Feb 2015, 3:59 PM
Can someone explain how config merging works with respect to mixins and controller.config.control?

Please see these examples:

hrl

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?

grant-humphries
30 May 2017, 4:14 PM
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?

grant-humphries
31 May 2017, 11:39 AM
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:


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'
}]
});
}
});