PDA

View Full Version : How to override configs from initCompoent



Dumas
1 Mar 2012, 9:03 AM
Hallo!

I have a class which sets a config inside initComponent and I try to override this, but I seem to have a bug. Can someone help me with the following code

/* * this is given:
*/
Ext.define('BlogApp.view.ui.CommentForm', {
extend: 'Ext.form.Panel',
api: '{ submit: Bancha.getStubsNamespace().Comment.submit}', // <-- this should be changed to a real obj


initComponent: function() {
var me = this;


me.initialConfig = Ext.apply({
api: '{ submit: Bancha.getStubsNamespace().Comment.submit}' // <-- this should be changed to a real obj
}, me.initialConfig);


me.callParent(arguments);
}
}); //eo define

/*
* and here's how I try to overwrite it
*/
var className = 'BlogApp.view.ui.CommentForm';
Ext.require([className], function() {
var classObj = Ext.ClassManager.get(className),
classPrototype = classObj.prototype,
fixApiConfig = function(api) {
if(Ext.isString(api)) {
var stringToObject = new Function("return "+api);
return stringToObject();
} else {
return api;
}
};


// overrride api class config
Ext.define(className+'Overrride', {
override: className,
api: fixApiConfig(classPrototype.api)
});


// override initComponent config for each individual instance
Ext.Function.interceptBefore(classObj.superclass, 'constructor', function(){
this.initialConfig = Ext.apply({
api: fixApiConfig(this.initialConfig) // <------------------------------- how should this actually work????
}, this.initialConfig);
});
});


(Please don't start telling me that I should change above code and that it is bad, I know.. but I can't change nor extend it. For background see Ext Designer Bug (http://www.sencha.com/forum/showthread.php?184414-Ext.form.Panel-doesn-t-allow-to-defined-a-api-object&p=745773#post745773))

thanks
Roland

mitchellsimoens
1 Mar 2012, 1:50 PM
If you want to change it within initComponent, it's as easy as:


me.api = '....';

Dumas
1 Mar 2012, 4:28 PM
Yes... but I don't have direct access... that's why I tried the interceptor approach.. any tips?

vietits
1 Mar 2012, 5:17 PM
Why don't you override initComponent? Below is my suggestion


var className = 'BlogApp.view.ui.CommentForm';
Ext.require([className], function() {
var classObj = Ext.ClassManager.get(className),
classPrototype = classObj.prototype,
fixApiConfig = function(api) {
if(Ext.isString(api)) {
var stringToObject = new Function("return "+api);
return stringToObject();
} else {
return api;
}
};


// overrride api class config
Ext.define(className+'Overrride', {
override: className,
api: fixApiConfig(classPrototype.api),
initComponent: function(){
var me = this;
me.initialConfig = Ext.apply({
api: fixApiConfig(me.initialConfig)
}, me.initialConfig);

me.callParent(arguments);
}
});
});

Dumas
1 Mar 2012, 5:23 PM
Thanks for the post!

When I override the whole initComponent, I loose the flexibility. I can't change the original class anymore without problems... and since the original class is created by Ext Designer I maybe don't even know that the initComponent has changed since I did a visual change. If possible the interceptor solution would be cleaner.

thanks
Roland

vietits
1 Mar 2012, 6:46 PM
I see. Then you should intercept after initComponent, if not your setting will be overridden by the original initComponent. You can't intercept before constructor because at that time initialConfig does not exist and it also will be overridden by the initComponent.


var className = 'BlogApp.view.ui.CommentForm';
Ext.require([className], function() {
var classObj = Ext.ClassManager.get(className),
classPrototype = classObj.prototype,
fixApiConfig = function(api) {
if(Ext.isString(api)) {
var stringToObject = new Function("return "+api);
return stringToObject();
} else {
return api;
}
};
// overrride api class config
Ext.define(className+'Overrride', {
override: className,
api: fixApiConfig(classPrototype.api)
});


Ext.Function.interceptAfter(classPrototype, 'initComponent', function(){
this.initialConfig.api = fixApiConfig(this.initialConfig.api);
});
});

Dumas
3 Mar 2012, 11:21 AM
Hi!

It's more tricky then that, since inside the initComponent the basic form is created which creates a own reference...
I think it should be before the initComponent of the parent class.

best regards
Roland

vietits
3 Mar 2012, 4:03 PM
I don't know what else will happen in your original initComponent(), but with the one you supplied as in first post if you use interceptBefore() then what you've done with me.initialConfig.api will be overridden by original initComponent().


initComponent: function() {
var me = this;


me.initialConfig = Ext.apply({
api: '{ submit: Bancha.getStubsNamespace().Comment.submit}' // <-- this will override what you did in the interceptBefore
}, me.initialConfig);

me.callParent(arguments);
}

mitchellsimoens
4 Mar 2012, 6:04 AM
Hi!

It's more tricky then that, since inside the initComponent the basic form is created which creates a own reference...
I think it should be before the initComponent of the parent class.

best regards
Roland

You will need to do this in the constructor then. Instead of setting the config on the prototype, you do it on the config.


constructor : function(config) {
config.foo = 'bar';

this.callParent([config]);
}

Dumas
4 Mar 2012, 11:25 AM
Hallo!

@vietits: I was talking about the initComponent of the parent class. That would be after the config was set.

@mitchellsimoens: Thanks! That works like a charm :)

best regards
Roland