PDA

View Full Version : Checkbox can't be edited within Ext JS



vektor7
12 Apr 2011, 2:21 AM
I have a checkbox in an Ext.form.formPanel container:


... (removed code for better reading)
items: {
xtype: 'checkbox',
boxLabel: 'addSerialNumber',
id: 'addSerialNumber',
name: 'addSerialNumber',
checked: true
}
... (removed code for better reading)


Later on I try to manipulate/edit this checkbox:

Ext.getCmp("addSerialNumber").setValue(false);

I get the following Java Script error:
TypeError: Property 'setValue' of object [object Object] is not a function

Why this?

mcadirci
12 Apr 2011, 3:39 AM
That should work. Are you sure that you don't have duplicate id?

Screamy
12 Apr 2011, 4:08 AM
Hard coded ids make your app a lot more brittle. Try using 'ref' instead, where this will allow you to use object/property notation. Note that 'ref' values are not global; they're scoped within the chain of objects where defined:



var form = new Ext.form.FormPanel({
ref: 'form',
items: [{
xtype: 'checkbox',
boxLabel: 'addSerialNumber',
ref: 'addSerialNumber',
name: 'addSerialNumber',
checked: true
}]
});

var window = new Ext.Window({
height: 200,
width: 300,
items: [form]
});

window.show();

// Here's how you would access the checkbox.
window.form.addSerialNumber.setValue(true);

vektor7
12 Apr 2011, 4:16 AM
You showed me the way!

I changed the id from "addSerialNumber" to "addSerialNumber2" and all works now. I'm sure, there is no other object in the HTML with the id "addSerialNumber".

Dubious?

mitchellsimoens
12 Apr 2011, 6:05 AM
That's why you shouldn't use ids. Not sure last time I actually needed to set an id

mitchellsimoens
12 Apr 2011, 6:06 AM
I also deleted the other duplicate 4 threads. Make sure you don't post more than one.

vektor7
12 Apr 2011, 6:10 AM
Hard coded ids make your app a lot more brittle. Try using 'ref' instead, where this will allow you to use object/property notation. Note that 'ref' values are not global; they're scoped within the chain of objects where defined:

Thanks, this example works.

I tried it in my app: Because there are more nested containers, it's not simple to define all the refs and access the checkbox at least.

mitchellsimoens
12 Apr 2011, 6:12 AM
Thanks, this example works.

I tried it in my app: Because there are more nested containers, it's not simple to define all the refs and access the checkbox at least.

It will benefit you and your app to put in the work to get it to work without setting ids.

vektor7
12 Apr 2011, 6:33 AM
It will benefit you and your app to put in the work to get it to work without setting ids.

Thanks for this really interesting statement.

I will try it!

stephen.friedrich
12 Apr 2011, 9:21 AM
Hm, I use ids a lot to help me with my selenium tests.
Sure, you need to be careful not to use the same ids twice, but that's usually not that hard.

mitchellsimoens
12 Apr 2011, 9:22 AM
Questions then... why put forth the effort when you don't have to? When there are other alternatives that are better?

stephen.friedrich
12 Apr 2011, 9:24 AM
Sure, I am willing to learn.
What is the best way to reference a specific Ext component from selenium for GUI testing?
When I use the id "addSerialNoButton" I can insert another button before that or move the button someplace else on the page without breaking the test.

mitchellsimoens
12 Apr 2011, 9:27 AM
For testing purposes I can see why you could use it but in production environment it's just overhead that you don't need.

ref and itemId are great choices. I use getComponent to find a child item or findByType. Whenever I can, I create my own references.

Each situation deserves it's own method, there is no one size fits all all the time.