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

Question

当我使用 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);   
    }
});    

Answer 1

您应该使用 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
}