PDA

View Full Version : MenuItem autoRef



resTive
21 May 2010, 11:35 AM
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
21 May 2010, 11:55 AM
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
21 May 2010, 12:02 PM
thank your for the quick information.
is there a handy workaround, or there another 'easy' way to add an without using ids?

fargs
22 May 2010, 4:02 PM
I am having the same issue

jarrednicholls
22 May 2010, 6:17 PM
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
22 May 2010, 9:41 PM
Nice fix ... thanks!

devtig
26 Oct 2010, 1:27 AM
I believe this problem still exists with Ext JS 3.3.0 and the monkey fix still works.

jarrednicholls
29 Nov 2010, 11:34 AM
putting in a permanent fix for 3.3.1

madirishman
2 Dec 2010, 7:18 AM
Did the fix make it to the final release of 3.3.1? I just installed it and it still behaves the same.

jarrednicholls
2 Dec 2010, 9:46 AM
It would appear not, I don't think it was merged. It'll be in 3.3.2 in that case. Sorry!

madirishman
2 Dec 2010, 10:48 AM
No prob.

p.s. Thanks for all the awesome work on the Designer! It's sweet!

devtig
2 Dec 2010, 10:37 PM
Isn't this the fix in ext-all.js? It wasn't there in 3.3.0 and an earlier post mentioned that that fixed it.


Ext.Button = Ext.extend(Ext.BoxComponent, {
...,
initComponent : function(){
if(this.menu){
this.menu = Ext.menu.MenuMgr.get(this.menu);
this.menu.ownerCt = this;
}
Ext.Button.superclass.initComponent.call(this);
...
},
...
});

jarrednicholls
3 Dec 2010, 7:11 AM
That's a commit just before the final fix:



Ext.Button = Ext.extend(Ext.BoxComponent, {
...,
initComponent : function(){
if(this.menu){
// If array of items, turn it into an object config so we
// can set the ownerCt property in the config
if (Ext.isArray(this.menu)){
this.menu = { items: this.menu };
}

// An object config will work here, but an instance of a menu
// will have already setup its ref's and have no effect
if (Ext.isObject(this.menu)){
this.menu.ownerCt = this;
}

this.menu = Ext.menu.MenuMgr.get(this.menu);
this.menu.ownerCt = undefined;
}

Ext.Button.superclass.initComponent.call(this);
...
},
...
});

h.wagner@telekom.de
19 Jan 2011, 1:08 AM
That's a commit just before the final fix:

Is this problem really fixed in 3.3.1?
I'm still having this error with autorefs for all menu items.

Thank in advance.

jarrednicholls
19 Jan 2011, 5:45 AM
It's been fixed for 3.3.2 - the final commit didn't make it into the 3.3.1 release. The code in the post just before yours is what's committed for 3.3.2.

cincoks
24 May 2011, 11:06 AM
Nice fix. Now I can handle click events like this:

this.mnuSearchNew.on('click', this.onCreateTab, this);

onCreateTab: function() {
....
}

But I have a problem. I don't know how to pass the menu item as a parameter to the handler. I want to create a new Tab into a Tab control with the same menu item title. How can I do it?

Thanks