PDA

View Full Version : Setting default values of components globally (without extending)



gagahhag
5 Jul 2010, 10:09 PM
Hi all,
I tried to set default scale of a button which is normally 'small' to 'large'.

My first attempt was to apply the property to the component, which didn't work:

Ext.apply(Ext.button, {scale:'large'});

As I understood the API the Ext.apply adds properties to an object even if it's already existing...

It works with the override function now:

Ext.override(Ext.Button, {scale:'large'});

The problem I have is I don't understand why. Does anyone have an explanation?

Thanks a lot
Gagahhag

Working example:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="lib/ext/resources/css/ext-all.css">
<script type="text/javascript" src="lib/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="lib/ext/ext-all.js"></script>

<script type="text/javascript">

Ext.onReady(function() {
Ext.QuickTips.init();
Ext.BLANK_IMAGE_URL = 'lib/ext/resources/images/default/s.gif';

Ext.override(Ext.Button, {scale:'large'});

var p = new Ext.Panel({
title:'test',
renderTo:'panel',
width: 600,
height: 350,

fbar: {
xtype: 'toolbar',
items: [{
xtype: 'button',
text: 'Button'
}]
}
});
});

</script>
</head>
<body style="padding: 10px;">
<div id="panel"></div>
</body>
</html>

evant
5 Jul 2010, 10:33 PM
Pretty much exactly that. Ext.override changes items on the prototype of the object. apply just modifies the object itself.

BitPoet
5 Jul 2010, 10:39 PM
That's because of the duplicity of function and object in Javascript and the therefore needed prototype inheritance scheme. If you add a property to the Ext.Button object itself, it is created as an instance property and not regarded when creating a new instance with the "new" operator:

Ext.apply(Ext.Button, {scale: 'large'});is the same as saying

Ext.Button.scale = 'large';whereas using the override method

Ext.override(Ext.Button, {scale: 'large'});is equivalent to

Ext.Button.prototype.scale = 'large';This behaviour of Javascript is neccessary so you can say

var btn = new Ext.Button();
btn.scale = 'large';without changing the "scale" value for all other instances of Ext.Button.

The rule of thumb is: every property that needs to be inherited must be added to the prototype of a class.

gagahhag
5 Jul 2010, 11:36 PM
Alright! Thanks a lot for your explanations!