[CLOSED] Dynamically Build Context Menu

  1. #1

    [CLOSED] Dynamically Build Context Menu

    hi,

    I am trying to dynamically build context menus. I want to enable a Menu object and then attach 3 menuitems to it. i expected to see a nice Arrow for the Menu and a subwindow with the three items but that isnt what happens. I dont see a nice arrow and the subwindow overlaps the original context menu. pls assist.

    see full standalone example below

    Thanks,
    /Z

    <%@ Page Language="C#" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Menu bug</title>
       
        <script type="text/javascript">
    
    
            var setupDualEmps = function (menuItem) {
                App.testmenuitem.setVisible(true);
                App.testmenuitemthing.setVisible(false);
    
    
                //clear it
                App.testmenuitem.removeAll();
    
    
                var obj = this;
                var menuItem = Ext.create("Ext.menu.Item", {
                    text: 'Row test1'
                });
                App.testmenuitem.add(menuItem);
    
    
                var menuItem = Ext.create("Ext.menu.Item", {
                    text: 'Row test2'
                });
                App.testmenuitem.add(menuItem);
                var menuItem = Ext.create("Ext.menu.Item", {
                    text: 'Row test2'
                });
                App.testmenuitem.add(menuItem);
    
    
            };
    
    
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server">
            </ext:ResourceManager>
    
    
            
            <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
                <Items>
    
    
                    <ext:GridPanel 
                        ID="GridPanel1" 
                        runat="server" 
                        ContextMenuID="testmenu"
                        Title="Test"   
                        EmptyText="test"    
                        ColumnLines="true"          
                        Layout="FitLayout">
                            <Store>
                            <ext:Store ID="Store1" runat="server" AutoLoad="false">
                                <Proxy>
                                    <ext:AjaxProxy Url="/ta/Support/test">
                                        <ActionMethods READ="GET" />
                                        <Reader>
                                            <ext:JsonReader IDProperty="id" RootProperty="data" TotalProperty="total"/>
                                        </Reader>
                                    </ext:AjaxProxy>
                                </Proxy>
                                <Model>
                                    <ext:Model ID="Model1" runat="server" IDProperty="TaskID">
                                        <Fields>
                                            <ext:ModelField Name="ProjectID" Type="Int" />
                                            <ext:ModelField Name="Name" />
                                            <ext:ModelField Name="TaskID" Type="Int" />
                                            <ext:ModelField Name="Description" />
                                            <ext:ModelField Name="Estimate" Type="Int" />
                                            <ext:ModelField Name="Rate" Type="Float" />
                                            <ext:ModelField Name="Cost" Type="Float" />
                                            <ext:ModelField Name="Due" Type="Date" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                                <Listeners>
                                    <Load Handler="Ext.net.Mask.show();" Delay="5000" />
                                </Listeners>
                            </ext:Store>
                        </Store>
                        <ColumnModel ID="ColumnModel1" runat="server">
                            <Columns>
                                <ext:Column ID="Column1"
                                    runat="server"
                                    TdCls="task"
                                    Text="Task"
                                    Sortable="true"
                                    DataIndex="Description"
                                    Hideable="false"
                                    Width="300">
                                </ext:Column>
                         
                                <ext:Column ID="Column2" runat="server" Text="Project" DataIndex="Name" Width="180" />
                         
                                <ext:DateColumn ID="DateColumn1"
                                    runat="server"
                                    Width="130"
                                    Text="Due Date"
                                    Sortable="true"
                                    DataIndex="Due"
                                    Format="MM/dd/yyyy">
                                </ext:DateColumn>
     
                                <ext:Column ID="Column3"
                                    runat="server"  
                                    Width="130"
                                    Text="Estimate"
                                    Sortable="true"
                                    DataIndex="Estimate">
                                </ext:Column>
                         
                                <ext:Column ID="Column4"
                                    runat="server"
                                    Width="130"
                                    Text="Rate"
                                    Sortable="true"
                                    DataIndex="Rate">
                                </ext:Column>
                         
                                <ext:Column
                                    runat="server"
                                    Width="130"
                                    ID="Cost"
                                    Text="Cost"
                                    Sortable="false"
                                    Groupable="false"
                                    DataIndex="Cost">
                                </ext:Column>
                            </Columns>                
                        </ColumnModel>           
                        <View>
                            <ext:GridView ID="GridView7" runat="server" StripeRows="true" EmptyText="No Data"/>
                        </View>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single" />
                        </SelectionModel>
                    </ext:GridPanel>
                </Items>
            </ext:Viewport>
    
    
    
    
            <ext:Menu ID="testmenu" runat="server">
                <Listeners>    
                    <Show Handler="setupDualEmps();Ext.QuickTips.getQuickTip().hide();" />
                </Listeners>
                <Items>
                    <ext:Label ID="Label1" runat="server" Html="<b class='menu-title'>Choose an Option</b>" />
                    <ext:Menu ID="testmenuitem" runat="server" Icon="ArrowRight" Text="View eInfo" Group="theme" Hidden="true"/>
                    <ext:MenuItem ID="testmenuitemthing" runat="server" Icon="CalendarEdit" Text="View Info" Group="theme">
                    </ext:MenuItem>
                    <ext:MenuSeparator ID="MenuSeparator1" runat="server" />
                    <ext:MenuItem ID="MenuItem1" runat="server" Icon="Calendar" Text="View Test" Group="theme">
                    </ext:MenuItem>
                    <ext:MenuItem ID="MenuItem2" runat="server" Icon="UserB" Text="View Test2" Group="theme">
                    </ext:MenuItem>
                </Items>
            </ext:Menu>
    
    
        </form>
      </body>
    </html>
    Last edited by fabricio.murta; Jan 18, 2017 at 4:05 PM.
  2. #2
    Hello @Z!

    You are in the right direction, thanks for the clean test case.

    The problem in your case is that you are adding an menu directly to another menu list of entries. You have to create a menu item and then inside this, bind your menu entries. And there are means to make that easier.

    So, first change is to make your testmenuitem into a menu item entry itself, not a menu itself. Then inside it, the setupDualEmps() function will attach the submenu (or add entries to the submenu that must be instantiated at some point).

    Here's how I came up with your sample code to make it work, icons included:

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Menu bug</title>
        <script type="text/javascript">
            var setupDualEmps = function (menuItem) {
                var submenuItem = App.testmenuitem,
                    submenu = Ext.create('Ext.menu.Menu'),
                    menuData = { iconCls: '#UserB' },
                    menuItem;
    
                // Add three entries to the submenu
                for (var i = 1; i < 3; i++) {
                    // just set the text entry to the menu data (keeping the
                    // iconCls specified above)
                    menuData.text = 'Row test #' + i;
    
                    submenu.add(Ext.create("Ext.menu.Item", menuData));
                }
    
                // Attach the actual submenu to the menu item entry, destroying
                // existing the menu inside it if any.
                submenuItem.setMenu(submenu, true);
    
                submenuItem.setVisible(true);
                App.testmenuitemthing.setVisible(false);
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server">
            </ext:ResourceManager>
            <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
                <Items>
                    <ext:GridPanel 
                        ID="GridPanel1" 
                        runat="server" 
                        ContextMenuID="testmenu"
                        Title="Test"   
                        EmptyText="test"    
                        ColumnLines="true"          
                        Layout="FitLayout">
                            <TopBar>
                                <ext:Toolbar runat="server">
                                    <Items>
                                        <ext:Button ID="btn1" runat="server" OnClientClick="setupDualEmps();Ext.QuickTips.getQuickTip().hide();" Text="Add new menu entries" />
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                        <ColumnModel ID="ColumnModel1" runat="server">
                            <Columns>
                                <ext:Column ID="Column1"
                                    runat="server"
                                    Text="Task"
                                    Width="300">
                                </ext:Column>
                                <ext:Column ID="Column2" runat="server" Text="Project" Width="180" />
                            </Columns>                
                        </ColumnModel>           
                        <View>
                            <ext:GridView ID="GridView7" runat="server" />
                        </View>
                    </ext:GridPanel>
                </Items>
            </ext:Viewport>
            <ext:Menu ID="testmenu" runat="server">
                <Items>
                    <ext:Label ID="Label1" runat="server" Html="<b class='menu-title'>Choose an Option</b>" />
                    <ext:MenuItem ID="testmenuitem" runat="server" Icon="ArrowRight" Text="View eInfo" Group="theme" Hidden="true">
                        <Menu>
                            <%-- This dummy menu will just ensure the submenu entry has the arrow --%>
                            <ext:Menu runat="server" />
                        </Menu>
                    </ext:MenuItem>
                    <ext:MenuItem ID="testmenuitemthing" runat="server" Icon="CalendarEdit" Text="View Info" Group="theme">
                    </ext:MenuItem>
                    <ext:MenuSeparator ID="MenuSeparator1" runat="server" />
                    <ext:MenuItem ID="MenuItem1" runat="server" Icon="Calendar" Text="View Test" Group="theme">
                    </ext:MenuItem>
                    <ext:MenuItem ID="MenuItem2" runat="server" Icon="UserB" Text="View Test2" Group="theme">
                    </ext:MenuItem>
                </Items>
            </ext:Menu>
        </form>
      </body>
    </html>
    Notice I disabled calling the function on load -- the grid now has a button so you can first see what's in the menu, then click the button to rework the menu and then see the result.

    I removed all other stuff from the sample that was not related to the problem. The grid's data you provided was not ... well.. provided at all, but turned out that's not required at all to reproduce the issue, am I right? Give it a try and let us know!

    Something else you might happen to stumble upon is that some iconCls simply don't work. For this you need to either register all resources or add dummy menu entries using those icons (given you only need a couple to be accessible in the page). There's plenty of threads in the forums covering this issue. The point is that not always all resources are necessary and if you are willing to use them from client-side only, Ext.NET has no means to know them unless you tell it so either having dummy entries use the resource or just registering all resources (which may be quite heavy if you only needed a couple).

    Well, hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thank you for the explanation. i was easily able to correct my code and it worked on the first try.

    I have a set of 4 static examples for "support postings" that i always work off of. I usually take out anything that affects the example. the grid was empty so i just left it :)

    /Z
  4. #4
    Thanks @Z! Your simplified and working test cases really helps us help you! The more you can clean out those the better! Less distraction from what we really need to tackle with to help you.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 1
    Last Post: Jan 12, 2013, 4:30 AM
  2. Replies: 0
    Last Post: Mar 29, 2012, 12:50 PM
  3. [CLOSED] Rendering new controls dynamically with a context menu
    By logicspeak in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Oct 24, 2011, 10:29 AM
  4. GridPanel - Context Menu
    By Tbaseflug in forum 1.x Help
    Replies: 8
    Last Post: Sep 28, 2011, 4:01 PM
  5. [CLOSED] Tab Context menu help
    By SymSure in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 31, 2011, 5:08 PM

Posting Permissions