ViewPort with Panel Chart and Scroll-Bar only in IE?

[Bubu]

Hi guys,

This is funny: I use version Ext.Net 2.1, developed a simple Report containing a Chart. I set the Height in the code behind depending on the amount of records returned. The vertical scroll-bar appears in IE9 but not in Chrome, FireFox or Safari.

Any hints?

Thanks,

Frank

<form id="formReport" runat="server">
    <ext:ResourceManager runat="server" />

    <ext:ChartTheme runat="server" ThemeName="White">
        <Axis Stroke="rgb(8,69,148)" StrokeWidth="1" />
        <AxisLabel Fill="rgb(8,69,148)" Font="12px Arial" FontFamily="Arial" />
        <AxisTitle Font="bold 18px Arial" />
    </ext:ChartTheme>

    <ext:Viewport ID="ViewportControl" runat="server" Layout="FitLayout" AutoScroll="true">
        <Items>
            <ext:Panel
                runat="server"
                ID="PanelControl"
                Title="Spendings by Person"
                Layout="FitLayout">
                <TopBar>
                    <ext:Toolbar runat="server" ID="ToolbarControl">
                        <Items>
                            <ext:DateField
                                ID="FromDateField"
                                runat="server"
                                FieldLabel="From"
                                LabelWidth="30"
                                Width="128"
                                Vtype="daterange"
                                EndDateField="ToDateField"
                                EnableKeyEvents="true"
                                Format="dd/MM/yyyy">
                                <Listeners>
                                    <KeyUp Fn="onKeyUp" />
                                </Listeners>
                            </ext:DateField>
                            <ext:DateField
                                ID="ToDateField"
                                runat="server"
                                Vtype="daterange"
                                FieldLabel="To"
                                LabelWidth="18"
                                Width="116"
                                StartDateField="FromDateField"
                                EnableKeyEvents="true"
                                Format="dd/MM/yyyy">
                                <Listeners>
                                    <KeyUp Fn="onKeyUp" />
                                </Listeners>
                            </ext:DateField>
                            <ext:Button
                                runat="server"
                                Text="Reload Data"
                                Icon="ArrowRefresh"
                                OnDirectClick="ReloadData" />
                            <ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server" />
                            <ext:Button ID="MenuButton" runat="server" Text="Sort by">
                                <Menu>
                                    <ext:Menu ID="SortMenu" runat="server">
                                        <Items>
                                            <ext:CheckMenuItem ID="SortMenuSurnameAsc" runat="server" Text="Surname Ascending" Checked="true" Group="sorting" CheckHandler="onItemCheck" />
                                            <ext:CheckMenuItem ID="SortMenuSurnameDesc" runat="server" Text="Surname Descending" Group="sorting" CheckHandler="onItemCheck" />
                                            <ext:CheckMenuItem ID="SortMenuSpendingAsc" runat="server" Text="Spending Ascending" Group="sorting" CheckHandler="onItemCheck" />
                                            <ext:CheckMenuItem ID="SortMenuSpendingDesc" runat="server" Text="Spending Descending" Group="sorting" CheckHandler="onItemCheck" />
                                        </Items>
                                    </ext:Menu>
                                </Menu>
                            </ext:Button>
                            <ext:ToolbarSeparator ID="ToolbarSeparator2" runat="server" />
                            <ext:Button
                                runat="server"
                                Text="Save Chart"
                                Icon="Disk"
                                Handler="saveChart" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:Chart
                        ID="ChartControl"
                        runat="server"
                        Shadow="true"
                        Theme="White"
                        Animate="true">
                        <Store>
                            <ext:Store
                                runat="server"
                                AutoDataBind="false">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Name" />
                                            <ext:ModelField Name="Spending" />
                                            <ext:ModelField Name="SortColumn1" />
                                            <ext:ModelField Name="SortColumn2" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                                <Sorters>
                                    <ext:DataSorter Property="SortColumn1" Direction="DESC" />
                                </Sorters>
                            </ext:Store>
                        </Store>

                        <Background>
                            <Gradient GradientID="backgroundGradient" Angle="45">
                                <Stops>
                                    <ext:GradientStop Offset="0" Color="#ffffff" />
                                    <ext:GradientStop Offset="100" Color="#eaf1f8" />
                                </Stops>
                            </Gradient>
                        </Background>

                        <Axes>
                            <ext:NumericAxis
                                Fields="Spending"
                                Position="Bottom"
                                Grid="true"
                                Title="Australian Dollar"
                                Minimum="0">
                                <Label>
                                    <Renderer Handler="return Ext.util.Format.number(value, '0,0');" />
                                </Label>
                            </ext:NumericAxis>

                            <ext:CategoryAxis
                                Fields="Name"
                                Position="Left"
                                Title="Spendings by Person" />
                        </Axes>

                        <Series>
                            <ext:BarSeries
                                Axis="Bottom"
                                Highlight="true"
                                XField="Name"
                                YField="Spending">
                                <Tips TrackMouse="true" Width="240" Height="25">
                                    <Renderer Handler="this.setTitle(storeItem.get('Name') + ': $' + storeItem.get('Spending') );" />
                                </Tips>
                                <Label
                                    Display="InsideEnd"
                                    Field="Spending"
                                    Orientation="Horizontal"
                                    Color="#333"
                                    TextAnchor="middle" />
                            </ext:BarSeries>
                        </Series>
                    </ext:Chart>
                </Items>
            </ext:Panel>

        </Items>
    </ext:Viewport>

    </form>

In The Page_Load event:

        If Not IsPostBack Then
             With ChartControl
                '  .Height = ToolbarControl.Height.Value + 20 + (retVal.Rows.Count * ChartLineHight_)
                .Height = 80 + 20 + (retVal.Rows.Count * ChartLineHight_)
                ViewportControl.Height = .Height.Value 'MinHeight does the trick
                ViewportControl.MinHeight = .Height.Value 'MinHeight does the trick

                .GetStore().DataSource = retVal
                .GetStore().DataBind()
            End With
    End If

[Bubu]

No idea, guys?

[Vladimir]

ViewPort doesn't support custom height, it always occupies whole page
- Remove AutoScroll for viewport
- Remove 'Layout="FitLayout"' for PanelControl panel
- Set AutoScroll for PanelControl
- Set height for chart instead viewport

[Bubu]

Thank you very much Vladimir!

It seems to work now. The only thing I needed to add was a manual AutoSize (if Chart is too small, fit it to the actual window height + adjust the width to the browser window).

Regarding to this chart, I have at least two questions left:
- Is there a better way of making the chart fit? (esp. are these "-2" the border width with 2x 1px? Furthermore I haven't really found a method to figure out, if a vertical scroll-bar is displayed or not)
- IE9 is damned slow (I already put the PageSize in but didn't help very much). Are there more tricks around to speed up that bugger? I know, it's the JS engine of the IE... but anyway...

Here's my code, if someone is interested in:

1. head section

<ext:XScript ID="XScript1" runat="server">
	<script type="text/javascript" language="javascript">
		var resizeChart = function()
		{
			if(#{ChartControl}.getHeight() < #{PanelControl}.getHeight()) 
			{ 
				#{ChartControl}.setWidth(#{PanelControl}.getWidth()-2); 
				
				#{ChartControl}.setHeight(
							#{PanelControl}.getHeight() 
							- #{ToolbarControl}.getHeight()
							- #{PanelControl_header}.getHeight()
							- 2); 
			} 
			else 
			{ 
				#{ChartControl}.setWidth(#{PanelControl}.getWidth() - 20); 
			}
		}
	</script>
</ext:XScript>

2. aspx page

<ext:Viewport ID="ViewportControl" runat="server" Layout="FitLayout">
	<Listeners>
		<Resize Handler="resizeChart();" Delay="2" />
	</Listeners>
	<Items>
		<ext:Panel
			runat="server"
			ID="PanelControl"
			Title="Spendings by Person"
			AutoScroll="true">
			<%-- ... here comes all the other stuff ...--%>
		</ext:Panel>
	</Items>
</ext:Viewport>

3. Code Behind

With ChartControl
	With .GetStore()
		.Buffered = True
		.PageSize = retVal.Count
	End With
	
	.Height = ToolbarControl.Height.Value + 20 + (retVal.Rows.Count * ChartLineHeight_)

	.GetStore().DataSource = retVal
	.GetStore().DataBind()
	
	Ext.Net.X.Js.Call("resizeChart")
End With

Regrads,

Frank