[CLOSED] When runing from the Server '08 R2 and the user switch TAB, my BottomBar shifts to the right on each TAB click.

  1. #1

    [CLOSED] When runing from the Server '08 R2 and the user switch TAB, my BottomBar shifts to the right on each TAB click.

    Running locally works fine, but when I access it from the Server '08 R2 through a client IE8 Browser, the BottomBar moves slightly to the right on each Tab click !!

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();
    
                var lines = new List<string>() { "Line 1", "Line 2", "Line 3", "Line 4" };
                int i = 1;
                foreach (var line in lines)
                {
                    /* NEW Tab */
                    var tabStripItem = new Tab
                    {
                        TabID = @"_" + i,
                        Text = line,
                        ToolTip = line
                    };
    
    
                    TabStrip1.Listeners.TabChange.Handler = "App.direct.LoadActiveTab(tab.id, tab.text);";
                    TabStrip1.Items.Add(tabStripItem);
                    i++;
                }
            }
        }
    
        [DirectMethod]
        public void LoadActiveTab(string id, string text)
        {
    
            var title = "ID #: " + id.Remove(0, 1);
            X.Msg.Notify(title, text).Show();
        }
    
        private object[] Data
        {
            get
            {
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
                };
            }
        }
    </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>Simple Array Grid - Ext.NET Examples</title>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:TabStrip ID="TabStrip1" runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" Title="Array Grid" Width="600" Height="175">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Model>
                        <ext:Model ID="Model1" runat="server">
                            <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" DateFormat="M/d hh:mmtt" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel>
                <Columns>
                    <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Flex="1" />
                    <ext:Column ID="Column2" runat="server" Text="Price" DataIndex="price">
                    </ext:Column>
                    <ext:Column ID="Column3" runat="server" Text="Change" DataIndex="change">
                    </ext:Column>
                    <ext:Column ID="Column4" runat="server" Text="Change" DataIndex="pctChange">
                    </ext:Column>
                    <ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" DataIndex="lastChange" />
                </Columns>
            </ColumnModel>
            <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
            </SelectionModel>
            <BottomBar>
                <ext:Toolbar ID="Toolbar1" runat="server" Layout="FitLayout">
                    <Items>
                        <ext:Container ID="Container1" runat="server">
                            <Content>
                                <table align="center">
                                    <tr>
                                        <td>
                                            <table border="0">
                                                <tr>
                                                    <td>
                                                        <b>Testing HTML</b>
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </Content>
                        </ext:Container>
                    </Items>
                </ext:Toolbar>
            </BottomBar>
        </ext:GridPanel>
    </body>
    </html>
    Last edited by Daniil; Jul 10, 2012 at 11:23 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Please clarify do you use the same PC to test locally and with the server?

    I have no "Server '08 R2" at the moment, any chance to look at the online sample?

    Please ensure the IE compatibility mode is switched off in both test cases.
  3. #3
    We have just discovered that you use the Toolbar with FitLayout. Generally, it is not good in the design aspect, the Toolbar expects to be used as a container for Ext.NET components, not for raw HTML.

    We would suggest you to use DockedItems.
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.AbstractPanel-cfg-dockedItems

    So, you can replace the BottomBar with:

    Example
    <DockedItems>
        <ext:Container runat="server" Dock="Bottom">
            <Content>
                <table align="center">
                    <tr>
                        <td>
                            <table border="0">
                                <tr>
                                    <td>
                                        <b>Testing HTML</b>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </Content>
        </ext:Container>
    </DockedItems>
    Is the issue reproducible with that change?
  4. #4
    Is the issue reproducible with that change?
    Answer: It works on the Server, seems like something else in my MAIN application is causing the issue.
    But this simple sample works...

    Let me do some research and get back to you. Don't close this ticket as yet. Thank you

    Quote Originally Posted by Daniil View Post
    We have just discovered that you use the Toolbar with FitLayout. Generally, it is not good in the design aspect, the Toolbar expects to be used as a container for Ext.NET components, not for raw HTML.

    We would suggest you to use DockedItems.
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.AbstractPanel-cfg-dockedItems

    So, you can replace the BottomBar with:

    Example
    <DockedItems>
        <ext:Container runat="server" Dock="Bottom">
            <Content>
                <table align="center">
                    <tr>
                        <td>
                            <table border="0">
                                <tr>
                                    <td>
                                        <b>Testing HTML</b>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </Content>
        </ext:Container>
    </DockedItems>
    Is the issue reproducible with that change?
    Last edited by Fahd; Jul 06, 2012 at 3:50 PM. Reason: Updated message, it works on the Server...
  5. #5
    Sure, we will wait.

    Just a note: client side UI doesn't depend on server. It depends on a client browser and, in some cases, might depend on OS.

    Please post a server response when you change a tab in your real application. Maybe, we could guess what might be wrong.
  6. #6

    Issue found and resolved...

    I have a design like below with more controls, but this is a simple version that shows how it looks.

    When I remove the Layout="Form" from Panel2
    it works fine on the Server. I'm not sure why this cause the issue.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.Data;
                this.Store1.DataBind();
    
                var lines = new List<string>() { "Line 1", "Line 2", "Line 3", "Line 4" };
                int i = 1;
                foreach (var line in lines)
                {
                    /* NEW Tab */
                    var tabStripItem = new Tab
                    {
                        TabID = @"_" + i,
                        Text = line,
                        ToolTip = line
                    };
    
    
                    TabStrip1.Listeners.TabChange.Handler = "App.direct.LoadActiveTab(tab.id, tab.text);";
                    TabStrip1.Items.Add(tabStripItem);
                    i++;
                }
            }
        }
    
        [DirectMethod]
        public void LoadActiveTab(string id, string text)
        {
    
            var title = "ID #: " + id.Remove(0, 1);
            X.Msg.Notify(title, text).Show();
        }
    
        private object[] Data
        {
            get
            {
                return new object[]
                {
                    new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
                    new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
                    new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
                    new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, "9/1 12:00am" }
                };
            }
        }
    </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>Simple Array Grid - Ext.NET Examples</title>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Panel ID="Panel1" runat="server" Layout="FitLayout" AutoScroll="false">
            <Items>
                <ext:Container ID="MainContainer" runat="server" Layout="Column" Height="510" AutoScroll="false"
                    AutoDoLayout="true">
                    <Items>
                        <ext:Container ID="Container1" runat="server" Width="463">
                            <Items>
                                <ext:Panel ID="Panel2" runat="server" Border="false" Layout="Form">
                                    <Items>
                                        <ext:TabStrip ID="TabStrip1" runat="server" EnableTabScroll="true" />
                                        <ext:GridPanel ID="GridPanel1" runat="server" Title="Array Grid" Width="600" Height="175">
                                            <Store>
                                                <ext:Store ID="Store1" runat="server">
                                                    <Model>
                                                        <ext:Model ID="Model1" runat="server">
                                                            <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" DateFormat="M/d hh:mmtt" />
                                                            </Fields>
                                                        </ext:Model>
                                                    </Model>
                                                </ext:Store>
                                            </Store>
                                            <ColumnModel>
                                                <Columns>
                                                    <ext:Column ID="Column1" runat="server" Text="Company" DataIndex="company" Flex="1" />
                                                    <ext:Column ID="Column2" runat="server" Text="Price" DataIndex="price">
                                                    </ext:Column>
                                                    <ext:Column ID="Column3" runat="server" Text="Change" DataIndex="change">
                                                    </ext:Column>
                                                    <ext:Column ID="Column4" runat="server" Text="Change" DataIndex="pctChange">
                                                    </ext:Column>
                                                    <ext:DateColumn ID="DateColumn1" runat="server" Text="Last Updated" DataIndex="lastChange" />
                                                </Columns>
                                            </ColumnModel>
                                            <SelectionModel>
                                                <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
                                            </SelectionModel>
                                            <DockedItems>
                                                <ext:Container ID="Container2" runat="server" Dock="Bottom">
                                                    <Content>
                                                        <table align="center">
                                                            <tr>
                                                                <td>
                                                                    <table border="0">
                                                                        <tr>
                                                                            <td>
                                                                                <b>Testing HTML</b>
                                                                            </td>
                                                                        </tr>
                                                                    </table>
                                                                </td>
                                                            </tr>
                                                        </table>
                                                    </Content>
                                                </ext:Container>
                                            </DockedItems>
                                        </ext:GridPanel>
                                    </Items>
                                </ext:Panel>
                            </Items>
                        </ext:Container>
                        <ext:Container ID="Container3" runat="server" ColumnWidth=".58">
                            <Items>
                                <ext:Label ID="Label1" runat="server" Text="Other form">
                                </ext:Label>
                            </Items>
                        </ext:Container>
                    </Items>
                </ext:Container>
            </Items>
        </ext:Panel>
    </body>
    </html>
    Quote Originally Posted by Daniil View Post
    Sure, we will wait.

    Just a note: client side UI doesn't depend on server. It depends on a client browser and, in some cases, might depend on OS.

    Please post a server response when you change a tab in your real application. Maybe, we could guess what might be wrong.
  7. #7
    I was able to reproduce the problem with IE7 and IE9 in compatibility mode only.

    Repeat myself, it doesn't depend on server.

    Regarding
    Layout="Form"
    The FormLayout should be used for Fields only.
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.layout.container.Form

    You could use the AnchorLayout if you wish.
    http://docs.sencha.com/ext-js/4-1/#!/api/Ext.layout.container.Anchor

Similar Threads

  1. [CLOSED] Problem when runing on IE9...
    By RCN in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Jul 08, 2012, 9:04 PM
  2. Replies: 2
    Last Post: Jul 21, 2011, 3:02 PM
  3. Replies: 5
    Last Post: Jan 19, 2011, 3:17 PM
  4. how to popup web user control wsing On click event..
    By Rakeshkumar.a in forum 1.x Help
    Replies: 2
    Last Post: Oct 22, 2010, 4:30 PM
  5. Runing Server Code On TreeNode Click
    By mightypirate in forum 1.x Help
    Replies: 6
    Last Post: Feb 20, 2009, 10:49 AM

Tags for this Thread

Posting Permissions