[CLOSED] Viewport with AutoScroll=True, doesn't draw GridPanel properly after a scroll (Chrome & Firefox only?)

  1. #1

    [CLOSED] Viewport with AutoScroll=True, doesn't draw GridPanel properly after a scroll (Chrome & Firefox only?)

    Here are my steps:
    1. load the source code below, using Google Chrome
    2. Shrink the browser window vertically until a scroll bar appears.
    3. move the scroll bar around.

    Result: new content exposed by the scroll operation doesn't draw

    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net.MVC" TagPrefix="cc1" %>
    
    <!DOCTYPE html>
    <script runat="server">
        protected void Page_Load(Object sender, EventArgs e)
        {
            ToolbarTextItem1.Text = GetWelcomeString();
            if (!ExtNet.IsAjaxRequest)
            {
                Store.DataSource = DbData;
                Store.DataBind();
            }
        }
        
        protected string GetWelcomeString()
        {
            // for now, allow unauthenticated users...
            return "Welcome, " + (@User.Identity.IsAuthenticated ? @User.Identity.Name : "OrderManager");
        }
    
        private object[] DbData
        {
            get
            {
                return new object[]
                           {
                               new object[]
                                   {
                                       "1", "Munster", "Herman", "1313 Mockingbird Ln.", "", "Transylvania", "PA",
                                       "12345", "MRN", "Facility", "Ext12345", "Ext Fac", "Ext Prov",
                                       "Ext Item", "Ext MRN", "Ext Fac2", "Other MRN", "Order State", "Proc code", "Proc desc"
                                   },
                               new object[]
                                   {
                                       "2", "Franklin", "Benjamin", "123 Washington St.", "", "Richmond", "VA",
                                       "123456789", "MRNxyz", "Facilityxyz", "Ext12345xyz", "Ext Facxyz", "Ext Provxyz",
                                       "Ext Itemxyz", "Ext MRNxyz", "Ext Fac2xyz", "Other MRNxyz", "Order Statexyz", "Proc codexyz", "Proc descxyz"
                                   }
                           };
            }
        }
    
    </script>
    
    <html>
    <head id="Head1" runat="server">
        <title>Order Management</title>
        <cc1:MvcResourceManager ID="MvcResourceManager1" runat="server">
        </cc1:MvcResourceManager>
        <ext:Store ID="Store" runat="server" AutoLoad="true" PageSize="20" AutoDataBind="True" RemoteSort="True">
            <Model>
                <ext:Model ID="Model1" runat="server">
                    <Fields>
                        <ext:ModelField Name="MPI_ID" Type="Float"></ext:ModelField>
                        <ext:ModelField Name="LastName" Type="String"></ext:ModelField>
                        <ext:ModelField Name="FirstName" Type="String"></ext:ModelField>
                        <ext:ModelField Name="Address1" Type="String"></ext:ModelField>
                        <ext:ModelField Name="Address2" Type="String"></ext:ModelField>
                        <ext:ModelField Name="City" Type="String"></ext:ModelField>
                        <ext:ModelField Name="State" Type="String"></ext:ModelField>
                        <ext:ModelField Name="Zip" Type="String"></ext:ModelField>
                        <ext:ModelField Name="MRN" Type="String"></ext:ModelField>
                        <ext:ModelField Name="Facility" Type="String"></ext:ModelField>
                        <ext:ModelField Name="Ext_OrderNumber" Type="String"></ext:ModelField>
                        <ext:ModelField Name="Ext_Facility" Type="String"></ext:ModelField>
                        <ext:ModelField Name="Ext_Provider" Type="String"></ext:ModelField>
                        <ext:ModelField Name="Ext_Item" Type="String"></ext:ModelField>
                        <ext:ModelField Name="Ext_MRN" Type="String"></ext:ModelField>
                        <ext:ModelField Name="Ext_Facility2" Type="String"></ext:ModelField>
                        <ext:ModelField Name="OtherMRN" Type="String"></ext:ModelField>
                        <ext:ModelField Name="OrderState" Type="String"></ext:ModelField>
                        <ext:ModelField Name="OrderProcedureCode" Type="String"></ext:ModelField>
                        <ext:ModelField Name="OrderProcedureDescription" Type="String"></ext:ModelField>
                    </Fields>
                </ext:Model>
            </Model>
        </ext:Store>
    </head>
    
    <body>
        <ext:Viewport ID="Viewport1" runat="server" AutoScroll="True">
            <Items>
                <ext:Toolbar ID="Toolbar1" runat="server" Layout="hbox" >
                    <LayoutConfig>
                        <ext:HBoxLayoutConfig Pack="End" />
                    </LayoutConfig>
                    <Items>
                        <ext:ToolbarTextItem ID="ToolbarTextItem1" runat="server" />
                        <ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server" />
                        <ext:Button ID="helpBtn" runat="server" IconUrl="~/Content/images/help2_24x24_plain.png" ToolTip="Help" Scale="Medium"></ext:Button>
                        <ext:Button runat="server" ID="logoutBtn" IconUrl="~/Content/images/exit_24x24_plain.png" ToolTip="Logout" Scale="Medium">
                        </ext:Button>
                    </Items>
                </ext:Toolbar>
                <ext:Image ID="Image1" runat="server" ImageUrl="~/Content/images/CorepointHealth.png" Width="148" Height="36">
                </ext:Image>
                <ext:Label ID="Label1" runat="server">Corepoint Outreach Manager</ext:Label>
                
                 <ext:TabPanel ID="TabPanel1" runat="server" Padding="5">
                    <Items>
                        <ext:Panel ID="ordersPanel" runat="server" Title="Orders" Layout="accordion" Collapsible="True" Resizable="True">
                            <LayoutConfig ><ext:AccordionLayoutConfig Animate="True"/></LayoutConfig>
                            <Items>
                                <ext:GridPanel ColumnLines="True" Title="Work Order Queue" ID="orderList" runat="server" Selectable="True" Layout="hbox"
                                    MinHeight="475" StoreID="Store">
                                    <View>
                                        <ext:GridView ID="GridView" runat="server" EmptyText="There are no data records to display." DeferEmptyText="False"/>
                                    </View>
                                    <ColumnModel ID="ColumnModel" runat="server" >
                                        <Columns>
                                            <ext:Column ColumnID="MPI_ID" DataIndex="MPI_ID" Visible="False"></ext:Column>
                                            <ext:Column ColumnID="Ext_Provider" DataIndex="Ext_Provider" Header="Ordering Provider"  Flex="10"></ext:Column>
                                            <ext:Column ColumnID="Ext_Facility" DataIndex="Ext_Facility" Header="Site"  Flex="10"></ext:Column>
                                            <ext:TemplateColumn ID="PatientName" DataIndex="LastName" Text="Patient Name" Flex="20">
                                                <Template ID="Template1" >
                                                    <Html>
                                                        <tpl for=".">
                                                            {LastName}, {FirstName}
                                                        </tpl>
                                                    </Html>
                                                </Template>
                                            </ext:TemplateColumn>
                                            <ext:Column ColumnID="Ext_MRN" DataIndex="Ext_MRN" Header="Ordering MRN" Flex="10"></ext:Column>
                                            <ext:Column ColumnID="MRN" DataIndex="MRN" Header="Local MRN" Flex="10"></ext:Column>
                                            <ext:Column ColumnID="OtherMRN" DataIndex="OtherMRN" Header="Other MRN" Flex="10"></ext:Column>
                                            <ext:Column ColumnID="Ext_Item" DataIndex="Ext_Item" Header="Item" Flex="15"></ext:Column>
                                        </Columns>
                                    </ColumnModel>
                                    <SelectionModel>
                                        <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Multi" >
                                        </ext:RowSelectionModel>
                                    </SelectionModel>
                                    <TopBar>
                                        <ext:PagingToolbar ID="PagingToolbar" runat="server" PageSize="20"  >
                                        </ext:PagingToolbar>
                                    </TopBar>
                                </ext:GridPanel>
                                <ext:FormPanel ID="searchForm" runat="server" Title="Search Orders" Layout="column" MinHeight="240" DefaultButton="searchBtn" Frame="True">
                                    <Items>
                                        
                                        <ext:Container ID="Panel2" runat="server" ColumnWidth="0.5" MaxWidth="300" Padding="15">
                                            <Items>
                                                <ext:TextField ID="searchExt_MRN" runat="server" FieldLabel="Ordering MRN"/>
                                                <ext:TextField ID="searchFirstName" runat="server" FieldLabel="First Name"/>
                                                <ext:TextField ID="searchLastName" runat="server" FieldLabel="Last Name"/>
                                                <ext:DateField ID="searchDOB" runat="server" FieldLabel="Birth Date"/>
                                                <ext:DateField ID="searchOrderDateStart" runat="server" FieldLabel="Order Date Start"/>
                                                <ext:DateField ID="searchOrderDateEnd" runat="server" FieldLabel="Order Date End"/>
                                            </Items>
                                        </ext:Container>
                                        <ext:Container ID="Panel3" runat="server" ColumnWidth="0.5" MaxWidth="300" Padding="15">
                                            <Items>
                                                <ext:TextField ID="searchMRN" runat="server" FieldLabel="Local MRN"/>
                                                <ext:TextField ID="searchFacility" runat="server" FieldLabel="Facility"/>
                                                <ext:TextField ID="searchExt_Provider" runat="server" FieldLabel="Provider"/>
                                                <ext:TextField ID="searchExt_OrderNumber" runat="server" FieldLabel="Placer Order Number"/>
                                           </Items>
                                        </ext:Container>
                                    </Items>
                                    <BottomBar>
                                        <ext:Toolbar ID="Toolbar3" runat="server">
                                            <LayoutConfig>
                                                <ext:HBoxLayoutConfig Pack="End" />
                                            </LayoutConfig>
                                            <Items>
                                                <ext:Button ID="searchBtn" runat="server" Text="<b>Search</b>">
                                                </ext:Button>
                                            </Items>
                                        </ext:Toolbar>
                                    </BottomBar>
                                </ext:FormPanel>
                            </Items>
                        </ext:Panel>
                        <ext:Panel ID="reportsPanel" runat="server" Title="Reports">
                            <Items>
                            </Items>
                        </ext:Panel>
                        <ext:Panel ID="administrationPanel" runat="server" Title="Administration">
                            <Items>
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:TabPanel>
           </Items>
        </ext:Viewport>
    </body>
    </html>
    Last edited by Daniil; Oct 22, 2012 at 1:11 PM. Reason: [CLOSED]
  2. #2
    Hi @rusty,

    Quote Originally Posted by rusty View Post
    2. Shrink the browser window vertically until a scroll bar appears.
    A scrollbar doesn't appear at all for me. Am I missing something?

    Generally, Viewport autoScroll should not work according to ExtJS docs.

    Here is a quote from:
    http://docs.sencha.com/ext-js/4-1/#!...ainer.Viewport

    The Viewport does not provide scrolling, so child Panels within the Viewport should provide for scrolling if needed using the autoScroll config.
  3. #3
    OK, I see that now in the docs. Hmmm. I don't know why you can't see the scrollbar unless your version of Sencha/Ext.Net is different than mine. I haven't downloaded the very latest posted this week, but I think I was up to date prior to that.

    Anyway, my goals include: the GridPanel needs a minimum height, and I'd like for the width of the GridPanel to 'fit' the width of the browser window (no horizontal scrolling necessary). If the minimum height requirements can't be met, then a scrollbar would be appropriate. I've tried various locations for the AutoScroll="True" but none seem to give the result I'm looking for.

    Any suggestions?

    Thanks,
    Rusty
  4. #4
    I think you can just set Height for the GridPanel. If the combined height of all loaded rows exceeds the GridPanel height, then a vertical scrollbar automatically appears by default.

    unless your version of Sencha/Ext.Net is different than mine
    Please clarify what Ext.NET version do you use? We recommend to get the sources from the 2.1 branch.
    http://svn.ext.net/premium/branches/2.1/
  5. #5
    I just downloaded/built the sources from the 2.x trunk today. (http://svn.ext.net/premium/trunk/ ). Before that, I was using the 2.0 nuget installation.

    I tried setting Height, but that makes my GridPanel invisible. I'm using MinHeight, which seems to do the right thing (except for the scrollbar).

    Rusty
  6. #6
    Quote Originally Posted by rusty View Post
    I just downloaded/built the sources from the 2.x trunk today. (http://svn.ext.net/premium/trunk/ ). Before that, I was using the 2.0 nuget installation.
    Please update from the 2.1 branch.
    http://svn.ext.net/premium/branches/2.1/

Similar Threads

  1. Replies: 2
    Last Post: Oct 04, 2012, 10:14 AM
  2. [CLOSED] GridPanel doesn't auto scroll horizontally
    By gets_gui in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 19, 2012, 7:40 PM
  3. Gridpanel doesn't resize properly
    By gdog_5021 in forum 1.x Help
    Replies: 10
    Last Post: Aug 18, 2011, 2:45 PM
  4. Replies: 1
    Last Post: Jul 18, 2011, 8:40 AM
  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