Hi,
I am using qooxdoo 0.5. When a function is added as an event listener,
'this' refers to the button, .etc which triggers the event within
event listener function. I am using prototype to encapsulate the UI
elements and event handling code into a class but could not figure out
how to refer a class member inside event listener function.
In the code below, I want to change the input6's value inside the
event handling function. How can I do that without refer to the global
variable?
Any help will be appreciated!
My code is listed below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd";>
<html xmlns=" http://www.w3.org/1999/xhtml"; xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; />
<title>GridLayout 5 @ qooxdoo :: demo</title>
<script type="text/javascript" src="../script/preqooxdoo.js"></script>
<script type="text/javascript" src="../script/prototype.js"></script>
<script type="text/javascript" src="../script/qooxdoo.js"></script>
</head>
<body>
<div id="demoDescription">
<p>Event Testing</p>
</div>
<script type="text/javascript">
MyGroupUI = Class.create();
MyGroupUI.prototype = {
initialize: function(title) {
// field set
this.fs = new QxFieldSet(title, "icons/16/clock.png");
this.fs.setWidth("40%");
this.fs.setHeight("auto");
this.fs.setTop(48);
this.fs.setLeft(20);
this.fs.setMaxWidth("auto");
this.fs.setMinWidth ("auto");
// grid layout
this.gl <http://this.gl> = new QxGridLayout;
this.fs.add(this.gl <http://this.gl>);
this.gl.setLocation (5, 5);
this.gl.setDimension("auto", "auto");
this.gl.setBorder(QxBorderObject.presets.outset);
this.gl.setPadding(8);
this.gl.setColumnCount(2);
this.gl.setRowCount(8);
this.gl.setVerticalSpacing(4);
this.gl.setHorizontalSpacing(6);
this.gl.setColumnWidth(0, 70);
this.gl.setColumnWidth(1, 180);
this.gl.setColumnHorizontalAlignment(0, "right");
this.gl.setColumnVerticalAlignment(0, "middle");
this.gl.setRowHeight(0, 20);
this.gl.setRowHeight(1, 20);
this.gl.setRowHeight(2, 20);
this.gl.setRowHeight(3, 20);
this.gl.setRowHeight(4, 20);
this.gl.setRowHeight(5, 70);
this.gl.setRowHeight(6, 20);
this.gl.setRowHeight (7, 20);
this.label1 = new QxLabel("Given Name");
this.label2 = new QxLabel("Name");
this.label3 = new QxLabel("City");
this.label4 = new QxLabel("Country");
this.label5 = new QxLabel("E-Mail");
this.label6 = new QxLabel("Comment");
this.label6.setVerticalAlign("top");
this.label6.setVerticalAlign("top");
this.input1 = new QxTextField;
this.input2 = new QxTextField;
this.input3 = new QxTextField;
this.input4 = new QxTextField;
this.input5 = new QxTextField;
this.input6 = new QxTextArea;
this.comfirmbtn = new QxButton("Call External",
"icons/16/apply.png");
this.comfirmbtn.setHorizontalAlign ("right");
this.comfirmbtninternal = new QxButton("Call Internal",
"icons/16/apply.png");
this.comfirmbtninternal.setHorizontalAlign("right");
this.gl.add(this.label1, 0, 0);
this.gl.add(this.input1, 1, 0);
this.gl.add(this.label2, 0, 1);
this.gl.add(this.input2, 1, 1);
this.gl.add(this.label3, 0, 2);
this.gl.add(this.input3, 1, 2);
this.gl.add(this.label4, 0, 3);
this.gl.add(this.input4, 1, 3);
this.gl.add(this.label5, 0, 4);
this.gl.add(this.input5, 1, 4);
this.gl.add (this.label6, 0, 5);
this.gl.add(this.input6, 1, 5);
this.gl.add(this.comfirmbtn, 1, 6);
this.gl.add(this.comfirmbtninternal, 1, 7);
// add event listener for confirmbtninternal
this.comfirmbtninternal.addEventListener("click",
this.internalbtnclicked);
},
internalbtnclicked : function(me) {
alert(this);
// question - how to change input6's value here? 'this'
refers to button comfirmbtninternal
}
};
// Event Handler
function confirmButtonClicked(mEvent) {
myGroupUI.input6.setValue('Input 6\'s value is changed.\n' + 'this
= ' + this);
}
window.application.main = function()
{
rootDoc = this.getClientWindow().getClientDocument();
myGroupUI = new MyGroupUI('My Field Group');
rootDoc.add(myGroupUI.fs);
// add event lister
myGroupUI.comfirmbtn.addEventListener ("click",
confirmButtonClicked);
};
</script>
<script>
</script>
</body>
</html>
Thanks,
Guangwen
