为什么我被迫使用Ext.getCmp('id')而不是this.objectName?

时间:2012-02-21 14:41:07

标签: extjs this

当我使用this.stateComboBox引用组合框时,它会失败。但是,使用相同的语法,它适用于文本字段。

给组合框一个'id',我可以使用Ext.getCmp('stateComboBox')来引用它。但是,我知道这是不好的做法。

有人可以告诉我我做错了什么吗?见最后的注释。

由于

Ext.define('App.view.prospects.Show', {

    alias:                        'widget.prospectsshow',
    extend:                       'Ext.form.Panel',
    iconCls:                      'icon-prospects',
    itemId:                       'prospectsshow',

    constructor:                   function(config) {

        var cfg = config || {};

        this.phoneNumberTextField = Ext.create('Ext.form.field.Text', {
            anchor:                   '100%',
            allowBlank:                true,
            fieldLabel:               'Phone Number',
            labelAlign:               'top',
            margin:                   '5 5 5 0',
            tabIndex:                  1
        });

        this.stateComboBox = Ext.create('Ext.form.field.ComboBox', {
            anchor:                   '100%',
            displayField:             'name',
            editable:                  false,
            fieldLabel:               'State',
            forceSelection:            true,
            id:                       'stateComboBox', // I hate using this. See note below.
            labelAlign:               'top',
            margin:                   '5 5 5 5',
            mode:                     'local',
            store:                     this.stateStore,
            tabIndex:                  22,
            triggerAction:            'all',
            valueField:               'id',
            valueNotFoundText:        ''
        });

        // Lots of objects removed for clarity....

        Ext.applyIf(cfg, {
            border:                    false,
            items:                     Ext.create('Ext.form.Panel', {
                bodyStyle:            'background-color: #F1F1F1;',
                items:                 this.prospectPanel  // Not shown above, but contains this.phoneNumberTextField and this.stateComboBox
            }),
            frame:                     false,
            layout:                   'fit'
        });

        this.superclass.constructor.call(this, cfg);
    },

    setData:                         function(record) {

        // This works fine.
        this.phoneNumberTextField.setValue(record.phone_number); 

        // This fails. No error in console. Just does nothing. WHY?
        //this.stateComboBox.setValue(record.state_id);  

        // This works. But, I hate using 'id'. It is BAD practice.
        Ext.getCmp('stateComboBox').setValue(record.state_id);   
    }
});    

1 个答案:

答案 0 :(得分:3)

您应该使用itemId而不是id。通过调用获取对象:

this.getComponent('internalid');

为了解决这个问题,我怀疑你只是在早期创建引用。你需要小心你所做的事情,所以你最终不会将对象添加到原型而不是继承对象。

在initComponent中添加所有内容而不是构造函数。

initComponent: function ()
{

    // you can add things to config here
    var config = {
        anchor: '100% 100%',
        ...
    };

    // create your local var things here (don't forget to add it somewhere)
    this.combo = Ext.create('...');

    // apply new config to base config
    Ext.apply(this, config);

    // ExtJS does all the stuff with the config
    this.callParent();

    // from here you should be able to getComponent
    // not always true though depending on rendering
}