MenuItem autoRef

[resTive]

Hi there,

i try to add a handler to an MenuItem via its reference but it seems there is no reference added to the viewport? Am i missing something?

here is my code:

the viewport ui:

ViewportUi = Ext.extend(Ext.Viewport, {
  layout: 'border',
  initComponent: function() {
    this.items = [
      {
        xtype: 'panel',
        region: 'center',
        layout: 'card',
        activeItem: 0,
        ref: 'contentPanel',
        tbar: {
          xtype: 'toolbar',
          items: [
            {
              xtype: 'button',
              text: 'MyButton',
              ref: '../../buttonRef',
              menu: {
                xtype: 'menu',
                items: [
                  {
                    xtype: 'menuitem',
                    text: 'Menu Item',
                    ref: '../../../../menuItemRef'
                  }
                ]
              }
            }
          ]
        }
      }
    ];
    ViewportUi.superclass.initComponent.call(this);
  }
});

the viewport instance:

Viewport = Ext.extend(ViewportUi, {
  initComponent: function() {
    Viewport.superclass.initComponent.call(this);
    console.log(this.contentPanel);//works for the Panel
    console.log(this.buttonRef);//works for the Button
    console.log(this.menuItemRef);//doesnt work for the MenuItem
  }
});

thank you for your help

[jarrednicholls]

I believe this may be a bug or omission in ExtJS proper. I'm not able to get ref's to work for buttons inside of a menu that's tied to a button. I will put in a bug ticket for you.

[resTive]

thank your for the quick information.
is there a handy workaround, or there another 'easy' way to add an without using ids?

[fargs]

I am having the same issue

[jarrednicholls]

I would resort to component ids as a for-sure workaround at this point. I am going to post a monkey-patch to Ext JS in a few minutes.

EDIT:

Here's a monkey patch that fixes the issue. I typically put these types of overrides in an ext-overrides.js file and include that just after I include Ext (i.e. ext-all.js).

This code only works if the menu is configured as an xtype object (such as the above case), it won't help menus configured as an array of items. The Designer doesn't generate the latter...

Ext.Button.prototype.initComponent = Ext.Button.prototype.initComponent.createInterceptor(function(){
    if (this.menu){
        this.menu.ownerCt = this;
    }
});

[fargs]

Nice fix ... thanks!

[devtig]

I believe this problem still exists with Ext JS 3.3.0 and the monkey fix still works.

[jarrednicholls]

putting in a permanent fix for 3.3.1

[madirishman]

Did the fix make it to the final release of 3.3.1? I just installed it and it still behaves the same.

[jarrednicholls]

It would appear not, I don't think it was merged. It'll be in 3.3.2 in that case. Sorry!