AutoScroll doesn't work anymore

  1. #1

    AutoScroll doesn't work anymore

    Hi guys;
    I just upgrade to 1.0RC from 0.82, I realize that "AutoScroll" property of Form Panel doesn't work correctly. Did anyone solve this issue.
    I minimized the problem in TestPage.aspx, thanks for help.

    <%@ Master Language="VB" AutoEventWireup="false" CodeBehind="AppContentFrame.master.vb"
        Inherits="ApplicationBlocks.WebUI.AppContentFrame" %>
    
    <%@ 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">
        <meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />
        <meta http-equiv="Pragma" content="no-cache" />
        <meta http-equiv="Expires" content="-1" />
        <asp:ContentPlaceHolder ID="cphHeader" runat="server" />
    </head>
    <body>
        <ext:ResourceManager ID="ExtResourceManager" runat="server" HideInDesign="True" />
        <ext:Viewport runat="server" Layout="border" ID="masterViewPort">
            <Items>
                <ext:TreePanel Region="West" ID="siteMenu" runat="server" Icon="ChartOrganisation"
                    Title="Hızlı Menü" AutoScroll="true" Collapsed="False" HideParent="False" RootVisible="False"
                    BodyStyle="padding:5px" TitleCollapse="true" Width="210" SingleExpand="true"
                    Visible="false" Margins="3 0 3 3" Collapsible="true" CMargins="3 0 3 3" />
                <ext:Panel runat="server" Region="Center" Margins="3 3 3 3" Layout="Fit">
                    <Content>
                        <asp:ContentPlaceHolder ID="cphContentFrameBody" runat="server" />
                    </Content>
                    <BottomBar>
                        <ext:StatusBar ID="statusBar" runat="server">
                            <Items>
                                <ext:ToolbarSpacer />
                                <ext:ToolbarFill />
                                <ext:ToolbarTextItem ID="ttiEnvironment" runat="server" />
                                <ext:ToolbarSeparator />
                                <ext:ToolbarTextItem ID="ttiLoginUser" runat="server" />
                            </Items>
                        </ext:StatusBar>
                    </BottomBar>
                </ext:Panel>
            </Items>
        </ext:Viewport>
    </body>
    </html>
    And the content page

    <%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/AppContentFrame.Master"
        CodeBehind="TestPage.aspx.vb" Inherits="ApplicationBlocks.WebUI.TestPage" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="cphHeader" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="cphContentFrameBody" runat="server">
        <ext:FormPanel ID="formPanelContent" runat="server" MonitorValid="true" MonitorPoll="500"
            Border="false" BodyStyle="padding:10px;" AutoScroll="true" Title="Sample Title">
            <Content>
                <ext:FormLayout ID="flReportParameters" runat="server" LabelWidth="150">
                    <Anchors>
                        <ext:Anchor>
                            <ext:TextField runat="server" Cls="input-item" FieldLabel="demo 1" LabelCls="field-text"
                                AllowBlank="false" />
                        </ext:Anchor>
                        <ext:Anchor>
                            <ext:TextField ID="TextField1" runat="server" Cls="input-item" FieldLabel="demo 1"
                                LabelCls="field-text" AllowBlank="false" />
                        </ext:Anchor>
                        <ext:Anchor>
                            <ext:TextField ID="TextField2" runat="server" Cls="input-item" FieldLabel="demo 1"
                                LabelCls="field-text" AllowBlank="false" />
                        </ext:Anchor>
                        <ext:Anchor>
                            <ext:TextField ID="TextField3" runat="server" Cls="input-item" FieldLabel="demo 1"
                                LabelCls="field-text" AllowBlank="false" />
                        </ext:Anchor>
                        <ext:Anchor>
                            <ext:TextField ID="TextField4" runat="server" Cls="input-item" FieldLabel="demo 1"
                                LabelCls="field-text" AllowBlank="false" />
                        </ext:Anchor>
                    </Anchors>
                </ext:FormLayout>
            </Content>
        </ext:FormPanel>
    </asp:Content>
    Attached Thumbnails autoscroll.PNG  
  2. #2
    Hi,

    You have to wrap FormPanel by FitLayout control
    Vladimir Shcheglov
    Sr. Developer
  3. #3
    Quote Originally Posted by Vladimir View Post
    Hi,

    You have to wrap FormPanel by FitLayout control
    Thanks but it smells a bug, when i set to Layout="Fit" property for Form panel, i expect same result.
    Padding="10" or BodyStyle="padding:10px;" set only left and top padding, when scroll bar is seemed, padding is set to zero.
  4. #4
    Hi,

    It is not bug. FitLayout control requires because you place user control inside Content area. FitLayout control says us that FormPanel should be rendered as panel item (otherwise FormPanel will be rendered in the contentEl)
    Vladimir Shcheglov
    Sr. Developer
  5. #5
    I think composite controls dont effect the scrollbar area, i wrap the textfiled with a composite control, horizantal scrollbars doesn't seam properly. Look at the attachment please.

    <%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/AppContentFrame.Master"
        CodeBehind="TestPage.aspx.vb" Inherits="ApplicationBlocks.WebUI.TestPage" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="cphHeader" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="cphContentFrameBody" runat="server">
        <ext:FitLayout runat="server">
            <Items>
                <ext:FormPanel ID="formPanelContent" runat="server" MonitorValid="true" MonitorPoll="500"
                    Border="false" AutoScroll="true" Title="Sample Title" Padding="10">
                    <Content>
                        <ext:FormLayout ID="flReportParameters" runat="server" LabelWidth="150">
                            <Anchors>
                                <ext:Anchor>
                                    <ext:CompositeField ID="CompositeField1" runat="server">
                                        <Items>
                                            <ext:TextField runat="server" Cls="input-item" FieldLabel="demo 1" LabelCls="field-text"
                                                AllowBlank="false" />
                                        </Items>
                                    </ext:CompositeField>
                                </ext:Anchor>
                                <ext:Anchor>
                                    <ext:CompositeField ID="CompositeField2" runat="server">
                                        <Items>
                                            <ext:TextField ID="TextField1" runat="server" Cls="input-item" FieldLabel="demo 1" LabelCls="field-text"
                                                AllowBlank="false" />
                                        </Items>
                                    </ext:CompositeField>
                                </ext:Anchor>
                                <ext:Anchor>
                                    <ext:CompositeField ID="CompositeField3" runat="server">
                                        <Items>
                                            <ext:TextField ID="TextField2" runat="server" Cls="input-item" FieldLabel="demo 1" LabelCls="field-text"
                                                AllowBlank="false" />
                                        </Items>
                                    </ext:CompositeField>
                                </ext:Anchor>
                                <ext:Anchor>
                                    <ext:CompositeField ID="CompositeField4" runat="server">
                                        <Items>
                                            <ext:TextField ID="TextField3" runat="server" Cls="input-item" FieldLabel="demo 1" LabelCls="field-text"
                                                AllowBlank="false" />
                                        </Items>
                                    </ext:CompositeField>
                                </ext:Anchor>
                            </Anchors>
                        </ext:FormLayout>
                    </Content>
                </ext:FormPanel>
            </Items>
        </ext:FitLayout>
    </asp:Content>
    Attached Thumbnails composite.PNG  
  6. #6
    Hi,

    FormLayout doesn't support horizontal scrolling. Please decrease label width or increase container size or set Achor for CompositeField. What a sence to use only one field in the CompositeField?
    Vladimir Shcheglov
    Sr. Developer
  7. #7
    Hi Vladimir, i add one control to composite control because i summarize the code before it will be posted.
    I add an gridpanel, but when i resize the window or bind data to store, it couldn't be resize perfectly.
    Can you help for this, look at the screenshot please.

    <%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/AppContentFrame.Master"
        CodeBehind="TestPage.aspx.vb" Inherits="ApplicationBlocks.WebUI.TestPage" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="cphHeader" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="cphContentFrameBody" runat="server">
        <ext:Store ID="StoreMultiPolicy" runat="server">
            <Reader>
                <ext:JsonReader IDProperty="READER_ID">
                    <Fields>
                        <ext:RecordField Name="READER_ID" />
                        <ext:RecordField Name="SKA" />
                        <ext:RecordField Name="CARI_POL_NO" />
                        <ext:RecordField Name="ZEYL_SIRA_NO" />
                        <ext:RecordField Name="TARIFE_KOD" />
                        <ext:RecordField Name="TANZIM_TARIH" Type="Date" />
                        <ext:RecordField Name="TP" />
                        <ext:RecordField Name="PSIT_FULL_NAME" />
                    </Fields>
                </ext:JsonReader>
            </Reader>
        </ext:Store>
        <ext:FitLayout runat="server">
            <Items>
                <ext:FormPanel ID="formPanelContent" runat="server" MonitorValid="true" MonitorPoll="500"
                    Border="false" AutoScroll="true" Title="Sample Title" Padding="10">
                    <Content>
                        <ext:FormLayout ID="flReportParameters" runat="server" LabelWidth="150">
                            <Anchors>
                                <ext:Anchor>
                                    <ext:GridPanel ID="gpMultiPolicy" runat="server" StoreID="StoreMultiPolicy" StripeRows="true"
                                        Cls="grid-panel" AutoHeight="true" AutoExpandColumn="PSIT_FULL_NAME" Anchor="True">
                                        <ColumnModel ID="ColumnModel1" runat="server">
                                            <Columns>
                                                <ext:Column meta:resourcekey="clmPSIT_FULL_NAME" DataIndex="PSIT_FULL_NAME" />
                                            </Columns>
                                        </ColumnModel>
                                        <BottomBar>
                                            <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="10" StoreID="StoreMultiPolicy"
                                                DisplayInfo="false" />
                                        </BottomBar>
                                        <SelectionModel>
                                            <ext:CheckboxSelectionModel ID="ChkSMMultiPolicy" runat="server" />
                                        </SelectionModel>
                                    </ext:GridPanel>
                                </ext:Anchor>
                            </Anchors>
                        </ext:FormLayout>
                    </Content>
                </ext:FormPanel>
            </Items>
        </ext:FitLayout>
    </asp:Content>
    Attached Thumbnails before_resize.PNG   after_resize.PNG  

Similar Threads

  1. Replies: 4
    Last Post: Aug 08, 2012, 6:28 PM
  2. Replies: 3
    Last Post: Mar 11, 2011, 1:09 PM
  3. Replies: 0
    Last Post: Feb 14, 2011, 10:25 AM
  4. [1.0] Autoscroll not working anymore in Portal
    By AlexWight in forum 1.x Help
    Replies: 4
    Last Post: Apr 06, 2010, 12:11 PM
  5. GridPanel AutoScroll doesn't work when empty
    By dbassett74 in forum 1.x Help
    Replies: 2
    Last Post: May 24, 2009, 11:03 PM

Posting Permissions