Alternative for Ext.getCmp() ?

[e-get2]

Dudes, how can i call my components without Ext.getCmp() ???

I have watch :
http://tdg-i.com/392/ext-js-screencast-the-dangers-of-ext-getcmp

But, this is not so easy....

I have 2 codes generated, using Ext Designer 1.1.2 ...

1 - UIAlterarSenha.ui.js

UIAlterarSenhaUi = Ext.extend(Ext.Window, {
id: 'winAlterarSenha',
initComponent: function() {
this.items = [
{
xtype: 'form',
title: '',
x: 0,
y: 0,
height: 210,
layout: 'absolute',
border: false,
ref: 'frmAlteracaoSenha',
id: 'frmAlteracaoSenha',
items: [
{
xtype: 'textfield',
width: 180,
x: 10,
y: 20,
name: 'edtAlterarSenhaEmpresa',
ref: '../edtAlterarSenhaEmpresa',
id: 'edtAlterarSenhaEmpresa'
},

.
.
.

But i want to acess textfield :edtAlterarSenhaEmpresa, without Ext.getCmp().

2 - UIAlterarSenha.js

UIAlterarSenha = Ext.extend(UIAlterarSenhaUi, {
initComponent: function() {
UIAlterarSenha.superclass.initComponent.call(this);

Ext.getCmp('edtAlterarSenhaEmpresa')...
// How can i do this in a different mode ???


}
});

[AlxH]

You can do something like:

var field=this.down("form").getForm().findField("edtAlterarSenhaEmpresa");

Don't know if it's better than "getCmp", though.

[e-get2]

You can do something like:

var field=this.down("form").getForm().findField("edtAlterarSenhaEmpresa");

Don't know if it's better than "getCmp", though.

This is the problem, i want scape from Hard Coding...

with something like:

this.edtAlterarSenhaEmpresa

but, i have tried and not works...

[AlxH]

Well at least that way you can leave the properties "id" and "ref" out and you can have multiple instances of your class. So Its not that "hard coded"
One other approach would be to instanciate the field before in initComponent
like:
this.myField=new Ext.form.field.Text({....});

and replace the { xtype:'textfield' ....} with "this.myField"

[steffenk]

ref does not exist anymore, and id is unnecessary and makes no sense here.

ComponentQuery is easy to use, in your case just do

this.down('field[name="edtAlterarSenhaEmpresa"]')

and that's it. You can do it from window or form, it searches recursive. It works without any additional attribute, so it's the most flexible solution.

[mberrie]

Have a look at the examples, here the FeedViewer app:

Ext.define('FeedViewer.App', {
    extend: 'Ext.container.Viewport',
    
    initComponent: function(){
        [...]
        
        Ext.apply(this, {
            layout: 'border',
            padding: 5,
            items: [this.createFeedPanel(), this.createFeedInfo()]
        });
        this.callParent(arguments);
    },
    
   [...]
    
    createFeedInfo: function(){
        this.feedInfo = Ext.create('widget.feedinfo', {
            region: 'center'
        });
        return this.feedInfo;
    },
    
    onFeedSelect: function(feed, title, url){
        this.feedInfo.addFeed(title, url);
    }
});

I usually define those variables (class fields) at the top of the class definition alongside with some documentation

Ext.define('FeedViewer.App', {
    extend: 'Ext.container.Viewport',

    /** 
     *  a reference to the feedInfo panel which ...
     */ 
    feedInfo : null,

I have the impression that some users are afraid of directly instantiating components because they want to apply lazy loading (using object literals with an xtype).
However, there is no real benefit in applying xtype lazy loading throughout your component hierarchy if you are properly encapsulating your application by use of classes.

In this example (FeedViewer), for instance, the sub components will be created upon instantiation of the FeedViewer class, and *not* upon definition (aka loading of the code) thereof.

At the same time, taking the code from the first post, all child components will be created as soon as an instance of UIAlterarSenha is created - no matter if you use xtype definitions or not. The loading behavior is the same as in the FeedViewer example.

It surely makes sense to use some form of lazy loading in large applications where parts of the UI are not loaded until a later point in time.
In such a case apply lazy loading at distinctive points high up in the component hierarchy. E.g. if you use a TabPanel or CardLayout to switch between app modules, make sure that the topmost element for a module is lazy loaded.

HTH