1. Pass 'this' to internalbtnclicked.
this.internalbtnclicked.setUserData('uiobject', this);
2. Get 'this' from internalbtnclicked
In event handler function:
var uiobject = me.getUserData('uiobject');
uiobject.input6.setValue('new value');
On 2/21/06, Chris Ricks <
[EMAIL PROTECTED]> wrote:
Hi,
You've got a few options:
1. Have the event dispatched in the scope of the MyGroupUI object by
passing it as the third parameter to addEventListener.
2. Call this.getParent() inside your event handler to get button6's parent.
3. Reengineer your app so that you have a class representing your
application that is global, containing references to the current GUI
classes (this is how we do things, in line with the practices the GoF
keep drilling into us all).
Best regards,
Chris
Guangwen He wrote:
> 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 type="text/_javascript_" src=""
> <script type="text/_javascript_" src="">> </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
--
Chris Ricks - BE (Melb)
Lead Software Engineer
IT Operations
Phone: 1300 722 388
Mobile: 0433 276 911
E-mail: [EMAIL PROTECTED]
