ExtJS - How to access an object's properties and methods

1
votes

This is probably a simple question to answer but I'm having a bit of a hard time figuring this out as I'm pretty new to programming. I'm building a Django web app and using ExtJS 3.4 to build the interface. One part of my interface has a textfield and button that fires a click event and I need to get value of the textfield to pass to a URL, but I don't know how to access it. I know how to do this if I define an object as a variable, but not when I use xtype as in this particular instance. For example, this is how my textfield object is defined:

items: [{
  xtype: 'textfield',
  fieldLabel: 'Scenario Name',
  id: 'scn_name',
  allowBlank: false
}]

And this is how I have tried accessing the textfield's value in a button's event handler:

var scnName = scn_name.getValue()

The error I get is 

Uncaught TypeError: Object #<HTMLInputElement> has no method 'getValue'

but I know the textfield class has a getValue() method. What am I doing wrong? How can I access properties and methods of an object created using type?

Thanks in advance,

Ro

2
javascriptobjectextjs

2 Answers

0
votes

Your scn_name should be reference to component, but not DOM element representing it. You can get reference to ExtJS component using:

var scn_name = Ext.getCmp('scn_name');

and then you can do:

var scnName = scn_name.getValue();

For more details see: http://www.sencha.com/learn/getting-elements-and-components/

0
votes

When do you try to access your textfield? Is it inside a block that is executed right away (Ext.onReady) or inside a definition (Ext.define)?

Depending on when your code is called it is possible that your component is not yet rendered.