[CLOSED] Adding a new MenuItem dynamically

  1. #1

    [CLOSED] Adding a new MenuItem dynamically

    Hi,

    What's the equivalent of the client side method adding a new MenuItem?

    ExtJs 3.4 addMenuItem
    Last edited by Daniil; Aug 13, 2015 at 12:06 PM. Reason: [CLOSED]
  2. #2
    Hi Vadym,

    I don't see an exact equivalent, but according to .addMenuItem() sources it is just a wrapper for the .add() method with a logic to choose between a regular menu Item and a CheckItem. Probably, they just excluded this method from API. You can either repeat the logic of the .addMenuItem() method (maybe, with some slight changes for Ext.NET v3) or you can the .add() method directly:
    menu.add(new Ext.menu.Item(config));
    or
    menu.add(new Ext.menu.CheckItem(config));
  3. #3
    Thanks for your reply, Daniil! Please execute the code sample below in IE11 reproducing the simplified setup of my application. Set MenuTestMain.aspx as the startup page in VS. After hitting the button in the banner area, hover over the newly added sub menu and observe that the code breaks within the ExtJS library.

    MenuTestMain.aspx
    <%@ 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>Ext.Net 3.x</title>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
        <script type="text/javascript">
            var onAddMenu = function () {
                var tab = App.TabPanel1.addTab({
                    id: "Tab1",
                    title: "New Tab",
                    closable: false,
                    loader: {
                        url: "MenuTestChild.aspx",
                        renderer: "frame",
                        noCache: true,
                        loadMask: {
                            showMask: true,
                            msg: "Loading..."
                        },
                        scripts: true
                    }
                }, 0);
            };
    
            var onDocumentReady = function () {
                App.MenuItem2.setDisabled(true);
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server">
                <Listeners>
                    <DocumentReady Fn="onDocumentReady"></DocumentReady>
                </Listeners>
            </ext:ResourceManager>
            <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
                <Items>
                    <ext:Toolbar runat="server" Region="North" Height="60">
                        <Items>
                            <ext:ToolbarTextItem runat="server" Text="Accordion Layout Example"></ext:ToolbarTextItem>
                            <ext:Button runat="server" Text="Add Tab & Menu">
                                <Listeners>
                                    <Click Fn="onAddMenu"></Click>
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                    <ext:Panel ID="Panel1" runat="server" Region="West" Width="240" Header="true" Title="Main Menu"
                        Layout="AccordionLayout" Collapsible="true" CollapseMode="Mini" Split="false" MaxWidth="240">
                        <Items>
                            <ext:MenuPanel ID="MenuPanel1" ItemID="MenuPanel1" runat="server" AutoScroll="true"
                                Title="Menu Panel 1" Border="false">
                                <Menu ID="Menu1" runat="server">
                                    <Items>
                                        <ext:MenuItem ID="MenuItem1" ItemID="MenuItem1" runat="server"
                                            Text="Menu Item 1">
                                        </ext:MenuItem>
                                        <ext:MenuItem ID="MenuItem2" ItemID="MenuItem2" runat="server"
                                            Text="Menu Item 2">
                                            <Menu>
                                                <ext:Menu ID="SubMenu1" runat="server">
                                                    <Items>
                                                    </Items>
                                                </ext:Menu>
                                            </Menu>
                                        </ext:MenuItem>
                                    </Items>
                                </Menu>
                            </ext:MenuPanel>
                        </Items>
                    </ext:Panel>
                    <ext:TabPanel ID="TabPanel1" runat="server" Region="Center" LayoutOnTabChange="true" HideMode="Display" EnableTabScroll="true">
                    </ext:TabPanel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    MenuTestChild.aspx
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        private object[] TestData
        {
            get
            {
                var now = DateTime.Now;
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                    new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                    new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                    new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
                    new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
                    new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
                    new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
                    new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
                    new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
                    new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
                    new object[] { "Government Motors Corporation", 30.27, 1.09, 3.74, now },
                    new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
                    new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
                    new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
                    new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
                    new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
                    new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
                    new object[] { "McDonald\"s Corporation", 36.76, 0.86, 2.40, now },
                    new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
                    new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
                    new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
                    new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
                    new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
                    new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
                    new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
                    new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
                };
            }
        }
    
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                DataBind();
            }
        }
    
        private void DataBind()
        {
            this.Store1.DataSource = this.TestData;
            this.Store1.DataBind();
        }
    
        protected void Store1_ReadData(object sender, StoreReadDataEventArgs e)
        {
            var store = sender as Store;
            if (store == null) return;
            var dataSource = store.DataSource;
    
            if (dataSource != null) return;
    
            DataBind();
        }
    </script>
    <script type="text/javascript">
        var refreshHandler = function () {
            var grid = this.up('gridpanel');
            Ext.net.Mask.show({
                el: grid
            });
            grid.getStore().reload({
                callback: function () {
                    Ext.net.Mask.hide();
                }
            });
        };
    
        var onDocumentReady = function () {
            var topWindow = window.parent;
            var config = {
                id: "MenuSubItem1",
                text: "Menu Sub Item 1"
            };
    
            var subMenu = topWindow.Ext.getCmp("SubMenu1");
            var menuItem = topWindow.Ext.getCmp("MenuItem2");
    
            subMenu.add(new Ext.menu.Item(config));
            menuItem.setDisabled(false);
        };
    
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Local Data Paging - Ext.NET Examples</title>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server">
                <Listeners>
                    <DocumentReady Fn="onDocumentReady"></DocumentReady>
                </Listeners>
            </ext:ResourceManager>
            <ext:Viewport runat="server" Layout="FitLayout">
                <Items>
                    <ext:GridPanel ID="GridPanel1" runat="server" Flex="1">
                        <Store>
                            <ext:Store ID="Store1" runat="server" RemoteSort="false" RemotePaging="false" AutoLoad="true" PageSize="10" OnReadData="Store1_ReadData">
                                <Model>
                                    <ext:Model ID="Model1" runat="server" IDProperty="company">
                                        <Fields>
                                            <ext:ModelField Name="company" />
                                            <ext:ModelField Name="price" Type="Float" />
                                            <ext:ModelField Name="change" Type="Float" />
                                            <ext:ModelField Name="pctChange" Type="Float" />
                                            <ext:ModelField Name="lastChange" Type="Date" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <ColumnModel ID="ColumnModel1" runat="server">
                            <Columns>
                                <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Width="200">
                                    <Editor>
                                        <ext:TextField ID="TextField1" runat="server" />
                                    </Editor>
                                </ext:Column>
                                <ext:Column ID="Column2" runat="server" Text="Price" Width="75" DataIndex="price">
                                    <Editor>
                                        <ext:TextField ID="TextField2" runat="server" />
                                    </Editor>
                                </ext:Column>
                                <ext:Column ID="Column3" runat="server" Text="Change" Width="100" DataIndex="change" />
                                <ext:Column ID="Column4" runat="server" Text="Change" Width="100" DataIndex="pctChange" />
                                <ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" Width="120" DataIndex="lastChange"
                                    Format="HH:mm:ss" />
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                        </SelectionModel>
                        <BottomBar>
                            <ext:PagingToolbar ID="PagingToolbar1" runat="server" RefreshHandler="refreshHandler">
                                <Items>
                                </Items>
                            </ext:PagingToolbar>
                        </BottomBar>
                    </ext:GridPanel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
  4. #4
    Please replace
    subMenu.add(new Ext.menu.Item(config));
    with
    subMenu.add(new topWindow.Ext.menu.Item(config));
    Ext should belong to the same page where you create new components.
  5. #5
    Thanks, Daniil, that was it! Please mark this thread closed.

Similar Threads

  1. Replies: 1
    Last Post: Sep 24, 2013, 12:42 PM
  2. Replies: 0
    Last Post: Jul 22, 2013, 2:18 PM
  3. Adding a GroupTabPanel Dynamically
    By Sesshoumaru in forum 2.x Help
    Replies: 4
    Last Post: Oct 04, 2012, 6:35 PM
  4. adding tabs dynamically
    By n_s_adhikari@rediffmail.com in forum 1.x Help
    Replies: 3
    Last Post: Nov 16, 2009, 7:29 AM
  5. PropertyGrid - Adding items dynamically?
    By MasterV in forum 1.x Help
    Replies: 9
    Last Post: Jan 15, 2009, 3:13 AM

Tags for this Thread

Posting Permissions