[CLOSED] Toolbar throws a client side error

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1

    [CLOSED] Toolbar throws a client side error

    Hi,

    I'm trying to design a two-row toolbar using a combination of RowLayout and ColumnLayout controls. It's throwing a javascript error on initialization at line 15, column 389. Please suggest if anything's wrong with my setup and if you have any general recommendations on how to achieve the desired layout of my toolbar. The code sample is below.

    <%@ 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 id="Head1" runat="server">
        <title>Ext.NET Example</title>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server"></ext:ResourceManager>
            <ext:Viewport runat="server" Layout="FitLayout">
                <Items>
                    <ext:Panel runat="server">
                        <TopBar>
                            <ext:Toolbar runat="server">
                                <Items>
                                    <ext:RowLayout runat="server">
                                        <Rows>
                                            <ext:LayoutRow>
                                                <ext:ColumnLayout runat="server">
                                                    <Columns>
                                                        <ext:LayoutColumn ColumnWidth="0.25">
                                                            <ext:Button runat="server" Text="Row 1 Column 1"></ext:Button>
                                                        </ext:LayoutColumn>
                                                        <ext:LayoutColumn ColumnWidth="0.75">
                                                            <ext:Button runat="server" Text="Row 1 Column 2"></ext:Button>
                                                        </ext:LayoutColumn>
                                                        <ext:LayoutColumn>
                                                            <ext:Button runat="server" Text="Row 1 Column 3"></ext:Button>
                                                        </ext:LayoutColumn>
                                                    </Columns>
                                                </ext:ColumnLayout>
                                            </ext:LayoutRow>
                                            <ext:LayoutRow>
                                                <ext:ColumnLayout runat="server">
                                                    <Columns>
                                                        <ext:LayoutColumn>
                                                            <ext:Button runat="server" Text="Row 2 Column 1"></ext:Button>
                                                        </ext:LayoutColumn>
                                                        <ext:LayoutColumn>
                                                            <ext:Button runat="server" Text="Row 2 Column 2"></ext:Button>
                                                        </ext:LayoutColumn>
                                                    </Columns>
                                                </ext:ColumnLayout>
                                            </ext:LayoutRow>
                                        </Rows>
                                    </ext:RowLayout>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                    </ext:Panel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    Click image for larger version. 

Name:	Error.png 
Views:	168 
Size:	10.4 KB 
ID:	24637
    Last edited by fabricio.murta; Jun 16, 2016 at 4:56 AM.
  2. #2
    Hello @vadym.f! The toolbar does not work with the rowLayout component.

    I'd advice you to just add the toolbars to the panel as first items so they stick to the top, as there's no 'dock' setting back on version 1.

    In other words, write your panel like this:

    <ext:Panel runat="server">
        <Items>
            <ext:Toolbar runat="server">
                <Items>
                    <ext:Button runat="server" Text="Row 1 Column 1"></ext:Button>
                    <ext:ToolbarSeparator runat="server" />
                    <ext:Button runat="server" Text="Row 1 Column 2"></ext:Button>
                    <ext:ToolbarSeparator runat="server" />
                    <ext:Button runat="server" Text="Row 1 Column 3"></ext:Button>
                </Items>
            </ext:Toolbar>
            <ext:Toolbar runat="server">
                <Items>
                    <ext:Button runat="server" Text="Row 2 Column 1"></ext:Button>
                    <ext:ToolbarSeparator runat="server" />
                    <ext:Button runat="server" Text="Row 2 Column 2"></ext:Button>
                    <ext:ToolbarSeparator runat="server" />
                    <ext:Button runat="server" Text="Row 2 Column 3"></ext:Button>
                </Items>
            </ext:Toolbar>
        </Items>
    </ext:Panel>
    You may want to leave the first row in <topBar> but they are like to "look different" from each other.

    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thanks for your response @Fabricio!

    It's unfortunate Row and Column Layouts can't be used with a Toolbar control. I've been attempting to create a seamlessly looking toolbar with two rows of buttons. Using two toolbars instead of one would cause an unwanted color gradient seam visible between the two toolbars even with their borders hidden. I'm not sure I can stretch a toolbar vertically any other way though. Please feel free to close this thread down.
  4. #4
    Hello! Well, I am afraid that to achieve this behavior on Ext.NET v1 you'd have to hack a little into the toolbar component. We'll be marking the thread as closed for now then.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Client side error databinding Store
    By vadym.f in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Jul 19, 2013, 3:25 PM
  2. [CLOSED] SVN 4741 Trunk Open Window Client Side Error
    By Aurelio in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 16, 2013, 11:21 PM
  3. Replies: 1
    Last Post: Aug 23, 2012, 7:07 AM
  4. Replies: 1
    Last Post: Nov 18, 2011, 5:29 PM
  5. [CLOSED] Dynamic Store: undefined error at client side
    By digitek in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Nov 16, 2011, 10:17 AM

Tags for this Thread

Posting Permissions