PDA

View Full Version : [CLOSED] Scroll bar problem on a grid



feanor91
Apr 09, 2014, 3:26 PM
Hello

Please can you explain why I'm not able to have scroll bars for the grid2 element in this page?


<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server">
<Listeners>
<WindowResize Handler="Ext.net.Bus.publish('App.Desktop.ready');" Buffer="500" />
</Listeners>
</ext:ResourceManager>

<Window>
<ext:Window
runat="server"
Maximized="true"
CloseAction="Destroy"
ExpandOnShow="true"
Width="950"
Height="600"
Resizable="true"
TitleAlign="Center"
Title="window title">
<Items>
<ext:TabPanel runat="server" AutoScroll="true">
<Items>
<ext:Panel runat="server" Border="false" Layout="VBoxLayout" Title="Title 1">
<LayoutConfig>
<ext:VBoxLayoutConfig Pack="Start" Align="Stretch" />
</LayoutConfig>
<Items>
<ext:GridPanel
ID="grd1"
runat="server"
Cls="x-grid-custom"
AutoScroll="true"
ColumnLines="True"
AnchorVertical="100%">
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" DataIndex="a" MenuDisabled="True" Groupable="False" Hideable="False" Sortable="False" Width="80" Text="a">
</ext:Column>
<ext:Column runat="server" DataIndex="b" MenuDisabled="True" Groupable="False" Hideable="False" Sortable="False" Width="150" Text="b">
</ext:Column>
<ext:Column runat="server" DataIndex="c" MenuDisabled="True" Groupable="False" Hideable="False" Sortable="False" Width="150" Text="c">
</ext:Column>
<ext:Column runat="server" DataIndex="d" MenuDisabled="True" Groupable="False" Hideable="False" Sortable="False" Width="150" Text="d">
</ext:Column>
<ext:Column runat="server" DataIndex="e" MenuDisabled="True" Groupable="False" Hideable="False" Sortable="False" Width="150" Text="e">
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server">
</ext:RowSelectionModel>
</SelectionModel>
<View>
<ext:GridView runat="server">
</ext:GridView>
</View>
</ext:GridPanel>
<ext:GridPanel
ID="grd2"
runat="server"
Cls="x-grid-custom"
AutoScroll="true"
ColumnLines="True">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button Text="Text">
</ext:Button>
<ext:Button runat="server" Text="To Excel" Icon="PageExcel">
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" DataIndex="a" MenuDisabled="True" Groupable="False" Hideable="False" Sortable="False" Width="150" Text="a">
</ext:Column>
<ext:Column runat="server" DataIndex="b" MenuDisabled="True" Groupable="False" Hideable="False" Sortable="False" Width="200" Text="b">
</ext:Column>
<ext:Column runat="server" DataIndex="c" MenuDisabled="True" Groupable="False" Hideable="False" Sortable="False" Width="200" Text="c">
</ext:Column>
<ext:Column runat="server" DataIndex="d" MenuDisabled="True" Groupable="False" Hideable="False" Sortable="False" Width="200" Text="d">
</ext:Column>
<ext:Column runat="server" DataIndex="e" MenuDisabled="True" Groupable="False" Hideable="False" Sortable="False" Width="200" Text="e">
</ext:Column>
<ext:Column runat="server" DataIndex="f" MenuDisabled="True" Groupable="False" Hideable="False" Sortable="False" Width="200" Text="f">
</ext:Column>
<ext:Column runat="server" DataIndex="g" MenuDisabled="True" Groupable="False" Hideable="False" Sortable="False" Width="200" Text="g">
</ext:Column>
<ext:Column runat="server" DataIndex="h" MenuDisabled="True" Groupable="False" Hideable="False" Sortable="False" Width="200" Text="h">
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server">
</ext:RowSelectionModel>
</SelectionModel>
<View>
<ext:GridView runat="server">
</ext:GridView>
</View>
</ext:GridPanel>
</Items>
</ext:Panel>
<ext:Panel runat="server" Border="false" Layout="FitLayout" Title="Title 2">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Text" Disabled="false">
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
</Items>
</ext:TabPanel>
</Items>
</ext:Window>
</Window>


</form>
</body>
</html>

I try to set AutoScroll to true on each and every element but nothing works to scroll to h column

Daniil
Apr 09, 2014, 7:31 PM
Hi @feanor91,

Probably, you are talking about a vertical scrollbar.

To get a vertical scrollbar, the height of the container's content should exceed the height of that container itself. The same with horizontal scrollbar and width.

As far as I can see both the GridPanel has no height setting and the layout doesn't manage its height. So, for me it is expected that vertical scrollbar doesn't appear in that setup.

I don't know what to suggest, because I don't quite understand what the layout you need.

feanor91
Apr 09, 2014, 8:12 PM
Hi @feanor91,

Probably, you are talking about a vertical scrollbar.

To get a vertical scrollbar, the height of the container's content should exceed the height of that container itself. The same with horizontal scrollbar and width.

As far as I can see both the GridPanel has no height setting and the layout doesn't manage its height. So, for me it is expected that vertical scrollbar doesn't appear in that setup.

I don't know what to suggest, because I don't quite understand what the layout you need.

No need of a vertical scrolbar, I need the horizontal one on the second grid because data exeeds the width of their container (the tabpanel) and I don't manage to have one.

I think I have missed something in all the layouts, but what....?

Daniil
Apr 09, 2014, 11:01 PM
In your layout I would:

1. Set up Layout="FitLayout" for the Window.

2. Remove AutoScroll of the TabPanel.

3. Set up Height or Flex settings for GridPanel2 or for both the GridPanels. A horizontal scrollbar cannot appear with auto height.

feanor91
Apr 10, 2014, 8:19 AM
In your layout I would:

1. Set up Layout="FitLayout" for the Window.

2. Remove AutoScroll of the TabPanel.

3. Set up Height or Flex settings for GridPanel2 or for both the GridPanels. A horizontal scrollbar cannot appear with auto height.

It works thanks a lot