[qooxdoo-devel] question on how to refer a class member inside event listener function

Tue, 21 Feb 2006 13:32:05 -0800

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; charset=iso-8859-15" />
  <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 = new QxGridLayout;

        this.fs.add(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

Reply via email to