PDA

View Full Version : Javascript doubt: a nice way to merge configs



moraes
31 Dec 2006, 9:29 AM
Hi. I have a BasicDialog manager to create different dialogs in a short way, following a default configuration that can be overriden by the class that calls the manager.

So the manager has a default configuration for dialogs:

var defaultCfg = function() {};
defaultCfg.prototype = {
width:550,
...
};

And the different dialog classes also have they configuration:

var cfg = {
propertie1: 'foo',
propertie2: 'bar',
...
};

When a new dialog is needed, and it was not created before, the manager merges the configuration objects before creating the new dialog. The custom class passes the 'cfg' object and the manager merges it with the default configuration:

var config = function() {};
YAHOO.extendX(config, defaultCfg, cfg);
dlgs[id] = new YAHOO.Tipos.Dialog(id, new config());

(Tipos.Dialog is just a subclass of BasicDialog)

I hope my intention is clear. The above works, but I'm wondering if what I'm doing is terrible bad or I could do it in a much simpler or more economic way.

jack.slocum
31 Dec 2006, 4:12 PM
Most of the default values for the config have been moved to the prototype in SVN. This means you can override the global defaults using the prototype (most of the components support this). Yes, doing it via the prototype would be more efficient but the way you are now takes very little cpu cycles.

What I would recommend is including yui-ext-config.js after yui-ext.js, and putting your defaults in it. This is the same approach used to set up localization.

e.g. in yui-ext-config.js (wrapped in a function to prevent global vars):


(function(){
var bp = Ext.BasicDialog.prototype;
bp.minButtonWidth = 60;
bp.autoScroll= false;
bp.resizable= false;
bp.constraintoviewport = true;

var gp = Ext.grid.Grid.prototype;
gp.trackMouseOver = true;

Ext.TabPanelItem.prototype.closeText = "Close this tab...";

Ext.MessageBox.buttonText = {
ok : 'Vaya con dios',
cancel : 'Pinche Esto',
yes : 'Por Supuesto',
no : 'Claro que No'
};
Ext.MessageBox.defaultTextHeight = 60;
})();

There's actually A LOT of stuff throughout yui-ext built in a way specifically to allow this.

moraes
1 Jan 2007, 6:00 AM
I got the point about using the prototype. It would be cleaner indeed. I've tried to set the defaults using it without much success, and then I created a verbose yui-ext-config.js with direct assignments, like:

YAHOO.ext.BasicDialog.prototype.width = 550;
YAHOO.ext.BasicDialog.prototype.height = 550;
...
But I get "this.proxy.hide is not a function" errors when trying to create a dialog using the latest SVN. I guess it is not fully working or the dd library is incomplete?

jack.slocum
2 Jan 2007, 6:45 AM
Still have the problem? Works fine here.

Here's another shortcut for you:


Ext.util.Config.apply(Ext.BasicDialog.prototype, {
minButtonWidth: 100,
foo: 'bar'
....
});

moraes
2 Jan 2007, 7:40 PM
Here's another shortcut for you:


Ext.util.Config.apply(Ext.BasicDialog.prototype, {
minButtonWidth: 100,
foo: 'bar'
....
});
This looks great! And I guess I found the problem. In my tests I was basically trying to pre-configure everything that is not available to be configured using the prototype (width, height, autoCreate...) :lol:. These properties are set directly from the config object passed to the constructor, e.g.:

if(config.width){
el.setWidth(config.width);
}
if(config.height){
el.setHeight(config.height);
}
So I'll go back to my initial solution for a while, since I need to pre-define those properties anyway. I've improved it a bit reusing the configs for each class after they are merged once.

Thanks a lot for the insights.