What's New?

[CLOSED] bottom section of page loads into the top section

  1. #1
    Dec 31, 2012, 6:15 PM

    [CLOSED] bottom section of page loads into the top section

    Hi,
    I have two sections on my page - top and bottom. I do not know why the bottom section loads first and loads into the top section. The second problem is that once the top section loads, the bottom section then gets pushed back to the bottom. Can you please let me know how to make the top section load first and the bottom section loads only in the bottom?

    Thanks in advance for your help.

    Below is my code in the aspx page:
    <%@ Page Language="C#" %>

<%@ Import Namespace="Ext.Net.Utilities" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Import Namespace="System.Linq" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Register src="~/UserControls/TestUserControl.ascx" tagname="TestUserControl" tagprefix="uc1" %>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
    <title>Bottom Section moved too far up when loading</title>
    
   </head>
<body>
    <form id="Form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
    <ext:ResourceManager ID="ResourceManager1" runat="server"  />
   <div>
    <ext:Viewport ID="Viewport1" runat="server" StyleSpec="background-color: #F2F2F2;">
        <Items>
   
            <ext:Panel ID="Panel3" runat="server" Flex="1" Region="Center" Width="1000" 
                Margin="2" Height="280">
              
                <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                            <ext:Label ID="Label1" runat="server" Html="Door Summary" StyleSpec="margin-left: 5px; font: 12px tahoma,arial,helvetica,sans-serif; font-weight: bold;" />
                            <ext:Button runat="server" ID="btnRefresh" Icon="ArrowRefresh" ToolTip="Refresh"
                                Text="Refresh" StyleSpec="margin-left: 20px; background-color:white;">
                                <Listeners>
                                    <Click Handler="location.reload(true);" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Content>
                    <uc1:TestUserControl ID="TestUserControl1" runat="server" />
                </Content>
            </ext:Panel>
        </Items>
    </ext:Viewport>
    </div>
     <div style="height: 240px; width: 1000px; overflow: scroll">
        <uc1:TestUserControl ID="TestUserControl2" runat="server" />
    </div>
     
    </form>
</body>
</html>
    Below is my code for TestUserControl:
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TestUserControl.ascx.cs"
    Inherits="Web.UserControls.TestUserControl" %>
<%@ Import Namespace="Ext.Net" %>
<script runat="server">
   
    [DirectMethod]
    public void UpdateTransDate(object value)
    {
        var UserSelectedDate = (DateTime)value;
    }
</script>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <br />
        <ext:DateField ID="dfTransDate" runat="server" Vtype="daterange" LabelAlign="Left"
            EmptyText="Trans Date" LabelWidth="75" FieldLabel="Trans Date" LabelStyle="text-align:center;"
            Width="170" Editable="false" StyleSpec="Padding-left:5px; Margin-top:2px; Background-color:transparent;">
            <Listeners>
                <Select Handler=" #{DirectMethods}.UpdateTransDate(value);" />
            </Listeners>
        </ext:DateField>
        <br />

    </ContentTemplate>
</asp:UpdatePanel>
    Last edited by Daniil; Jan 08, 2013 at 8:28 AM. Reason: [CLOSED]
  2. #2
    Jan 01, 2013, 8:43 AM
    Sorry, I don't understand the problem. What is it means "section loads"? What section (i guess you meant the user control) should load and from where?

    Also please note that you cannot place UI widgets outside viewport because viewport occupies whole screen. In your example just remove viewport
  3. #3
    Jan 02, 2013, 2:28 PM
    Sorry about the confusion. My page has two user controls. The top section is reffering to where the TestUsertControl1 is displaying on the screen. The bottom section is where TestUsertControl2 is displaying on the screen. When the page loads, the TestUsertControl2 always displays on the screen first and then TestUsertControl1 displays on the screen after that.

    I followed your suggestion and removed Viewport but the same issue still exist, no improvement.


    Quote Originally Posted by Vladimir View Post
    Sorry, I don't understand the problem. What is it means "section loads"? What section (i guess you meant the user control) should load and from where?

    Also please note that you cannot place UI widgets outside viewport because viewport occupies whole screen. In your example just remove viewport
  4. #4
    Jan 03, 2013, 3:19 PM
    Hi @Fahd,

    I guess the div with the second user control is rendered faster than the Panel with the first user control.

    You can try the following.

    1. Set up 
    id="div1" class="x-hidden"
    for the div with the second user control.

    2. Set up this listener
    <AfterRender Handler="Ext.get('div1').removeCls('x-hidden');" />
    for the Panel.

    Or you can use a Viewport with BorderLayout and place the second user control in the South region.
  5. #5
    Jan 04, 2013, 9:24 PM
    Where should I place 
    AfterRender Handler="Ext.get('div1').removeCls('x-hidden');" />
    in my code?

    I am going to try out using Viewport for both divs.


    Quote Originally Posted by Daniil View Post
    Hi @Fahd,

    I guess the div with the second user control is rendered faster than the Panel with the first user control.

    You can try the following.

    1. Set up 
    id="div1" class="x-hidden"
    for the div with the second user control.

    2. Set up this listener
    <AfterRender Handler="Ext.get('div1').removeCls('x-hidden');" />
    for the Panel.

    Or you can use a Viewport with BorderLayout and place the second user control in the South region.
  6. #6
    Jan 07, 2013, 11:14 AM
    Quote Originally Posted by Fahd View Post
    Where should I place 
    AfterRender Handler="Ext.get('div1').removeCls('x-hidden');" />
    in my code?
    To the Panel's Listeners.

    Example
    <ext:Panel ID="Panel3" runat="server">
    <Listeners>
        <AfterRender Handler="Ext.get('div1').removeCls('x-hidden');" />
    </Listeners>
</ext:Panel>
    Quote Originally Posted by Fahd View Post
    I am going to try out using Viewport for both divs.
    A Viewport must be a top level (just within a body or a form) and single control on the page.
  7. #7
    Jan 07, 2013, 7:11 PM
    Thank you for your help! This 
    <ext:Panel ID="Panel3" runat="server">
    <Listeners>
        <AfterRender Handler="Ext.get('div1').removeCls('x-hidden');" />
    </Listeners>
</ext:Panel>
    worked for me after I removed Viewport from my page.

    Quote Originally Posted by Daniil View Post
    To the Panel's Listeners.

    Example
    <ext:Panel ID="Panel3" runat="server">
    <Listeners>
        <AfterRender Handler="Ext.get('div1').removeCls('x-hidden');" />
    </Listeners>
</ext:Panel>


    A Viewport must be a top level (just within a body or a form) and single control on the page.

Similar Threads

  1. dynamically insert js function into head script section
    By tMp in forum 1.x Help
    Replies: 0
    Last Post: Nov 20, 2012, 2:40 PM
  2. [CLOSED] ParseControl with an Ext.Net layout section
    By sadaf in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 15, 2011, 9:31 AM
  3. [CLOSED] TextField next to a Button declared in Buttons section
    By jeybonnet in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 29, 2011, 7:31 AM
  4. Script includes in section
    By rcaunt in forum 1.x Help
    Replies: 0
    Last Post: Jun 03, 2009, 11:25 AM
  5. coolite config section
    By echo in forum 1.x Help
    Replies: 1
    Last Post: Dec 26, 2008, 7:47 AM

Posting Permissions