I can not get the value of a text field in extJS

Question

Faced with a problem at work with ExtJS
There is such a code - a new class (view)

Ext.define('FormApp.view.ElementContainer', {
extend: 'Ext.Container',
alias: 'widget.elemcontainer',

initComponent: function() {
    this.items = [{
            layout: {
                type: 'hbox',
                align: 'middle'
            },

            items: [
                { xtype: 'component',
                  html: '&nbspПоиск&nbsp&nbsp'},

                { xtype: 'textfield',
                  width: 495,
                  name: 'search'
                 },

                { xtype:'component',
                  html:'&nbsp&nbsp'},

                { xtype: 'button',
                  text: 'Найти',
                  width: 80,
                  action: 'searchTreeData'}
                ]}
    ];

    this.callParent();
}
});  

Then in the controller I write code like this to get the value of the textfield

Ext.define('FormApp.controller.ControlOne', {
extend: 'Ext.app.Controller',

views: ['ElementContainer', 'TreeView'],

init: function() {
    this.control({
        'elemcontainer button[action=searchTreeData]': {
            click: this.searchTree
        },
        'elemcontainer textfield[name=search]':{change: this.str}
    });
},

searchTree: function(searchStr) {
    var dat = Ext.widget('elemcontainer');

    var str = dat.down('textfield').getValue();

    alert (str.getValue());
    },

str: function()
{alert('OK');}
});  

I can not get the value of a text field in extJS

How to access the elements to get their values​​?

Thanks in advance and sorry for my clumsy English

Answer 1

The problem is that by using Ext.widget(...) in searchTree(), you're creating a new instance of the class (be sure to check the docs), rather than getting the of the component that already exists.

Another issue is that str is already the "value" of the textfield, so calling getValue() on str.getValue() won't get you very far either.

So a few suggestions:

1. Update you searchTree method to pass the correct arguments. Since this method is getting called on the click event of a button, the arguments will be those of the click event for Ext.button.Button : searchTree( btn, e, opts ) {...}

2. Once you have the correct arguments being passed to searchTree(), you can then use the component selector methods to get the existing instance of the container. For example, since the button is already a descendant of the container, you can do the following to get the correct instance of the component:

   var ctr = btn.up( "elemcontainer" )

   And now that you have the correct instance of the container, you can again use one of the component selector methods to find the textfield:

   var str = ctr.down( 'textfield' ).getValue()