get checkbox value without using Ext.getCmp

Question

I am trying to get value of this checkbox

 Ext.define('myRoot.myExtApp.myForm', {
    extend: 'Ext.form.Panel',
    layout: {
      type: 'vbox',
      align: 'stretch'
    },
    scope: this,
    constructor: function() {
       this.callParent(arguments);

       this.myFieldSet = Ext.create('Ext.form.FieldSet', {
         scope: this,
         columnWidth: 0.5,
         collapsible: false,
         defaultType: 'textfield',
         layout: {
             type: 'hbox', align: 'stretch'
         }
       });

       this.mySecondForm = Ext.create('myRoot.myExtApp.myForm2', {
         scope: this,
         listener: this,
         margin: '1 3 0 0'
       });
       this.myCheckBox = Ext.create('Ext.form.Checkbox', {
           scope: this,
           //id: 'myCheckBox',
           boxLabel: 'Active',
           name: 'Active',
           checked: true,
           horizontal: true
       });

       this.myFieldSet.add(this.mySecondForm);
       this.myFieldSet.add(this.myCheckBox);

       this.add(this.myFieldSet);
     }
 });

As you can see I have another form

Ext.define('myRoot.myExtApp.myForm2', {

where I have a handler, that should get the value of the checkbox from "myForm"

How can I get the value of my checkbox from Form2 without using Ext.getCmp? I know I can get the value of the checkbox if I do

Ext.getCmp('myCheckBox').getValue();

but using

this.myCheckBox.getValue();

gives me undefined error.

UPDATE - with Wared suggestion I tried this inside myForm2

this.temp=Ext.create('myRoot.myExtApp.myForm'), {});
var tempV = this.temp.myCheckBox.getValue();

I was able to get the value but I get the same true value even if I uncheck the box

You haven't posted enough of your structure, we need to see how it all fits together. — Evan Trimboli, Mar 01 '13 at 23:32
To extend on Evan's response - it's impossible to tell what's the scope of `this` in `this.myCheckBox`. — Izhaki, Mar 03 '13 at 16:42
@EvanTrimboli, Thank you for taking time to look at my post. Please see my update. I have edited it with my complete structure. — EagleFox, Mar 04 '13 at 16:00
@Izhaki... hi Izhaki, please see my updated post. Would that help? — EagleFox, Mar 04 '13 at 16:01
Could you create a [jsFiddle](http://jsfiddle.net/)? That could really help. — , Mar 05 '13 at 16:30

score 1 · Answer 1 · 2013-03-12T08:54:51.870

1

One solution could be :

myRoot.myExtApp.myForm.myCheckBox.getValue();

Beware, wrong answer. See comments below for a valid solution.

edited Mar 12 '13 at 08:54

answered Mar 05 '13 at 13:00

@wared... thank you... but I still get the undefined error. The other thing I tried is on myForm2... I did this.temp=Ext.create('myRoot.myExtApp.myForm'), {}); and var tempV = this.temp.myCheckBox.getValue();... and I get the value but I get the same true value even if I uncheck the box – EagleFox Mar 05 '13 at 15:27
Sorry, I'm totally wrong... "myRoot.myExtApp.myForm" refers to the class while we need an instance. I need more details to help you. How about the code where your forms are instanciated? – Mar 05 '13 at 15:57
Thanks wared... You are partially correct. I had to make sure I declared parent: this and on my extended class all I had to do was... this.parent.myCheckBox.getValue(); – EagleFox Mar 11 '13 at 19:43

score 1 · Accepted Answer · 2013-03-12T09:58:25.747

I assume you worry about performance loss due to excessive use of component queries. A nice trick to minimize component queries could be to define a new method inside a closure in order to cache the result of the first getCmp call. Wrapping the definition of the method inside a closure allows to avoid using global scope or a useless class property.

getMyCmp: function (cmp) { 
    // "cmp" does not exist outside this function
    return function () { 
        return cmp = cmp || Ext.getCmp('#myCmp'); 
    }; 
}()

get checkbox value without using Ext.getCmp

2 Answers2