[CLOSED] MVC - buid a toolbar dynamically

  1. #1

    [CLOSED] MVC - buid a toolbar dynamically

    Hi,

    I'm trying to build dynamically a toolbar inside a Form using a controller action.

    My problem is that I can not find a way to put the toolbar in the <TopBar>.

    This is my view:

    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
    <%@ 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 id="Head1" runat="server">
        <title>Dynamic Toolbar</title>
        <ext:ResourcePlaceHolder ID="MainResourcePlaceHolder" runat="server" />
        <script type="text/javascript">
            var initToolbar = function () {
                Ext.net.DirectMethod.request({
                    url: "/Test/BuildToolbar",
                    cleanRequest: true,
                    params: {
                        containerId: 'FormPanel1'
                    }
                });
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
     
            <ext:Window 
                ID="FormWindow" 
                runat="server" 
                Title="Build Toolbar" 
                CenterOnLoad="true"
                Width="600" 
                Height="210"
                X="50"
                Y="50"
                Padding="10" 
                Resizable="false" 
                Closable="false"
                Layout="Fit">
                <Items>
                    <ext:FormPanel 
                        ID="FormPanel1" 
                        runat="server" 
                        Border="false" 
                        MonitorValid="true"
                        BodyStyle="background-color:transparent;"
                        Layout="Form">
                        <Items>
                            <ext:TextField 
                                ID="CompanyField" 
                                runat="server" 
                                MsgTarget="Side" 
                                AllowBlank="false"
                                FieldLabel="Company" 
                                Width="260" 
                                />
                            <ext:NumberField 
                                ID="PriceField" 
                                runat="server" 
                                MsgTarget="Side" 
                                AllowBlank="false"
                                FieldLabel="Price" 
                                Width="260" 
                                />
                        </Items>
                    <Listeners>
                        <Render Handler="initToolbar();" />
                    </Listeners>
     
    <%--           
       <TopBar>
        <ext:Toolbar ID="MyToolbar" runat="server">
         <Items>
         .......
         </Items>
        </ext:Toolbar>
       </TopBar>
    --%>
                    </ext:FormPanel>
                </Items>
            </ext:Window>
        </form>
    </body>
    </html>
    and this is my controller action:

            public Ext.Net.MVC.AjaxResult BuildToolbar(string containerId)
            {
                Ext.Net.MVC.AjaxResult response = new Ext.Net.MVC.AjaxResult();
                Toolbar tb = new Toolbar();
                tb.ID = "MyToolbar";
                tb.Items.Add(new Button
                {
                    ID = "ToolbarButtonAdd",
                    Text = "Nuovo",
                    Icon = Icon.Add
                });
                tb.Items.Add(new Button
                {
                    ID = "ToolbarButtonSave",
                    Text = "Salva",
                    Icon = Icon.Disk
                });
                // ??? how to build the toolbar inside the TopBar ???
                response.Script = tb.ToScript(Ext.Net.RenderMode.RenderTo, containerId);
                return response;
            }
    Could you suggest me the right way to accomplish this?

    Bye,
    Stefano
    Last edited by Daniil; Apr 09, 2011 at 12:47 PM. Reason: [CLOSED]
  2. #2
    Hi,

    A Panel (and FormPanel) is not constructed to render a TopBar and a BottomBar on the fly.

    I can suggest you to set up an <ext:Container> (as the first Window's item) and render Toolbar into this container.
  3. #3
    Hi,

    Unfortunately, toolbar cannot be added after the rendering because if toolbar is missed in the init config then container doesn't create required toolbars container.
    I suggest to use VBox layout inside the window and place two items to Items collection
    1. ext:Container with Height="28"
    2. FormPanel with Flex="1"

    After that render toolbar to that container

    P.S. Please use AddTo mode instead RenderTo
  4. #4
    Hi,

    can I define an empty toolbar in markup and dynamically create only the buttons?

    <ext:FormPanel 
     ID="FormPanel1" 
     runat="server" 
     Border="false" 
     MonitorValid="true"
     BodyStyle="background-color:transparent;"
     Layout="Form">
     <Items>
      ...
     </Items>
     
     <Listeners>
      <Render Handler="initToolbar();" />
     </Listeners>
     
     <TopBar>
      <ext:Toolbar ID="Toolbar1" runat="server" />
     </TopBar>
     
    </ext:FormPanel>
    If yes, how do I get a reference of the toolbar in the controller action?

    Bye,
    Stefano
  5. #5
    It can look something like this:

    Example View
    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
        
        <script type="text/javascript">
            var initToolbar = function () {
                Ext.net.DirectMethod.request({
                    url: "/Test/BuildToolbar",
                    cleanRequest: true,
                    params: {
                        containerId: 'Toolbar1'
                    }
                });
            };
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:FormPanel ID="FormPanel1" runat="server" Html="Fields">
            <Listeners>
                <Render Handler="initToolbar();" />
            </Listeners>
            <TopBar>
                <ext:Toolbar ID="Toolbar1" runat="server" />
            </TopBar>
        </ext:FormPanel>
    </body>
    </html>
    Example Action
    public Ext.Net.MVC.AjaxResult BuildToolbar(string containerId)
    {
        Ext.Net.MVC.AjaxResult response = new Ext.Net.MVC.AjaxResult();
        Container c = new Container()
        {
            Layout = "Toolbar"
        };
        c.Items.Add(new Button
        {
            Text = "Button1",
            Icon = Icon.Add
        });
        c.Items.Add(new Button
        {
            Text = "Button2",
            Icon = Icon.Disk
        });
        response.Script = c.ToScript(Ext.Net.RenderMode.RenderTo, containerId);
        return response;
    }
  6. #6
    Hi,

    Your example works, but I need an explanation. Why do you use a new container in controller action?

       Container c = new Container()
           {
               Layout = "Toolbar"
           };

    Toolbar is also a container. Why don't you create the buttons directly into tollbar's items collection?

    Bye,
    Stefano
  7. #7
    To be honest, I just did not know how to avoid an additional container. Well, it was silly:)

    Example
    public Ext.Net.MVC.AjaxResult BuildToolbar(string containerId)
    {
        Ext.Net.MVC.AjaxResult response = new Ext.Net.MVC.AjaxResult();
        
        var b = new Button()
        {
            Text = "Button1",
            Icon = Icon.Add
        };
        response.Script = b.ToScript(Ext.Net.RenderMode.AddTo, containerId);
    
        b = new Button()
        {
            Text = "Button2",
            Icon = Icon.Add
        };
        response.Script += b.ToScript(Ext.Net.RenderMode.AddTo, containerId);
        
        return response;
    }
  8. #8
    Am trying build but its not working

    <%@ Control Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <ext:AccordionLayout runat="server" Animate="true">
        <Items>
            <ext:MenuPanel 
                ID="acReports" 
                runat="server" 
                Border="false" 
                SaveSelection="false"
                Cls="white-menu" 
                Collapsed="true" 
                Title="Reports">
                <Menu runat="server">
                    <Items>
                        <ext:MenuItem 
                            ID="mnCustomerAddressBook" 
                            runat="server" 
                            Text="Customer Address Book"
                            Icon="Report">
                            <CustomConfig>
                                <ext:ConfigItem Name="url" Value="/Report/CustomerAddressBook/" Mode="Value" />
                            </CustomConfig>
                        </ext:MenuItem>
                        <ext:MenuItem 
                            runat="server" 
                            Text="Total Sales By Employee" 
                            Icon="ChartBar">
                            <CustomConfig>
                                <ext:ConfigItem Name="url" Value="/Chart/TotalByEmployee/" Mode="Value" />
                                <ext:ConfigItem Name="passParentSize" Value="true" Mode="Raw" />
                            </CustomConfig>
                        </ext:MenuItem>
                        <ext:MenuItem 
                            runat="server" 
                            Text="Product Sales By Category" 
                            Icon="ChartBar" 
                            Visible="false">
                            <CustomConfig>
                                <ext:ConfigItem Name="url" Value="/Chart/ProductSalesByCategory/" Mode="Value" />
                            </CustomConfig>
                        </ext:MenuItem>
                    </Items>
                    <Listeners>
                        <ItemClick Handler="Northwind.addTab({ title: menuItem.text, url: menuItem.url, icon: menuItem.iconCls, passParentSize: menuItem.passParentSize});" />
                    </Listeners>
                </Menu>
            </ext:MenuPanel>
            <ext:MenuPanel 
                ID="acCustomers" 
                runat="server" 
                Collapsed="true" 
                Title="Customers & Orders"
                Border="false" 
                SaveSelection="false" 
                Cls="white-menu">
                <Menu runat="server">
                    <Items>
                        <ext:MenuItem runat="server" Text="Customer Details" Icon="ApplicationForm">
                            <CustomConfig>
                                <ext:ConfigItem Name="url" Value="/Customer/CustomerDetails/" Mode="Value" />
                            </CustomConfig>
                        </ext:MenuItem>
                        <ext:MenuItem ID="mnCustomerList" runat="server" Text="Customer List" Icon="ApplicationForm">
                            <CustomConfig>
                                <ext:ConfigItem Name="url" Value="/Customer/CustomerList/" Mode="Value" />
                            </CustomConfig>
                        </ext:MenuItem>                   
                        <ext:MenuItem ID="mnOrderList" runat="server" Text="Order List" Icon="ApplicationForm">
                            <CustomConfig>
                                <ext:ConfigItem Name="url" Value="/Order/OrderList/" Mode="Value" />
                            </CustomConfig>
                        </ext:MenuItem>
                    </Items>
                    <Listeners>
                        <ItemClick Handler="Northwind.addTab({ title: menuItem.text, url: menuItem.url, icon: menuItem.iconCls });" />
                    </Listeners>
                </Menu>
            </ext:MenuPanel>
            <ext:MenuPanel 
                ID="acExamples" 
                runat="server" 
                Collapsed="true" 
                Title="Examples"
                Border="false" 
                SaveSelection="false" 
                Cls="white-menu">
                <Menu runat="server">
                    <Items>
                        <ext:MenuItem ID="mnRest" runat="server" Text="REST Demo" Icon="Application">
                            <CustomConfig>
                                <ext:ConfigItem Name="url" Value="/RestDemo/" Mode="Value" />
                            </CustomConfig>
                        </ext:MenuItem>
                        <ext:MenuItem ID="mnPartial" runat="server" Text="Partial Views" Icon="Application">
                            <CustomConfig>
                                <ext:ConfigItem Name="url" Value="/Partial/" Mode="Value" />
                            </CustomConfig>
                        </ext:MenuItem>                                           
                    </Items>
                    <Listeners>
                        <ItemClick Handler="Northwind.addTab({ title : menuItem.text, url : menuItem.url, icon : menuItem.iconCls });" />
                    </Listeners>
                </Menu>
            </ext:MenuPanel>
        </Items>
    </ext:AccordionLayout>
    Action Code

    public Ext.Net.MVC.AjaxResult Menu(string containerId)
            {
                Ext.Net.MVC.AjaxResult response = new Ext.Net.MVC.AjaxResult();
     Container con = new Container();
    
                AccordionLayout acc = new AccordionLayout();
                acc.Animate = true;
                acc.ID = "Acc1";
    
                Ext.Net.MenuPanel menuPanel1 = new MenuPanel();
                menuPanel1.Border = false;
                menuPanel1.ID = "acReports";
                menuPanel1.SaveSelection = false;
                menuPanel1.Cls = "white-menu";
                menuPanel1.Collapsed = true;
                menuPanel1.Icon = Ext.Net.Icon.ChartBar;
                menuPanel1.Title = "Reports";
                menuPanel1.HideCollapseTool = true;
    
                
                Ext.Net.MenuItem MI = new MenuItem();
                MI.ID = "miCustomerBook";
                MI.Text = "Customer Address Book";
                MI.Icon = Ext.Net.Icon.Report;
    
                Ext.Net.MenuItem MI1 = new MenuItem();
                MI1.ID = "miSales";
                MI1.Text = "Sales";
                MI1.Icon = Ext.Net.Icon.ChartBar;
    
                menuPanel1.Menu.Items.Add(MI);
                menuPanel1.Menu.Items.Add(MI1);
               
                acc.Items.Add(menuPanel1);
                
                con.Add(acc);
    
                response.Script = con.ToScript(Ext.Net.RenderMode.AddTo, containerId);
                return response;
    }
  9. #9
    Hi,

    I see that your question differs from the thread's, I mean that you don't render a Toolbar.

    Please start a new thread.

Similar Threads

  1. Replies: 0
    Last Post: Apr 07, 2011, 8:48 PM
  2. Replies: 1
    Last Post: Mar 07, 2011, 9:39 AM
  3. [CLOSED] [1.0] Issue adding Ext.Net Toolbar dynamically
    By r_honey in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 02, 2010, 10:06 AM
  4. [CLOSED] Buid TreeGrid in Direct Event
    By sharif in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 14, 2010, 6:38 PM
  5. Dynamically bind Toolbar items on Combo change
    By shankar in forum 1.x Help
    Replies: 2
    Last Post: Jul 07, 2010, 3:35 PM

Tags for this Thread

Posting Permissions