[CLOSED] [3.??] Ext.getCmp() bug with ComboBoxes

[mschwartz]

I create a ComboBox either by xtype or by new Ext.form.Combo(), with id: 'some_unique_id'.

At create time using Ext.form.Combo(), I examine the object returned, and it sure does appear to be a ComboBox.

However, in an event handler, I do:
var cmp = Ext.getCmp('some_unique_id');

Examine the object returned, and it's something else, a child of the combo:
cmp.id: 'some-unique-id'
cmp.dom.className: 'x-form-text x-form-field'
cmp.dom.nodeName: "INPUT"

&c

The problem is, this cmp returned has no markInvalid() method, but the one returned by the construction does.

[evant]

Can you post the console.logs() for both upon construction and using getCmp?

[mschwartz]

Can you clarify the question?

There are no console.log() calls in the code that I know of. I'm setting breakpoints with firebug and examining what getCmp() returns if I use an xtype construction and examining the variable if I construct with the new operator. I posted what I see in my first post, when I do getCmp(). Using the new construction, I get a variable pointing at a valid combo that I can call markInvalid() on just fine.

To be more clear...

var form = new Ext.form.FormPanel({
...
  {
     xtype: 'combo',
     id: 'unique_id',
     ...
   }
...
});

var combo = Ext.getCmp('unique_id');

combo points at something not a combo.

Examine the object returned, and it's something else, a child of the combo:
cmp.id: 'some-unique-id'
cmp.dom.className: 'x-form-text x-form-field'
cmp.dom.nodeName: "INPUT"
(has no markInvalid method)

If I do this instead:

var combo = new Ext.form.ComboBox({
   ...
});
var form = new Ext.form.FormPanel({
  ...
  items: [
    combo
    ...
  ]
});

combo points at a valid combo box.
(has a markInvalid method)

[Animal]

To debug, add an interceptor to Ext.ComponentMgr.register and break or alert if something ever overrides that id with some other object

[evant]

Definitely cannot reproduce this:

Ext.onReady(function() {
    var cmb = new Ext.form.ComboBox({
        triggerAction: 'all',
        id: 'foo',
        store: [1, 2, 3],
        renderTo: document.body
    });
    
    var x = Ext.getCmp('foo');
    console.log(cmb == x);
});

[mschwartz]

You using rc1?

[aconran]

Tried to reproduce this in several different variants under the latest SVN and was unable to reproduce it.

[mschwartz]

Definitely cannot reproduce this:

Ext.onReady(function() {
    var cmb = new Ext.form.ComboBox({
        triggerAction: 'all',
        id: 'foo',
        store: [1, 2, 3],
        renderTo: document.body
    });
    
    var x = Ext.getCmp('foo');
    console.log(cmb == x);
});

That's not the case that fails for me.

More like:

var form = new Ext.form.FormPanel({
  items: [
    {
      xtype: 'combo',
      id: 'foo',
      ... (other options)
     }
  ],
  tbar: new Ext.Toolbar({
    items: [
      {
        text: 'click me',
        handler: function() {
          console.dir(Ext.getCmp('foo')); // not a combo for me
        }
      }
    ]
  })
});

[aconran]

Tried again with something similar to what you posted and was unable to reproduce. Can you zip up your version and send it to me and/or put it in a hosted environment i can debug?

[mschwartz]

I wish it were easy to do. My app is 17,000 lines of javascript and extracting just a piece of it isn't trivial. I'm also not at liberty to show the app, I'd need permission to do that.

I can be more specific.

The button is in the fbar of a dialog window, not a tbar. I thought maybe the tbar button would do the trick.

A snippet of the code making the combo:

                {
                    xtype: 'combo',
                    id: 'datasource-' + id,
                    fieldLabel: 'Data Source',
                    store: this.tablestore,
                    valueField: 'nodeid',
                    displayField: 'title',
                    msgTarget: 'side',
                    listeners: {
                        render: function() {
                            this.store.on('load', function() {
                                this.setValue(p.datasource || 'Choose Table');
                            }, this);
                            this.store.load();
                        }
                    }
                }

The snippet of code doing the getCmp():

            var cmp = Ext.getCmp('datasource-'+id);
            if (cmp.getValue() == 'Choose Table') {
                cmp.markInvalid('You must choose a data source');  // firebug stops here, cmp.markInvalid is undefined
                valid = false;
            }

id is a unique number.