[CLOSED] Menu Component appears under menu

**imaa** · Sep 08, 2011, 8:46 AM

Dear Friends ,

i add a dropdownField instead of 3 combo boxs to a menu , when i click on the DDF the component appears under the menu ,

in the attached sample and screen shots
Sample Page


<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <script src="Reports.js" type="text/javascript"></script> 
    <script src="BaseJs.js" type="text/javascript"></script> 
    <ext:Store ID="stExternalAgency" runat="server">
        <Reader>
            <ext:JsonReader IDProperty="ID">
                <Fields>
                    <ext:RecordField Name="ID">
                    </ext:RecordField>
                    <ext:RecordField Name="Name">
                    </ext:RecordField>
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <ext:Store ID="stEmployeeHireracy" runat="server" >
        <Reader>
            <ext:JsonReader IDProperty="Employee_ID">
                <Fields>
                    <ext:RecordField Name="Employee_ID">
                    </ext:RecordField>
                    <ext:RecordField Name="Employee_Name">
                    </ext:RecordField>
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <ext:FormPanel ID="fReports" runat="server" PaddingSummary="5px 5px 0" Width="850"
        Frame="false" ButtonAlign="Left" AutoHeight="true" AutoRender="true" IDMode="Static">
        <Content>
            <div style="direction: rtl; float: right; text-align: center; overflow: auto;">
                <ext:Panel ID="pnToolbar" runat="server">
                    <TopBar>
                        <ext:Toolbar ID="tbEmployee" IDMode="Static" runat="server">
                            <Items>
                                <ext:Button runat="server" Icon="ReportGo" ID="AdminMenu" Text="أدارة النظام">
                                    <Menu>
                                        <ext:Menu runat="server">
                                            <Items>
                                                <ext:MenuItem runat="server" AutoPostBack="true" ID="miEmployeePrivilge" Text="صلاحيات الموظفين">
                                                    <Listeners>
                                                        <Click Fn="getReportsParmeters" />
                                                    </Listeners>
                                                </ext:MenuItem>
                                            </Items>
                                        </ext:Menu>
                                    </Menu>
                                </ext:Button>
                                <ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server">
                                </ext:ToolbarSeparator>
                                <ext:Button runat="server" ID="CTSMenu" Icon="ReportUser" Text="الأتصالات الأدارية">
                                    <Menu>
                                        <ext:Menu runat="server">
                                            <Items>
                                                <ext:MenuItem runat="server" IDMode="Static" ID="miOutGoing" Text="الصادر اليومي" HideOnClick="false">
                                                    <Menu>
                                                        <ext:Menu ID="Menu1" runat="server" Width="400" AutoHeight="true">
                                                            <Items>
                                                                <ext:ComponentMenuItem ID="ComponentMenuItem1" runat="server" HideOnClick="false" Flex="-1" IsFormField="true" LazyMode="Instance" >
                                                                    <Component>
                                                                        <ext:Container runat="server" ID="cDates" AutoWidth="true" >
                                                                            <Items>
                                                                                <ext:DateField runat="server" IDMode="Static" Hidden="true" AllowBlank="false" FieldLabel="من تاريخ"
                                                                                    ID="dfFromDateOutGoing" Icon="DateAdd">
                                                                                </ext:DateField>
                                                                                <ext:DropDownField  AutoWidth="true" runat="server" ID="ddlFromDateOutGoingHijriDate"  IDMode="Static"
                                                                                    FieldLabel="من تاريخ" Editable="false">
                                                                                    <Component> 
                                                                                        <ext:FormPanel runat="server" ID="fpHijriFromDateOutGoing" AutoWidth="true">
                                                                                            <Items>
                                                                                                <ext:TableLayout runat="server" ID="tblLa" Columns="3"  >
                                                                                                    <Cells>
                                                                                                        <ext:Cell>
                                                                                                            <ext:ComboBox runat="server" ID="cbFromDateOutGoingYears" Width="70" EmptyText="السنه"
                                                                                                                IDMode="Static">
                                                                                                                <Items>
                                                                                                                    <ext:ListItem Value="1431" Text="1431 هـ" />
                                                                                                                    <ext:ListItem Value="1432" Text="1432 هـ" />
                                                                                                                    <ext:ListItem Value="1433" Text="1433 هـ" />
                                                                                                                    <ext:ListItem Value="1434" Text="1434 هـ" />
                                                                                                                    <ext:ListItem Value="1435" Text="1435 هـ" />
                                                                                                                    <ext:ListItem Value="1436" Text="1436 هـ" />
                                                                                                                    <ext:ListItem Value="1437" Text="1437 هـ" />
                                                                                                                    <ext:ListItem Value="1438" Text="1438 هـ" />
                                                                                                                    <ext:ListItem Value="1439" Text="1439 هـ" />
                                                                                                                    <ext:ListItem Value="1440" Text="1440 هـ" />
                                                                                                                </Items>
                                                                                                                <Listeners>
                                                                                                                    <Select Handler="dateSelect(#{cbFromDateOutGoingDays},#{cbFromDateOutGoingMonthes},#{cbFromDateOutGoingYears});" />
                                                                                                              
                                                                                                                </Listeners>
                                                                                                            </ext:ComboBox>
                                                                                                        </ext:Cell>
                                                                                                        <ext:Cell>
                                                                                                            <ext:ComboBox runat="server" ID="cbFromDateOutGoingMonthes" Width="100" EmptyText="الشهر"
                                                                                                                IDMode="Static">
                                                                                                                <Items>
                                                                                                                    <ext:ListItem Text="1-محرّم" Value="1" />
                                                                                                                    <ext:ListItem Text="2-صفر" Value="2" />
                                                                                                                    <ext:ListItem Text="3-ربيع الأول" Value="3" />
                                                                                                                    <ext:ListItem Text="4-ربيع الآخر" Value="4" />
                                                                                                                    <ext:ListItem Text="5-جمادى الأولى" Value="5" />
                                                                                                                    <ext:ListItem Text="6-جمادى الآخرة" Value="6" />
                                                                                                                    <ext:ListItem Text="7-رجب " Value="7" />
                                                                                                                    <ext:ListItem Text="8-شعبان" Value="8" />
                                                                                                                    <ext:ListItem Text="9-رمضان" Value="9" />
                                                                                                                    <ext:ListItem Text="10-شوال" Value="10" />
                                                                                                                    <ext:ListItem Text="11-ذو القعدة" Value="11" />
                                                                                                                    <ext:ListItem Text="12-ذو الحجة" Value="12" />
                                                                                                                </Items>
                                                                                                                <Listeners>
                                                                                                                    <Select Handler="dateSelect(#{cbFromDateOutGoingDays},#{cbFromDateOutGoingMonthes},#{cbFromDateOutGoingYears});" />
                                                                                                                </Listeners>
                                                                                                            </ext:ComboBox>
                                                                                                        </ext:Cell>
                                                                                                        <ext:Cell>
                                                                                                            <ext:ComboBox runat="server" ID="cbFromDateOutGoingDays" Width="50" EmptyText="اليوم"
                                                                                                                IDMode="Static">
                                                                                                                <Items>
                                                                                                                    <ext:ListItem Value="1" Text="1" />
                                                                                                                    <ext:ListItem Value="2" Text="2" />
                                                                                                                    <ext:ListItem Value="3" Text="3" />
                                                                                                                    <ext:ListItem Value="4" Text="4" />
                                                                                                                    <ext:ListItem Value="5" Text="5" />
                                                                                                                    <ext:ListItem Value="6" Text="6" />
                                                                                                                    <ext:ListItem Value="7" Text="7" />
                                                                                                                    <ext:ListItem Value="8" Text="8" />
                                                                                                                    <ext:ListItem Value="9" Text="9" />
                                                                                                                    <ext:ListItem Value="10" Text="10" />
                                                                                                                    <ext:ListItem Value="11" Text="11" />
                                                                                                                    <ext:ListItem Value="12" Text="12" />
                                                                                                                    <ext:ListItem Value="13" Text="13" />
                                                                                                                    <ext:ListItem Value="14" Text="14" />
                                                                                                                    <ext:ListItem Value="15" Text="15" />
                                                                                                                    <ext:ListItem Value="16" Text="16" />
                                                                                                                    <ext:ListItem Value="17" Text="17" />
                                                                                                                    <ext:ListItem Value="18" Text="18" />
                                                                                                                    <ext:ListItem Value="19" Text="19" />
                                                                                                                    <ext:ListItem Value="20" Text="20" />
                                                                                                                    <ext:ListItem Value="21" Text="21" />
                                                                                                                    <ext:ListItem Value="22" Text="22" />
                                                                                                                    <ext:ListItem Value="23" Text="23" />
                                                                                                                    <ext:ListItem Value="24" Text="24" />
                                                                                                                    <ext:ListItem Value="25" Text="25" />
                                                                                                                    <ext:ListItem Value="26" Text="26" />
                                                                                                                    <ext:ListItem Value="27" Text="27" />
                                                                                                                    <ext:ListItem Value="28" Text="28" />
                                                                                                                    <ext:ListItem Value="29" Text="29" />
                                                                                                                    <ext:ListItem Value="30" Text="30" />
                                                                                                                    <ext:ListItem Value="31" Text="31" />
                                                                                                                </Items>
                                                                                                                <Listeners>
                                                                                                                    <Select Handler="dateSelect(#{cbFromDateOutGoingDays},#{cbFromDateOutGoingMonthes},#{cbFromDateOutGoingYears});" />
                                                                                                                </Listeners>
                                                                                                            </ext:ComboBox>
                                                                                                        </ext:Cell>
                                                                                                    </Cells>
                                                                                                </ext:TableLayout>
                                                                                            </Items> 
                                                                                        </ext:FormPanel>
                                                                                    </Component>
                                                                                    <Listeners  >
                                                                                    
                                                                                    <Expand Fn="showMe" />
                                                                                    </Listeners>
                                                                                </ext:DropDownField>
                                                                            </Items>
                                                                        </ext:Container>
                                                                    </Component>
                                                                </ext:ComponentMenuItem>
                                                                <ext:ComponentMenuItem ID="ComponentMenuItem2" runat="server">
                                                                    <Component>
                                                                        <ext:DateField runat="server" IDMode="Static" FieldLabel="إلى تاريخ" ID="dfToDateOutGoing"
                                                                            Icon="DateAdd">
                                                                        </ext:DateField>
                                                                    </Component>
                                                                </ext:ComponentMenuItem>
                                                                <ext:MenuSeparator />
                                                                <ext:ComponentMenuItem ID="ComponentMenuItem6" runat="server">
                                                                    <Component>
                                                                        <ext:ButtonGroup runat="server" Width="400" ButtonAlign="Center">
                                                                            <Items>
                                                                                <ext:Button ID="btnOutGoing" Text="عرض التقرير" AutoPostBack="true" Icon="ReportGo"
                                                                                    runat="server">
                                                                                    <Listeners>
                                                                                        <Click Fn="getReportsParmeters" />
                                                                                    </Listeners>
                                                                                </ext:Button>
                                                                            </Items>
                                                                        </ext:ButtonGroup>
                                                                    </Component>
                                                                </ext:ComponentMenuItem>
                                                            </Items>
                                                        </ext:Menu>
                                                    </Menu>
                                                </ext:MenuItem>
                                                <ext:MenuSeparator runat="server" />
                                                <ext:MenuItem ID="miInGoing" runat="server" IDMode="Static" Text="الوارد اليومي">
                                                    <Menu>
                                                        <ext:Menu runat="server" Width="400" AutoHeight="true">
                                                            <Items>
                                                                <ext:ComponentMenuItem ID="ComponentMenuItem3" runat="server">
                                                                    <Component>
                                                                        <ext:DateField runat="server" IDMode="Static" FieldLabel="من تاريخ" ID="dfFromDateInGoing"
                                                                            Icon="DateAdd">
                                                                        </ext:DateField>
                                                                    </Component>
                                                                </ext:ComponentMenuItem>
                                                                <ext:ComponentMenuItem ID="ComponentMenuItem4" runat="server">
                                                                    <Component>
                                                                        <ext:DateField runat="server" IDMode="Static" FieldLabel="إلى تاريخ" ID="dfToDateInGoing"
                                                                            Icon="DateAdd">
                                                                        </ext:DateField>
                                                                    </Component>
                                                                </ext:ComponentMenuItem>
                                                                <ext:MenuSeparator />
                                                                <ext:ComponentMenuItem ID="ComponentMenuItem9" runat="server">
                                                                    <Component>
                                                                        <ext:ButtonGroup ID="ButtonGroup1" runat="server" Width="400" ButtonAlign="Center">
                                                                            <Items>
                                                                                <ext:Button ID="btnInGoing" AutoPostBack="true" Text="عرض التقرير" Icon="ReportGo"
                                                                                    runat="server">
                                                                                    <Listeners>
                                                                                        <Click Fn="getReportsParmeters" />
                                                                                    </Listeners>
                                                                                </ext:Button>
                                                                            </Items>
                                                                        </ext:ButtonGroup>
                                                                    </Component>
                                                                </ext:ComponentMenuItem>
                                                            </Items>
                                                        </ext:Menu>
                                                    </Menu>
                                                </ext:MenuItem>
                                                <ext:MenuSeparator ID="MenuSeparator1" runat="server" />
                                                <ext:MenuItem ID="miEmployeeOpeartions" IDMode="Static" runat="server" Text="عمليات الموظفين">
                                                    <Menu>
                                                        <ext:Menu ID="Menu3" runat="server" Width="450" AutoHeight="true">
                                                            <Items>
                                                                <ext:ComponentMenuItem ID="ComponentMenuItem14" runat="server">
                                                                    <Component>
                                                                        <ext:GridPanel ID="gpEmployeeHireracy" IDMode="Static" StoreID="stEmployeeHireracy"
                                                                            Collapsible="true" Collapsed="true" runat="server" AutoHeight="true" Title="قائمة الموظفين"
                                                                            StripeRows="true" TrackMouseOver="true" ForceValidation="False" Width="400" AutoExpandColumn="Employee_Name"
                                                                            AutoScroll="true" AutoShow="true">
                                                                            <ColumnModel ID="ColumnModel1" runat="server">
                                                                                <Columns>
                                                                                    <ext:Column ColumnID="clmID" DataIndex="Employee_ID" Hidden="true" Width="60">
                                                                                    </ext:Column>
                                                                                    <ext:Column ColumnID="clEmployee_Name" DataIndex="Employee_Name" Header="الموظفين"
                                                                                        Width="60">
                                                                                    </ext:Column>
                                                                                </Columns>
                                                                            </ColumnModel>
                                                                            <LoadMask ShowMask="true" Msg="جاري التحميل" />
                                                                            <Plugins>
                                                                                <ext:GridFilters runat="server" ID="GridFilters1" Local="true">
                                                                                    <Filters>
                                                                                        <ext:StringFilter DataIndex="Employee_Name" />
                                                                                    </Filters>
                                                                                </ext:GridFilters>
                                                                            </Plugins>
                                                                            <SelectionModel>
                                                                                <ext:CheckboxSelectionModel ID="CheckboxSelectionModel2" runat="server">
                                                                                </ext:CheckboxSelectionModel>
                                                                            </SelectionModel>
                                                                            <BottomBar>
                                                                                <ext:PagingToolbar Cls="Pager" PageSize="10" StoreID="stEmployeeHireracy" NextText="التالي"
                                                                                    PrevText="السابق" FirstText="الصفحة الاولى" LastText="الصفحة الاخيرة" runat="server"
                                                                                    ID="PagingToolbar2">
                                                                                </ext:PagingToolbar>
                                                                            </BottomBar>
                                                                            <Listeners>
                                                                                <ViewReady Handler="onViewReady(this);" />
                                                                            </Listeners>
                                                                        </ext:GridPanel>
                                                                    </Component>
                                                                </ext:ComponentMenuItem>
                                                                <ext:MenuSeparator />
                                                                <ext:ComponentMenuItem ID="ComponentMenuItem7" runat="server">
                                                                    <Component>
                                                                        <ext:DateField runat="server" IDMode="Static" FieldLabel="من تاريخ" ID="dfFromDateEMployeeOpreations"
                                                                            Icon="DateAdd">
                                                                        </ext:DateField>
                                                                    </Component>
                                                                </ext:ComponentMenuItem>
                                                                <ext:ComponentMenuItem ID="ComponentMenuItem8" runat="server">
                                                                    <Component>
                                                                        <ext:DateField runat="server" IDMode="Static" FieldLabel="إلى تاريخ" ID="dfToDateEMployeeOpreations"
                                                                            Icon="DateAdd">
                                                                        </ext:DateField>
                                                                    </Component>
                                                                </ext:ComponentMenuItem>
                                                                <ext:MenuSeparator />
                                                                <ext:ComponentMenuItem ID="ComponentMenuItem12" runat="server">
                                                                    <Component>
                                                                        <ext:ButtonGroup ID="ButtonGroup2" runat="server" Width="400" ButtonAlign="Center">
                                                                            <Items>
                                                                                <ext:Button ID="btnEmployeeOpeartions" AutoPostBack="true" Text="عرض التقرير" Icon="ReportGo"
                                                                                    runat="server">
                                                                                    <Listeners>
                                                                                        <Click Fn="getReportsParmeters" />
                                                                                    </Listeners>
                                                                                </ext:Button>
                                                                            </Items>
                                                                        </ext:ButtonGroup>
                                                                    </Component>
                                                                </ext:ComponentMenuItem>
                                                            </Items>
                                                        </ext:Menu>
                                                    </Menu>
                                                </ext:MenuItem>
                                                <ext:MenuSeparator ID="MenuSeparator2" runat="server" />
                                                <ext:MenuItem ID="miInOutgoingDeliveried" IDMode="Static" runat="server" Text="بيان تسليم صادر">
                                                    <Menu>
                                                        <ext:Menu ID="Menu2" runat="server" Width="450" AutoHeight="true">
                                                            <Items>
                                                                <ext:ComponentMenuItem ID="ComponentMenuItem5" runat="server">
                                                                    <Component>
                                                                        <ext:GridPanel ID="gpExternalAgency" IDMode="Static" StoreID="stExternalAgency" Collapsible="true"
                                                                            Collapsed="false" runat="server" AutoHeight="true" Title="قائمة الجهات الخارجية"
                                                                            StripeRows="true" TrackMouseOver="true" ForceValidation="False" Width="400" AutoExpandColumn="Name"
                                                                            AutoScroll="true" AutoShow="true">
                                                                            <ColumnModel ID="ColumnModel2" runat="server">
                                                                                <Columns>
                                                                                    <ext:Column ColumnID="clmID" DataIndex="ID" Hidden="true" Width="60">
                                                                                    </ext:Column>
                                                                                    <ext:Column ColumnID="clmAgency_Name" DataIndex="Name" Header="أسماء الجهات الخارجية"
                                                                                        Width="60">
                                                                                    </ext:Column>
                                                                                </Columns>
                                                                            </ColumnModel>
                                                                            <LoadMask ShowMask="true" Msg="جاري التحميل" />
                                                                            <Plugins>
                                                                                <ext:GridFilters runat="server" ID="gf" Local="true">
                                                                                    <Filters>
                                                                                        <ext:StringFilter DataIndex="Name" />
                                                                                    </Filters>
                                                                                </ext:GridFilters>
                                                                            </Plugins>
                                                                            <SelectionModel>
                                                                                <ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server">
                                                                                </ext:CheckboxSelectionModel>
                                                                            </SelectionModel>
                                                                            <BottomBar>
                                                                                <ext:PagingToolbar Cls="Pager" PageSize="10" StoreID="stExternalAgency" NextText="التالي"
                                                                                    PrevText="السابق" FirstText="الصفحة الاولى" LastText="الصفحة الاخيرة" runat="server"
                                                                                    ID="PagingToolbar1">
                                                                                </ext:PagingToolbar>
                                                                            </BottomBar>
                                                                            <Listeners>
                                                                                <ViewReady Handler="onViewReady(this);" />
                                                                            </Listeners>
                                                                        </ext:GridPanel>
                                                                    </Component>
                                                                </ext:ComponentMenuItem>
                                                                <ext:MenuSeparator />
                                                                <ext:ComponentMenuItem ID="ComponentMenuItem10" runat="server">
                                                                    <Component>
                                                                        <ext:DateField runat="server" FieldLabel="من تاريخ" ID="dfFromDateOutGoingDelivried"
                                                                            Icon="DateAdd">
                                                                        </ext:DateField>
                                                                    </Component>
                                                                </ext:ComponentMenuItem>
                                                                <ext:ComponentMenuItem ID="ComponentMenuItem11" runat="server">
                                                                    <Component>
                                                                        <ext:DateField runat="server" FieldLabel="إلى تاريخ" ID="dfToDateOutGoingDelivried"
                                                                            Icon="DateAdd">
                                                                        </ext:DateField>
                                                                    </Component>
                                                                </ext:ComponentMenuItem>
                                                                <ext:MenuSeparator />
                                                                <ext:ComponentMenuItem ID="ComponentMenuItem13" runat="server">
                                                                    <Component>
                                                                        <ext:ButtonGroup ID="ButtonGroup3" runat="server" Width="400" ButtonAlign="Center">
                                                                            <Items>
                                                                                <ext:Button ID="btnReportDelivried" AutoPostBack="true" Text="عرض التقرير" Icon="ReportGo"
                                                                                    runat="server">
                                                                                    <Listeners>
                                                                                        <Click Fn="getReportsParmeters" />
                                                                                    </Listeners>
                                                                                </ext:Button>
                                                                            </Items>
                                                                        </ext:ButtonGroup>
                                                                    </Component>
                                                                </ext:ComponentMenuItem>
                                                            </Items>
                                                        </ext:Menu>
                                                    </Menu>
                                                </ext:MenuItem>
                                                <ext:MenuSeparator ID="MenuSeparator3" runat="server" />
                                            </Items>
                                        </ext:Menu>
                                    </Menu>
                                </ext:Button>
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                </ext:Panel>
            </div>
        </Content>
        <Listeners>
            <AfterRender Handler="HandelWindowCustomSize(null,600,#{fReports});" Delay="250" />
        </Listeners>
    </ext:FormPanel>
</asp:Content>

Best Regards

**Vladimir** · Sep 08, 2011, 11:34 AM

Hi,

Well, I don't reccomend to use such complex UI in menu because menu is not designed to use with popup elements like DropDownField, clicking on drop down component will hide the menu because the click is outside menu

1. To show drop down component correctly you can add the following rule to ASP.NET form

 <form id="Form1" runat="server"  style="z-index:99999;">

But i said before, clicking on the dropdown component will close the menu. Therefore use submenus instead DropDownComponent (or collapsed panels)

2. About the grid, try to add the following listener to the grid

<ViewReady Handler="this.view.hmenu.allowOtherMenus = true;" Delay="250"/>

Thread: [CLOSED] Menu Component appears under menu

Thread Tools

Search Thread

Display

[CLOSED] Menu Component appears under menu

Similar Threads

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

[CLOSED] combo in compositefield in menu closing menu on selection

[CLOSED] Splitbutton with Menu - Make the menu expand upwards?

[CLOSED] Menu inside Component menu item

[CLOSED] [1.0] check box selection model check column appears in header menu

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Menu Component appears under menu

[CLOSED] Menu Component appears under menu

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us