PDA

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



rusty
Oct 15, 2012, 7:26 PM
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>

Daniil
Oct 16, 2012, 2:08 PM
Hi @rusty,


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/#!/api/Ext.container.Viewport


The Viewport does not provide scrolling, so child Panels within the Viewport should provide for scrolling if needed using the autoScroll (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.container.Viewport-cfg-autoScroll) config.

rusty
Oct 16, 2012, 3:43 PM
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

Daniil
Oct 16, 2012, 5:30 PM
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/

rusty
Oct 16, 2012, 6:12 PM
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

Daniil
Oct 17, 2012, 4:55 AM
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/