[CLOSED] Button Menu | Tab not working

**amitpareek** · Jun 02, 2010, 8:25 PM

Hey,

In button menu, I cant get tab on field to work. Can u check it?

Also, I dont want menu to collapse on combo box item select. What shud I do?

<ext:Button runat="server" Text="Contact Details" TabIndex="29" ID="btnContacts" Width="225" LabelWidth="90">
    <Menu>
      <ext:Menu runat="server" ID="menuContacts">
      
      <Items>
      <ext:Panel ID="Panel1" LabelAlign="Top"  runat="server" Layout="table" Width="400" Border="false" ColumnWidth="0.5">
        <LayoutConfig>
            <ext:TableLayoutConfig Columns="2" />
        </LayoutConfig>
        <Items>
            <ext:ComboBox ID="PhoneType1" TabIndex="61" FieldLabel="Contact Method 1" Width="225" runat="server">
                <Items>
                    <ext:ListItem Text="HOME" Value="HOME" />
                    <ext:ListItem Text="EMAIL" Value="EMAIL" />
                    <ext:ListItem Text="OFFICE" Value="OFFICE" />
                    <ext:ListItem Text="WEBSITE" Value="WEBSITE" />
                    <ext:ListItem Text="MOBILE" Value="MOBILE" />
                    <ext:ListItem Text="FAX" Value="FAX" />
                </Items>
                
            </ext:ComboBox>

            <ext:TextField ID="PhoneNumber1" TabIndex="62"  FieldLabel="&amp;nbsp;" Text="&amp;nbsp;" LabelSeparator="&amp;nbsp;" runat="server" />
            <ext:ComboBox ID="ComboBox1" TabIndex="61" FieldLabel="Contact Method 1" Width="225" runat="server">
                <Items>
                    <ext:ListItem Text="HOME" Value="HOME" />
                    <ext:ListItem Text="EMAIL" Value="EMAIL" />
                    <ext:ListItem Text="OFFICE" Value="OFFICE" />
                    <ext:ListItem Text="WEBSITE" Value="WEBSITE" />
                    <ext:ListItem Text="MOBILE" Value="MOBILE" />
                    <ext:ListItem Text="FAX" Value="FAX" />
                </Items>
                
            </ext:ComboBox>
            <ext:TextField ID="PhoneNumber5" TabIndex="70"  FieldLabel="&amp;nbsp;" Text="&amp;nbsp;" LabelSeparator="&amp;nbsp;" runat="server" />
        </Items>
      </ext:Panel>
    </Items>
</ext:Menu>
</Menu>
</ext:Button>

**Vladimir** · Jun 03, 2010, 1:11 PM

Hi,

1. Please use ComponentMenuItem
https://examples1.ext.net/#/Toolbar/...trols_In_Menu/

2. Add the following code to the combos

<GetListParent Handler="return this.el.up('.x-menu');" />

3. Add the following code to the menu

StyleSpec="overflow:visible;"

4. Add the following properties to the ComponentMenuItem

Shift="false" Hide&#111;nclick="false"

Here is the sample

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Button runat="server" Text="Contact Details" TabIndex="29" ID="btnContacts"
        Width="225" LabelWidth="90">
        <Menu>
            <ext:Menu runat="server" ID="menuContacts" StyleSpec="overflow:visible;">
                <Items>
                    <ext:ComponentMenuItem runat="server" Shift="false" Hide&#111;nclick="false">
                        <Component>
                            <ext:Panel ID="Panel1" LabelAlign="Top" runat="server" Layout="table" Width="400"
                                Border="false" ColumnWidth="0.5">
                                <LayoutConfig>
                                    <ext:TableLayoutConfig Columns="2" />
                                </LayoutConfig>
                                <Items>
                                    <ext:ComboBox ID="PhoneType1" TabIndex="61" FieldLabel="Contact Method 1" Width="225"
                                        runat="server">
                                        <Items>
                                            <ext:ListItem Text="HOME" Value="HOME" />
                                            <ext:ListItem Text="EMAIL" Value="EMAIL" />
                                            <ext:ListItem Text="OFFICE" Value="OFFICE" />
                                            <ext:ListItem Text="WEBSITE" Value="WEBSITE" />
                                            <ext:ListItem Text="MOBILE" Value="MOBILE" />
                                            <ext:ListItem Text="FAX" Value="FAX" />
                                        </Items>
                                        <GetListParent Handler="return this.el.up('.x-menu');" />
                                    </ext:ComboBox>
                                    <ext:TextField ID="PhoneNumber1" TabIndex="62" FieldLabel="&amp;nbsp;" Text="&amp;nbsp;"
                                        LabelSeparator="&amp;nbsp;" runat="server" />
                                    <ext:ComboBox ID="ComboBox1" TabIndex="61" FieldLabel="Contact Method 1" Width="225"
                                        runat="server">
                                        <Items>
                                            <ext:ListItem Text="HOME" Value="HOME" />
                                            <ext:ListItem Text="EMAIL" Value="EMAIL" />
                                            <ext:ListItem Text="OFFICE" Value="OFFICE" />
                                            <ext:ListItem Text="WEBSITE" Value="WEBSITE" />
                                            <ext:ListItem Text="MOBILE" Value="MOBILE" />
                                            <ext:ListItem Text="FAX" Value="FAX" />
                                        </Items>
                                        <GetListParent Handler="return this.el.up('.x-menu');" />
                                    </ext:ComboBox>
                                    <ext:TextField ID="PhoneNumber5" TabIndex="70" FieldLabel="&amp;nbsp;" Text="&amp;nbsp;"
                                        LabelSeparator="&amp;nbsp;" runat="server" />
                                </Items>
                            </ext:Panel>
                        </Component>
                    </ext:ComponentMenuItem>
                </Items>
            </ext:Menu>
        </Menu>
    </ext:Button>
    </form>
</body>
</html>

**amitpareek** · Jun 03, 2010, 1:21 PM

Hi,

Can u explain what each of the mentioned points do? I suppose 1st is for tab and 3rd for not hiding on click. What are 2nd and 4th for? and what is Shift="false"

**Vladimir** · Jun 03, 2010, 3:36 PM

Hi,

1. ComponentMenuItem which allows to integrate controls inside menu. It automatically handles many cases to allow the control works correctly inside menu

2. GetListParent of the Combobox
ExtJS docs
getListParent() : void<div class="mdesc" style="margin: 0px; padding: 5px 0px; color: rgb(68, 68, 68);"><div class="long" style="margin: 0px; padding: 0px; display: block; line-height: 18px;">Returns the element used to house this ComboBox's pop-up list. Defaults to the document body.A custom implementation may be provided as a configuration option if the floating list needs to be rendered to a different Element. An example might be rendering the list inside a Menu so that clicking the list does not hide the Menu:<code style="font-style: normal; font-weight: normal; font-size: 12px; color: rgb(0, 0, 0); line-height: 16px ! important; font-family: 'Lucida Console','Courier New',Courier,monospace;">var[/b] store = new[/b] Ext.data.ArrayStore({
autoDestroy: true,
fields: ['initials'[/i], 'fullname'[/i]],
data : [
['FF'[/i], 'Fred Flintstone'[/i]],
['BR'[/i], 'Barney Rubble'[/i]]
]
});

var[/b] combo = new[/b] Ext.form.ComboBox({
store: store,
displayField: 'fullname'[/i],
emptyText: 'Select a name...'[/i],
forceSelection: true,
getListParent: function[/b]() {
return[/b] this.el.up('.x-menu'[/i]);
},
iconCls: 'no-icon'[/i], //use iconCls if[/b] placing within menu to shift to right side of menu[/i]
mode: 'local'[/i],
selectOnFocus: true,
triggerAction: 'all'[/i],
typeAhead: true,
width: 135
});

var[/b] menu = new[/b] Ext.menu.Menu({
id: 'mainMenu'[/i],
items: [
combo // A Field in[/b] a Menu[/i]
]
});</code><div class="mdetail-params" style="margin: 10px 0px 0px; padding: 0px 0px 0px 12px; font-size: 12px;">Parameters:[/b]<ul style="margin: 12px; padding: 0px; list-style-type: circle; list-style-position: inside;"><li style="margin: 0px; padding: 0px; list-style-position: inside; list-style-type: circle;">None.[/list]Returns:[/b]<ul style="margin: 12px; padding: 0px; list-style-type: circle; list-style-position: inside;"><li style="margin: 0px; padding: 0px; list-style-position: inside; list-style-type: circle;">void[/list]

It is used to determine correctly zindex of the dropdown list. Please note that if you place combo inside ComponentMenuItem as main component then set GetListParent is not required

3. StyleSpec="overflow:visible;" for the menu
GetListParent constrains combo by some element (element which is returned by that method). Therefore our combo list cannot be showed outside menu (just remove StyleSpec to see effect).
'overflow:visible' disable clipping for the element

4. Shift="false"
By default, all menu items are shiffted to the right, you can see the space for icon and vertical line. That option removes shiffting (it is ComponentMenuItem option only)

5. Hideonclick="false"
hideOnClick : Boolean<div class="mdesc" style="margin: 0px; padding: 5px 0px; color: rgb(68, 68, 68);"> True to hide the containing menu after this item is clicked (defaults to true)

Thread: [CLOSED] Button Menu | Tab not working

Thread Tools

Search Thread

Display

[CLOSED] Button Menu | Tab not working

RE: [CLOSED] Button Menu | Tab not working

RE: [CLOSED] Button Menu | Tab not working

RE: [CLOSED] Button Menu | Tab not working

Similar Threads

[RAZOR] Menu Panel , Menu , Menu item not working in ext.net 2.0

[CLOSED] When button click, open the menu of button

[CLOSED] Dynamically generate button and button menu problem.

[CLOSED] Button Menu, without the button

Context Menu Not Working

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Button Menu | Tab not working

[CLOSED] Button Menu | Tab not working

RE: [CLOSED] Button Menu | Tab not working

RE: [CLOSED] Button Menu | Tab not working

RE: [CLOSED] Button Menu | Tab not working

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us