PDA

View Full Version : Menu help



mschwartz
11 Jun 2009, 5:51 AM
I have a toolbar in the west of a border layout. The toolbar has one button in a buttongroup that's as wide as the west region. The west can be resized via a splitter and the button nicely adjusts its width.

There's a menu attached to the button, and when it's shown, it's width is about 60% the width of the button (it's default width, before using the split to make it wider).

How do I make the menu as wide as the button?

I wish a combo could be used, but that's not what the client wants.

mschwartz
11 Jun 2009, 6:00 AM
menu.on('render', function() {
var cmp = Ext.getCmp('mybutton');
this.setWidth(cmp.getWidth());
});


works. My question is if there's a way to do it without a handler, via config options.

mjlecomte
11 Jun 2009, 6:24 AM
Well, menu is a container now, so presumably you might be able to treat like anything else, for example:



b = new Ext.Button({
renderTo: document.body,
text: 'something relatively long',
width: 500,
menu: new Ext.menu.Menu({
width:485,
items:[
{
text: 'menu item'
}
]
})
});

Animal
11 Jun 2009, 6:37 AM
The Menu has received a lot of refactoring recently.

I suspect this issue will not occur in the final release,.

I tested it like this, and it looked OK:

http://i131.photobucket.com/albums/p286/TimeTrialAnimal/menuok.jpg

mschwartz
11 Jun 2009, 6:38 AM
Heh... I want the width to be the width of the west region, not a fixed # of pixels...

Animal
11 Jun 2009, 6:38 AM
You mean you want the west region to be a Menu?

mschwartz
11 Jun 2009, 6:40 AM
You mean you want the west region to be a Menu?

The west region has a toolbar at the top with one button in a buttongroup, anchor 100% so it's as wide as the west region. The button is as wide as the west region.

Without a fixed width, the menu is maybe 60% as wide as the button.

I want the menu exactly as wide as the button.

The code I pasted works, but I figured there might be a way to do it with anchor or a layout of some kind. I tried various things without the right effect.

mschwartz
11 Jun 2009, 6:42 AM
See attached, this is the desired effect.

mschwartz
11 Jun 2009, 6:44 AM
As a side note, the issue is similar to one with the datefield.

If you have a form that's 600px wide and use anchor 100% on the date field, you click on the trigger and then you have to move your mouse way to the left to use the popup picker. Here you have to move way left to use the menu.

mjlecomte
11 Jun 2009, 6:47 AM
Dunno, but seems like would be nice to have some kind of anchoring ability of the menu to the button.

Animal
11 Jun 2009, 6:56 AM
A beforeshow listener is the only way to go.

If that region, and therefore Button, might change size, then it has to be dynamically calculated, so set its width in a beforeshow listener.

Animal
11 Jun 2009, 7:02 AM
beforeshow won't work.

Here's what I came up with:



var westPanel = new Ext.Panel({
title: 'Navigation',
layout: 'whatever',
region: 'west',
margins: '0 0 0 5',
split: true,
width: 120,
tbar: {
layout: 'anchor',
items: [{
text: 'Site: commnexus.org',
anchor: '100%',
ref: '../navButton',
menu: {
items: [{
text: 'commnexus.org'
}],
listeners: {
show: function(m) {
m.setWidth(westPanel.navButton.getWidth());
}
}
}
}]
},
items: ...
});

mschwartz
11 Jun 2009, 7:22 AM
menu.on('render', function() {
var cmp = Ext.getCmp('mybutton');
this.setWidth(cmp.getWidth());
});
works. My question is if there's a way to do it without a handler, via config options.

I posted this in error. It's not 'render' but 'show' in my code, and it works.

Animal
11 Jun 2009, 7:27 AM
So we both really came up with the same thing. That's cool. I like using the new ref config though, I think that's a great feature. Keep getCmp lookups to a minimum.

mschwartz
11 Jun 2009, 9:25 AM
So we both really came up with the same thing. That's cool. I like using the new ref config though, I think that's a great feature. Keep getCmp lookups to a minimum.

getCmp() seems efficient enough. It's one hash calculation and an index operation. As long as the component actually is registered...