Question

I have been using extjs’s

Ext.getCmp('xtypeid').getValue();
Ext.getCmp('xtypeId').setValue('');

to get a value or set a value… I just found out that. this is a bad programming in terms of OOP… but my question is how do you go about getting value or setting values bunch of textbox. It would be great if someone could show me a sample program doing just this.

Answer 1

They are required here cause it happens more than just setting the value. Please keep in mind that JavaScript is a Prototype-based programming language so you cannot compare it with a OOP article that you may have read for Java or C#.

What is bad is the use of getCmp() you should avoid that if possible and completely use ComponentQuery or encapsulating refs. And if possible avoid setting id by yourself if not strictly required. With component query you can query for any custom or common property. For example the itemId is in addition supported by ExtJS and for buttons I use a custom property called action

You should not concern about methods provided by the framework, do it when you extend or create classes and follow the patterns there.

For clarification: Ext.getCmp() is not the bad thing, it is really fast, bad is fact that most people set the id by them self so that they can use getCmp() which can lead to duplicated id’s and that is a problem.

Update

As mentioned in the comment the Ext.ComponentQuery is quite mighty and flexible. I will not cover all in this view lines, just one basic example.

Lets make a simple environment. We have a class called Custom which we have extended from Panel. Custom has a Toolbar in the top dockedItems and a Toolbar in the bottom dockedItems.

Ext.define('Custom', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.custom',

    tbar: {
        itemId: 'top-bar',
        items: [{
            text: 'foo',
            action: 'foo'
        },{
            text: 'bar', 
            action: 'bar'
        }]  
    },
    dockedItems: [{
        xtype: 'toolbar',
        itemId: 'bottom-bar',
        dock: 'bottom',
        items: [{
            text: 'foo-bottom',
            action: 'foo'
        },{
            text: 'bar-bottom', 
            action: 'bar'
        }]  
    }],

    initComponent: function() {
        this.callParent(arguments);
    }
});

Now we are creating instances from our new Class and how it come, we have two instances on screen at the same time.

Ext.create('Custom', {
    title: 'Panel',
    itemId: 'first',
    height: 100,
    width: 400
});
Ext.create('Custom', {
    title: 'Other Panel',
    itemId: 'second',
    height: 100,
    width: 400
});

Now you want to subscribe yourself to button-events within a centralized class but you will need to identify each button for that. You might have seen that I defined some properties like itemId (which is really known by ExtJS and can also be used two query on just one component. See the API) and action. These are names that I use but you might use any here. And now we build our unique path to query with. We will do this for the ‘foo’ button in the bottom Toolbar of the first panel:

First we know that we are looking for a panel. You might say hey we are looking for custom cause that’s our class. But that doesn’t matter cause the ComponentQuery looks if the class is extended from panel. But this is the first point where we can reduce our first result set and we will do this choosing the xtype of our extend class custom.

'custom'

We now get all instances of the class Custom or any class that extend it. Now that are too much, we need one. So we add a filter property.

custom[itemId=first]

Now we have the first Panel. Let’s do the same for the toolbar and the button

custom[itemId=first] > toolbar[itemId=bottom-bar] > button[action=foo]

And that’s pretty much is it.

See the JSFiddle