What's New?

[CLOSED] Dynamically generate button and button menu problem.

Page 1 of 2 12 LastLast
  1. #1
    Dec 21, 2011, 7:40 AM

    [CLOSED] Dynamically generate button and button menu problem.

    My scene, Dynamically generate button and button menu according to the xml config file:
    1) When click "b1" button, generate some buttons in the panel topbar (It seems no problem)
    2) When click "b2" button, delete the buttons which "b1" created just now (I don't know to destroy)
    3) And when click "b2" button, generate some button menu panel topbar. (It seems some error)

    Please help me. Thanks.
    1.xml
    <?xml version="1.0" encoding="utf-8" ?>
<MENU>
  <SubMenu ParentID="1.1.2">
    <id>1.1.2.1</id>
    <title>AA</title>
    <url></url>
    <iconcls>icon-buttons</iconcls>
  </SubMenu>

  <SubMenu ParentID="1.1.2">
    <id>1.1.2.2</id>
    <title>AB</title>
    <url></url>
    <iconcls>icon-buttons</iconcls>
  </SubMenu>

  <SubMenu ParentID="1.1.2">
    <id>1.1.2.3</id>
    <title>AC</title>
    <url></url>
    <iconcls>icon-buttons</iconcls>
  </SubMenu>


  <SubMenu ParentID="3.2.1">
    <id>3.2.1.1</id>
    <title>EE</title>
    <url></url>
    <iconcls>icon-buttons</iconcls>
  </SubMenu>

  <SubMenu ParentID="3.2.1.1">
    <id>3.2.1.1.1</id>
    <title>EE-1</title>
    <url></url>
    <iconcls>icon-buttons</iconcls>
  </SubMenu>

  <SubMenu ParentID="3.2.1.1">
    <id>3.2.1.1.2</id>
    <title>EE-2</title>
    <url></url>
    <iconcls>icon-buttons</iconcls>
  </SubMenu>

  <SubMenu ParentID="3.2.1.1">
    <id>3.2.1.1.3</id>
    <title>EE-3</title>
    <url></url>
    <iconcls>icon-buttons</iconcls>
  </SubMenu>



  <SubMenu ParentID="3.2.1">
    <id>3.2.1.2</id>
    <title>EF</title>
    <url></url>
    <iconcls>icon-buttons</iconcls>
  </SubMenu>

  <SubMenu ParentID="3.2.1.2">
    <id>3.2.1.2.1</id>
    <title>EF-1</title>
    <url></url>
    <iconcls>icon-buttons</iconcls>
  </SubMenu>

  <SubMenu ParentID="3.2.1.2">
    <id>3.2.1.2.2</id>
    <title>EF-2</title>
    <url></url>
    <iconcls>icon-buttons</iconcls>
  </SubMenu>
</MENU>

    1.aspx
    <body>
    <ext:ResourceManager ID="extAjaxScriptManager" runat="server" />
    <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
        <Items>
            <ext:Panel ID="CenterPanel" runat="server" Layout="FitLayout" Region="Center">
                <TopBar>
                    <ext:Toolbar ID="tbCenterPanel" runat="server">
                        <Items>
                            <ext:Button ID="bRefresh" runat="server" Text="Refresh" Icon="ArrowRefresh">
                            </ext:Button>
                            <ext:Button ID="bCopyUrl" runat="server" Text="Copy URL" Icon="PageCopy">
                            </ext:Button>
                            <ext:ToolbarSeparator />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:Panel ID="Panel2" runat="server">
                        <TopBar>
                            <ext:Toolbar runat="server">
                                <Items>
                                    <ext:Button ID="b1" Text="Add 1" runat="server">
                                        <DirectEvents>
                                            <Click OnEvent="b1_Click" />
                                        </DirectEvents>
                                    </ext:Button>
                                    <ext:Button ID="b2" Text="Add 2" runat="server">
                                        <DirectEvents>
                                            <Click OnEvent="b2_Click" />
                                        </DirectEvents>
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                    </ext:Panel>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
</body>
    1.aspx.cs
        public partial class _1 : System.Web.UI.Page
    {
        private const string MENU_ID = "id";
        private const string MENU_URL = "url";
        private const string MENU_TITLE = "title";
        private const string MENU_ICONCLS = "iconcls";
        DataSet m_dsSubMenu = new DataSet();


        protected void Page_Load(object sender, EventArgs e)
        {
            GetSubMenuDataSet();
        }

        protected void b1_Click(object sender, DirectEventArgs e)
        {
            CreatSubMenu("1.1.2");
        }

        protected void b2_Click(object sender, DirectEventArgs e)
        {
            CreatSubMenu("3.2.1");
        }

        private void CreatSubMenu(string szTreeId)
        {
            /*----------------Variables Declaration---------------*/
            System.Data.DataView dvMenu;
            DataRow[] drMenus;
            /*----------------Operations---------------*/
            try
            {
                dvMenu = new System.Data.DataView();
                dvMenu.Table = m_dsSubMenu.Tables[0];
                dvMenu.RowFilter = "ParentID='" + szTreeId + "'";
                drMenus = m_dsSubMenu.Tables[0].Select("ParentID='" + szTreeId + "'");

                foreach (DataRow drMenu in drMenus)
                {
                    Ext.Net.Button button = new Ext.Net.Button();
                    button.ID = "button" + drMenu[MENU_ID].ToString();
                    button.Text = drMenu[MENU_TITLE].ToString();
                    button.IconCls = drMenu[MENU_ICONCLS].ToString();

                    if (drMenu[MENU_URL].ToString() != string.Empty)
                    {
                        //button.Listeners.Click.Handler = "Ext.Msg.alert('Click','" + drMenu[MENU_URL].ToString() + "')";
                        //button.Listeners.Click.Handler = "changeSubMenuURL('" + drMenu[MENU_URL].ToString() + "')";
                    }

                    CenterPanel.TopBar.Toolbar.Items.Add(button);
                    button.Render();
                    //CenterPanel.Render();
                    // To add leaf to each treepanel
                    InitSubMenuLeaf(button, drMenu[MENU_ID].ToString());
                }
            }
            catch
            {
                throw;
            }
        }

        private void InitSubMenuLeaf(Ext.Net.Button button, string szParentId)
        {
            /*----------------Variables Declaration---------------*/
            string tmpRootId;
            System.Data.DataView dvMenu;
            Ext.Net.MenuItem menuItem;
            Ext.Net.Menu menu = new Ext.Net.Menu();
            /*----------------Operations---------------*/
            try
            {
                tmpRootId = szParentId;
                dvMenu = new System.Data.DataView();
                dvMenu.Table = m_dsSubMenu.Tables[0];
                dvMenu.RowFilter = "parentid = '" + szParentId + "'";
                foreach (DataRowView drv in dvMenu)
                {
                    menuItem = new Ext.Net.MenuItem();
                    menuItem.ID = "menuItem" + drv[MENU_ID].ToString();
                    menuItem.Text = (string)drv[MENU_TITLE];
                    menuItem.IconCls = drv[MENU_ICONCLS].ToString();
                    menu.Items.Add(menuItem);
                    menuItem.Render();
                }
                if (dvMenu.Count > 0)
                {
                    button.Menu.Add(menu);
                    menu.Render();
                }
            }
            catch
            {
                throw;
            }
        }

        private DataSet GetSubMenuDataSet()
        {
            /*----------------Variables Declaration---------------*/
            string szXmlPath;
            /*----------------Operations---------------*/
            try
            {
                szXmlPath = "~/1.xml";
                szXmlPath = HostingEnvironment.MapPath(szXmlPath);
                m_dsSubMenu.ReadXml(szXmlPath);

                return m_dsSubMenu;
            }
            catch
            {
                return null;
                throw;
            }

        }
    }
    Last edited by Daniil; Dec 22, 2011 at 5:08 AM. Reason: [CLOSED]
  2. #2
    Dec 21, 2011, 9:34 AM
    Hi,

    1. If you need to render a menu in button, you should call .Render() for a button and you should not call .Render() for menu items and menu.

    So, I can recommend to just call .Render() for a button after the InitSubMenuLeaf method and remove all other .Render() calling.

    2. To remove previous items I would suggest you to call .RemoveAll().

    But you need to should use an additional container to avoid removing items which you add in markup.
    <ext:Toolbar runat="server">
    <Items>
        ...
        <ext:Container ID="Container1" runat="server" Layout="ToolbarLayout" />
    </Items>
</ext:Toolbar>
    Respectively, you should add buttons into the Container1.
  3. #3
    Dec 22, 2011, 1:36 AM
    Quote Originally Posted by Daniil View Post
    Hi,

    1. If you need to render a menu in button, you should call .Render() for a button and you should not call .Render() for menu items and menu.

    So, I can recommend to just call .Render() for a button after the InitSubMenuLeaf method and remove all other .Render() calling.

    2. To remove previous items I would suggest you to call .RemoveAll().

    But you need to should use an additional container to avoid removing items which you add in markup.
    <ext:Toolbar runat="server">
    <Items>
        ...
        <ext:Container ID="Container1" runat="server" Layout="ToolbarLayout" />
    </Items>
</ext:Toolbar>
    Respectively, you should add buttons into the Container1.
    Hi, Daniil:
    Thanks for your reply, according to your suggestion, I modified my function in the cs code:
            private void CreatSubMenu(string szTreeId)
        {
            /*----------------Variables Declaration---------------*/
            System.Data.DataView dvMenu;
            DataRow[] drMenus;
            /*----------------Operations---------------*/
            try
            {
                dvMenu = new System.Data.DataView();
                dvMenu.Table = m_dsSubMenu.Tables[0];
                dvMenu.RowFilter = "ParentID='" + szTreeId + "'";
                drMenus = m_dsSubMenu.Tables[0].Select("ParentID='" + szTreeId + "'");
                Container1.RemoveAll();
                foreach (DataRow drMenu in drMenus)
                {
                    Ext.Net.Button button = new Ext.Net.Button();
                    button.ID = "button" + drMenu[MENU_ID].ToString();
                    button.Text = drMenu[MENU_TITLE].ToString();
                    button.IconCls = drMenu[MENU_ICONCLS].ToString();

                    Container1.Add(button);
                    //CenterPanel.TopBar.Toolbar.Items.Add(button);

                    System.Data.DataView dvMenuItem;
                    dvMenuItem = new System.Data.DataView();
                    dvMenuItem.Table = m_dsSubMenu.Tables[0];
                    dvMenuItem.RowFilter = "parentid = '" + drMenu[MENU_ID].ToString() + "'";
                    if (dvMenuItem.Count > 0)
                    {
                        InitSubMenuLeaf(button, dvMenuItem);
                    }
                    else
                    {
                        button.Render();
                    }
                }

            }
            catch
            {
                throw;
            }
        }


        private void InitSubMenuLeaf(Ext.Net.Button button, System.Data.DataView dvMenuItem)
        {
            /*----------------Variables Declaration---------------*/
            Ext.Net.MenuItem menuItem;
            Ext.Net.Menu menu = new Ext.Net.Menu();
            /*----------------Operations---------------*/
            try
            {
                foreach (DataRowView drv in dvMenuItem)
                {
                    menuItem = new Ext.Net.MenuItem();
                    menuItem.ID = "menuItem" + drv[MENU_ID].ToString();
                    menuItem.Text = (string)drv[MENU_TITLE];
                    menuItem.IconCls = drv[MENU_ICONCLS].ToString();
                    menu.Items.Add(menuItem);
                }
                button.Menu.Add(menu);
                button.Render();

            }
            catch
            {
                throw;
            }
        }
    It can generate and delete the controls. And the layout result is this:
    Click image for larger version.  Name: 20111222-02.png  Views: 137  Size: 7.3 KB  ID: 3607

    But my expection layout result is the following:
    Click image for larger version.  Name: 20111222-01.png  Views: 140  Size: 3.0 KB  ID: 3606

    I don't know how to change the layout, could you give me some more suggestion?
    Thanks.
  4. #4
    Dec 22, 2011, 3:25 AM
    On my side I have the layout you need.

    Please demonstrate your markup where is the Container1.
  5. #5
    Dec 22, 2011, 3:34 AM
    Quote Originally Posted by Daniil View Post
    On my side I have the layout you need.

    Please demonstrate your markup where is the Container1.
    Hi, please see following:
        <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
        <Items>
            <ext:Panel ID="CenterPanel" runat="server" Layout="FitLayout" Region="Center">
                <TopBar>
                    <ext:Toolbar ID="tbCenterPanel" runat="server">
                        <Items>
                            <ext:Button ID="bRefresh" runat="server" Text="Refresh" Icon="ArrowRefresh">
                            </ext:Button>
                            <ext:Button ID="bCopyUrl" runat="server" Text="Copy URL" Icon="PageCopy">
                            </ext:Button>
                            <ext:ToolbarSeparator />
                            <ext:Container ID="Container1" runat="server" Layout="ToolbarLayout" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:Panel ID="Panel2" runat="server">
                        <TopBar>
                            <ext:Toolbar runat="server">
                                <Items>
                                    <ext:Button ID="b1" Text="Add 1" runat="server">
                                        <DirectEvents>
                                            <Click OnEvent="b1_Click" />
                                        </DirectEvents>
                                    </ext:Button>
                                    <ext:Button ID="b2" Text="Add 2" runat="server">
                                        <DirectEvents>
                                            <Click OnEvent="b2_Click" />
                                        </DirectEvents>
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                    </ext:Panel>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Viewport>
  6. #6
    Dec 22, 2011, 3:43 AM
    Looks the same.

    Any other changes? Do you still use the same XML file?

    What browser do you test with?
  7. #7
    Dec 22, 2011, 3:51 AM
    Quote Originally Posted by Daniil View Post
    Looks the same.

    Any other changes? Do you still use the same XML file?

    What browser do you test with?
    Yes, still this same XML file. And browser is IE 9.
  8. #8
    Dec 22, 2011, 3:53 AM
    The same.

    Is the issue reproducible with the latest Ext.NET from SVN?

    Please try:
    Layout="toolbar"
    instead of
    Layout="ToolbarLayout"
  9. #9
    Dec 22, 2011, 4:17 AM
    Quote Originally Posted by Daniil View Post
    The same.

    Is the issue reproducible with the latest Ext.NET from SVN?

    Please try:
    Layout="toolbar"
    instead of
    Layout="ToolbarLayout"
    I just download the latest Ext.Net from SVN, and tried again.
    Either Layout="toolbar" or Layout="ToolbarLayout" , the result is the same.

    PS: the firefox browser result is correct. But I need to use IE9.
  10. #10
    Dec 22, 2011, 4:34 AM
    Please try to set some explicit Width for the Container1. Does it help?
Page 1 of 2 12 LastLast

Similar Threads

  1. CheckMenuItem layout problem in button menu
    By his363 in forum 2.x Help
    Replies: 0
    Last Post: Aug 08, 2012, 9:46 AM
  2. [CLOSED] Adding menu items to button group dynamically in a direct event..
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 21, 2012, 9:25 AM
  3. [CLOSED] When button click, open the menu of button
    By supera in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 22, 2012, 4:23 PM
  4. Problem when clicking a button on the toolbar dynamically created
    By Wellington Caetano in forum 1.x Help
    Replies: 0
    Last Post: Apr 07, 2011, 8:48 PM
  5. [CLOSED] Button Menu, without the button
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 22, 2010, 8:10 PM

Posting Permissions