PDA

View Full Version : [2.0b1][SOLVED] Button.setText() scope problem



Neville Burnell
10 Oct 2007, 10:35 PM
The following page demonstrates my issue, whereby button.setText() doesn't work [as per my expectations] :(( via the scope returned by new Ext.Button() but will work via the scope passed to the click handler. To test, click in sequence, button1, button2, button3. You will see that button2 fails to change the text.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/extjs/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css">
</head>
<body scroll="no">

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '/extjs/resources/images/default/s.gif';


Ext.onReady(function() {

var newscope;
var button1 = new Ext.Button({
text: 'button1',
handler: function(){this.setText('1 works'); newscope=this; }
});

var button2 = new Ext.Button({
text: 'button2',
handler: function(){button1.setText('2 works!')}
});

var button3 = new Ext.Button({
text: 'button3',
handler: function(){newscope.setText('3 works!')}
})


var win = new Ext.Window({
modal:true,
collapsible:false,
title: 'hello',
width:500,
height:300,
shadow:true,
minWidth:300,
minHeight:250,
proxyDrag: true,
buttons: [
button1, button2, button3
]
});

win.show();
});
</script>
</body>
</html>

jack.slocum
10 Oct 2007, 11:08 PM
Ext doesn't control the return value of a new statement. Are you sure there isn't an issue somewhere else?

Neville Burnell
10 Oct 2007, 11:26 PM
Well, button1.getText() works ok if added to my example code, so I'm unsure why button1.setText() shouldnt work?


Ext.Msg.show({title: 'button1.getText()', msg: button1.getText() });

Neville Burnell
10 Oct 2007, 11:34 PM
Jack, are you saying I should be using another method to get the correct reference for 'button1' to be able to call setText()?

jack.slocum
11 Oct 2007, 9:41 AM
No, what you are doing should work fine. I am perplexed as to why it doesn't in your env. It works fine for me.

Neville Burnell
11 Oct 2007, 4:32 PM
> It works fine for me.

I'm perplexed now too. I've running both Firefox 2.0.0.7 [with Firebug, so I know the js script versions are 2.0b1] and IE 7.0.6

I'm happy to try and debug this if you give me some pointers.

Clearly [on my system], 'button1' and 'newscope' refer to different Ext objects. I've iterated through the properties of both to see if it provides a pointer, as I suspect that 'button1' likely refers to an object further up the component heirarchy.

Let me know if this is helpful, or if I can help debug in some other way with FF+Firebug

button1:
;actionMode;addClass;addEvents;addListener;afterMethod;afterRender;allowDomMove
;applyState;applyToMarkup;autoShow;autoWidth;beforeDestroy;beforeMethod;blur
;clickEvent;cloneConfig;ctype;destroy;disable;disabled;disabledClass
;enable;enableToggle;events;filterOptRe;fireEvent;focus;getActionEl
;getAutoCreate;getClickEl;getEl;getId;getMethodEvent;getState;getText
;getXType;getXTypes;handleMouseEvents;handler;hasListener;hasVisibleMenu;hidden
;hide;hideMenu;hideMode;hideParent;id;initButtonEl;initComponent
;initState;initStateEvents;initialConfig;isMenuTriggerOut;isMenuTriggerOver;isVisible;isXType
;menuAlign;menuClassTarget;on;onBlur;onClick;onDestroy;onDisable
;onEnable;onFocus;onHide;onMenuHide;onMenuShow;onMouseDown;onMouseOut
;onMouseOver;onMouseUp;onRender;onShow;override;pressed;purgeListeners
;relayEvents;removeClass;removeListener;removeMethodListener;render;rendered;restoreClick
;resumeEvents;saveState;setDisabled;setHandler;setIconClass;setText;setVisible
;show;showMenu;suspendEvents;text;toggle;tooltipType;type
;un

newscope:
;actionMode;addClass;addEvents;addListener;afterMethod;afterRender;allowDomMove
;applyState;applyToMarkup;autoShow;autoWidth;beforeDestroy;beforeMethod;blur
;clickEvent;cloneConfig;container;ctype;destroy;disable;disabled
;disabledClass;el;enable;enableToggle;events;filterOptRe;fireEvent
;focus;getActionEl;getAutoCreate;getClickEl;getEl;getId;getMethodEvent
;getState;getText;getXType;getXTypes;handleMouseEvents;handler;hasListener
;hasVisibleMenu;hidden;hide;hideMenu;hideMode;hideParent;id
;initButtonEl;initComponent;initState;initStateEvents;initialConfig;isMenuTriggerOut;isMenuTriggerOver
;isVisible;isXType;menuAlign;menuClassTarget;on;onBlur;onClick
;onDestroy;onDisable;onEnable;onFocus;onHide;onMenuHide;onMenuShow
;onMouseDown;onMouseOut;onMouseOver;onMouseUp;onRender;onShow;override
;pressed;purgeListeners;relayEvents;removeClass;removeListener;removeMethodListener;render
;rendered;restoreClick;resumeEvents;saveState;setDisabled;setHandler;setIconClass
;setText;setVisible;show;showMenu;suspendEvents;template;text
;toggle;tooltipType;type;un

Neville Burnell
11 Oct 2007, 5:02 PM
some more details:

'newscope' includes the following 3 properties which are missing from 'button1':
container, el, template

Also, both newscope.type and button1.type report 'button'

jack.slocum
11 Oct 2007, 6:48 PM
Well, at the time of creation above the button1 variable hasn't been rendered. That is why it doesn't have those properties. However, that's not the issue (although it did lead me in the right direction, thanks).

The buttons:[] config takes an array of button configs , not button instances. The docs were wrong as they said you could also pass in an instance. So what was happening is the button1 object you were passing into buttons:[] was being used as a config to create a new button. So the button in the window was a different button than button1 which is why calling button1.setText did nothing for it.

I should have noticed this sooner and we both could have saved some time. :)

Neville Burnell
14 Oct 2007, 6:08 PM
Makes perfect sense,

Thanks Jack.