PDA

View Full Version : menu adding custom div with addElement



gaxunil
21 Jun 2007, 11:26 AM
Hi Guys,
I'm trying to add a <div> with some controls to a menu. Basically, I just want a button on the toolbar that will drop my <div> with a bunch of controls in it that the user can then select options from. I setup the <div> on the page, then add it to the menu with addElement(), using the id of the <div>. Seems to work, but I don't want the <div> to actually appear in the page content.

The <div> appears in the page flow until you hit the menu button to drop the menu. Then, it seems to get "sucked up" by the menu and disappears out of the page flow. If I set the <div> style to "hidden" or "display: none" then, it doesn't render in the menu either.

Is there some way I can add my <div> from the body code, yet not have that <div> show up inline on the page?

example:


var menu = new Ext.menu.Menu({
id: 'mainMenu',
});

menu.addElement('controls');

var tb = new Ext.Toolbar('toolbar');
tb.add({
cls: 'x-btn-text-icon bmenu', // icon and text class
text:'Button w/ Menu',
menu: menu // assign menu by instance
});

. . ..

<body>
<div id="controls">bunch of form controls in here, but I don't want them to show in page layout, only when the menu is dropped.</div>
</body>

-John

jearo
12 Jul 2007, 5:27 PM
Did you try to extend Ext.form.TriggerField that contains menu. Then you can first hide the div portion and then show it by overriding onTriggerClick. This is the idea I got from reading Ext.form.DateField in ext-all.js.