[CLOSED] AnchorVertical layout issue with FormPanel

  1. #1

    [CLOSED] AnchorVertical layout issue with FormPanel

    Hi,

    I need to set up a FormPanel with AnchorLayout. Different themes cause the bottom border of the GridPanel to float beyond visibility, perhaps due to the differences in UI elements dimensions. The example at http://examples.ext.net/#/Layout/Anc...hor_With_Form/ works fine but I can't get it to work properly when throwing a FormPanel container into the mix. Please suggest the right approach to fix the layout.

    <%@ 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 }
                };
            }
        }
    
        [DirectMethod]
        public void DataBind()
        {
            GridPanel1.Reconfigure();
            Store1.DataSource = TestData;
            Store1.DataBind();
        }
    
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                //this.ResourceManager1.Theme = Ext.Net.Theme.Default;
                this.ResourceManager1.Theme = Ext.Net.Theme.Neptune;
            }
        }
    </script>
    <!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 2.x</title>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
        <script type="text/javascript">
            var _iconSrc = null;
            var getIconSrc = function () {
                if (!_iconSrc)
                    _iconSrc = Ext.String.format("<img src='{0}' />", Ext.net.ResourceMgr.getIconUrl("Book"));
                return _iconSrc;
            };
    
            var recordIconRenderer = function (value, metadata, record) {
                return getIconSrc();
            };
    
            var showWindow = function () {
                var wnd = App.Window1;
                wnd.center();
                wnd.setVisible(true);
            };
    
            var onDocumentReady = function () {
                var win = App.Window1;
                win.on({
                    "show": {
                        fn: function () {
                            App.FormPanel1.setVisible(false);
                            X.DataBind({
                                eventMask: { showMask: true },
                                success: function (result) {
                                    App.FormPanel1.setVisible(true);
                                },
    
                                failure: function (errorMessage) {
                                }
                            });
                        },
                        scope: this,
                    }
                });
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" DirectMethodNamespace="X">
                <Listeners>
                    <DocumentReady Fn="onDocumentReady" />
                </Listeners>
            </ext:ResourceManager>
            <ext:Viewport runat="server" Layout="FitLayout">
                <Items>
                    <ext:Panel runat="server">
                        <BottomBar>
                            <ext:Toolbar runat="server">
                                <Items>
                                    <ext:Button ID="Button1" runat="server" Text="Show Window">
                                        <Listeners>
                                            <Click Fn="showWindow">
                                            </Click>
                                        </Listeners>
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </BottomBar>
                    </ext:Panel>
                </Items>
            </ext:Viewport>
            <ext:Window ID="Window1" runat="server" Icon="CogEdit" Title="Edit" Width="700" Height="500"
                Resizable="false" Collapsible="false" Hidden="true" Modal="true" Draggable="true" Layout="FitLayout">
                <Items>
                    <ext:FormPanel runat="server" ID="FormPanel1" TrackResetOnLoad="true" HideMode="Offsets"
                        Frame="false" Border="false" LabelWidth="120" Layout="AnchorLayout">
                        <Items>
                            <ext:FieldContainer runat="server" FieldLabel="Label Caption 1" LabelWidth="200" StyleSpec="padding-top:2px;padding-left:2px;" Height="30" AnchorHorizontal="100%">
                                <Items>
                                    <ext:DisplayField ID="DisplayField1" runat="server" Height="20">
                                    </ext:DisplayField>
                                </Items>
                            </ext:FieldContainer>
                            <ext:GridPanel ID="GridPanel1" runat="server" Flex="1" Border="true" BodyBorder="1" AnchorVertical="-36" AnchorHorizontal="100%">
                                <Store>
                                    <ext:Store ID="Store1" runat="server" RemoteSort="false"
                                        AutoLoad="true" PageSize="10">
                                        <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 runat="server" ID="IconColumn" MenuDisabled="true" Sortable="false" Resizable="false"
                                            Hideable="false" Width="26">
                                            <Renderer Fn="recordIconRenderer" />
                                        </ext:Column>
                                        <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 runat="server" Mode="Single" />
                                </SelectionModel>
                            </ext:GridPanel>
                        </Items>
                    </ext:FormPanel>
                </Items>
                <BottomBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:ToolbarFill>
                            </ext:ToolbarFill>
                            <ext:Button ID="ButtonCancel" runat="server" Text="Close" Icon="Cancel"
                                Width="80">
                                <Listeners>
                                    <Click Handler="App.Window1.hide();" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </BottomBar>
            </ext:Window>
        </form>
    </body>
    </html>
    Last edited by Daniil; Sep 22, 2015 at 3:59 PM. Reason: [CLOSED]
  2. #2
    Hi Vadym,

    It looks like setting AnchorVertical="-37" instead of -36 gets the border appeared. Isn't it a way to fix it?
  3. #3
    You're right, my AnchorVertical offset value was a bit off. Thankfully, AnchorLayout seems to behave uniformly across the themes. Please close this question.

Similar Threads

  1. [CLOSED] FormPanel Column Layout
    By speedstepmem4 in forum 2.x Premium Help
    Replies: 3
    Last Post: Jul 13, 2015, 4:03 PM
  2. Replies: 2
    Last Post: Oct 24, 2013, 12:53 PM
  3. Replies: 1
    Last Post: Mar 05, 2013, 1:32 PM
  4. Replies: 2
    Last Post: Jun 11, 2012, 3:40 PM
  5. formpanel looses layout!!!
    By Kamal in forum 1.x Help
    Replies: 2
    Last Post: Jan 07, 2010, 5:32 AM

Tags for this Thread

Posting Permissions