PDA

View Full Version : [CLOSED] Nested Layout issue



blueworld
Sep 27, 2012, 3:57 PM
Hello.

I am refering back to this thread: http://forums.ext.net/showthread.php?21223-CLOSED-Grid-inside-a-panel-does-not-show-vertical-scrollbar

For test reasons I had just this gridpanel in my west-panel of my BoderLayout. Setting the WestPanel layout to FitLayout results in getting vertical scrollbars for the grid, with other Layouts like HBoxLayoout I dont have vertical scroll bars.

Now the real situaton is a bit more complicated, I would need a HBoxLayout for my WestPanel because I need to dispay two panels in a row.

I have attached a picture of what I try to achieve, all three grids need vertical scrollbars.

Any idea on that ? FitLayout will not work here of course, but I really need vertical scrollbars.

4838

geoffrey.mcgill
Sep 27, 2012, 4:04 PM
Please post a simplified .aspx code sample demonstrating how you currently have the Components configured. Please see the tips for more information on posting in the forums.

http://forums.ext.net/showthread.php?10205-More-Information-Required

http://forums.ext.net/showthread.php?3440-Forum-Guidelines-For-Posting-New-Topics

blueworld
Oct 01, 2012, 7:51 AM

Daniil
Oct 01, 2012, 11:23 AM
Hi @blueworld,

One of main vertical scrolling conditions is: the combined height of all rows must exceed the GridPanel height.

Actually, your grids have no height. You don't set its Height and any Layout for the GridPanel's container which would manage its Height.

I think you should set

Flex="1"
for the Panels that are Items of the LeftPanel.

Also I would set

Layout="Fit"
for these Panels.

I am not 100% sure that it will cause vertical scrolling working, because I can check it since your code sample is, unfortunately, not runnable.

Maybe, some more changes will be required. But these ones I am talking about are definitely required.

Some more notes.

GridView has no AutoHeight property. You can remove it.

Also its AutoScroll property is true by default, so, you can omit this:

AutoScroll="true"

blueworld
Oct 01, 2012, 12:39 PM
Hi @blueworld,

One of main vertical scrolling conditions is: the combined height of all rows must exceed the GridPanel height.

Actually, your grids have no height. You don't set its Height and any Layout for the GridPanel's container which would manage its Height.

I think you should set

Flex="1"
for the Panels that are Items of the LeftPanel.

Also I would set

Layout="Fit"
for these Panels.

I am not 100% sure that it will cause vertical scrolling working, because I can check it since your code sample is, unfortunately, not runnable.

Maybe, some more changes will be required. But these ones I am talking about are definitely required.

Some more notes.

GridView has no AutoHeight property. You can remove it.

Also its AutoScroll property is true by default, so, you can omit this:

AutoScroll="true"

Hi Daniil,

I already have tried things like that in the past, unfortunately it did not work. If set the outer Panels in the LeftPanel to
Layout="Fit" and
Flex="1", all items to have 0 height, the only thing I can see right now is the header of the 2. grid.

If I remove
Flex="1" the items will be displayed at least, but the date_to picker is missing.

I will try to provide a running sample with filled grids.

blueworld
Oct 01, 2012, 2:38 PM
So here is a working code example:

Codebehind:


Private Class Car
Private _carName As String
Public Sub New(ByVal carName As String)
_carName = carName
End Sub
Public Property CarName() As String
Get
Return _carName
End Get
Set(ByVal value As String)
_carName = value
End Set
End Property
End Class

Private Class TourType
Private _tourType As String
Public Sub New(ByVal tourType As String)
_tourType = tourType
End Sub
Public Property TourType() As String
Get
Return _tourType
End Get
Set(ByVal value As String)
_tourType = value
End Set
End Property
End Class

Private Class TourResult
Private _tourId As String
Private _car As String
Private _tourDate As String


Public Sub New(ByVal tourId As String, ByVal car As String, ByVal tourDate As String)
_tourId = tourID
_car = car
_tourDate = tourDate

End Sub

Public Property TourId() As String
Get
Return _tourId
End Get
Set(ByVal value As String)
_tourId = value
End Set
End Property

Public Property Car() As String
Get
Return _car
End Get
Set(ByVal value As String)
_car = value
End Set
End Property

Public Property TourDate() As String
Get
Return _tourDate
End Get
Set(ByVal value As String)
_tourDate = value
End Set
End Property

End Class




Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If Not Me.IsPostBack Then
Dim tourTypeResult As New Generic.List(Of TourType)

For i = 0 To 10
tourTypeResult.Add(New TourType("type " + i.ToString()))
Next

Me.TypeStore.DataSource = tourTypeResult
Me.TypeStore.DataBind()

Dim vehicleResults As New Generic.List(Of Car)
For i = 0 To 10
vehicleResults.Add(New Car("car " + i.ToString()))
Next

Me.CarStore.DataSource = vehicleResults
Me.CarStore.DataBind()


DateField_DatumVon.SelectedDate = Date.Today.AddDays(-30)
DateField_DatumBis.SelectedDate = Date.Today
End If
End Sub

Protected Sub LoadResults(ByVal sender As Object, ByVal e As Ext.Net.DirectEventArgs)

Dim Results As New Generic.List(Of TourResult)

For i = 0 To 50
Results.Add(New TourResult(i.ToString(), "abc", "01.01.2012"))
Next

Me.ResultStore.DataSource = Results
Me.ResultStore.DataBind()

End Sub

Aspx



<form runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Store ID="ResultStore" runat="server">
<Model>
<ext:Model ID="Model3" runat="server">
<Fields>
<ext:ModelField Name="TourId" />
<ext:ModelField Name="Car" />
<ext:ModelField Name="TourDate" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout">
<LayoutConfig>
<ext:BorderLayoutConfig />
</LayoutConfig>
<Items>
<ext:Panel ID="WestBoarderLayoutPanel" runat="server" Region="West" Collapsible="true"
MarginsSummary="5 0 5 5" CMarginsSummary="5 5 5 5" Split="True">
<LayoutConfig>
<ext:HBoxLayoutConfig />
</LayoutConfig>
<Items>
<ext:Panel ID="LeftPanel" runat="server" MinWidth="180" Width="180" Title="Search"
Layout="VBoxLayout" CollapseDirection="Left" Collapsible="True" Frame="True">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Stretch" />
</LayoutConfig>
<Items>
<ext:Panel ID="SearchButtonPanel" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Search" Icon="Zoom" Width="180">
<DirectEvents>
<Click OnEvent="LoadResults">
</Click>
</DirectEvents>
</ext:Button>
</Items>
</ext:Panel>
<ext:Panel ID="DatepickerPanel" runat="server" Frame="true" Title="Date:"
Icon="Calendar">
<Items>
<ext:DateField ID="DateField_DatumVon" runat="server" FieldLabel="From" Vtype="daterange"
EndDateField="DateField_DatumBis" EnableKeyEvents="true" LabelWidth="50" Width="150">
</ext:DateField>
<ext:DateField ID="DateField_DatumBis" runat="server" Vtype="daterange" FieldLabel="To"
StartDateField="DateField_DatumVon" EnableKeyEvents="true" LabelWidth="50" Width="150">
</ext:DateField>
</Items>
</ext:Panel>
<ext:Panel runat="server" Frame="true" ID="SelectionGridsPanel">
<Items>
<ext:GridPanel ID="TypeGrid" runat="server" Title="Type" Icon="Bin" Flex="1">
<Store>
<ext:Store ID="TypeStore" runat="server">
<Model>
<ext:Model ID="Model2" runat="server" IDProperty="TourType">
<Fields>
<ext:ModelField Name="TourType" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="Column2" runat="server" Text="Tourtyp" DataIndex="TourType" Sortable="True"
Flex="1" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel runat="server" Mode="Multi">
</ext:CheckboxSelectionModel>
</SelectionModel>
</ext:GridPanel>
</Items>
</ext:Panel>
<ext:Panel runat="server" ID="CarPanel" Frame="true">
<Items>
<ext:GridPanel ID="CarGrid" runat="server" Title="Car" Icon="Lorry" Flex="1">
<Store>
<ext:Store ID="CarStore" runat="server">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="CarName">
<Fields>
<ext:ModelField Name="CarName" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column ID="Column1" runat="server" Text="Car" DataIndex="CarName" Sortable="True"
Flex="1" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" runat="server" Mode="Multi">
</ext:CheckboxSelectionModel>
</SelectionModel>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
<Plugins>
<ext:BoxReorderer ID="BoxReorderer1" runat="server" />
</Plugins>
</ext:Panel>
<ext:Panel ID="RightPanel" runat="server" CollapseDirection="Left" Collapsible="true"
AutoScroll="true" Region="East" Title="SearchResults" Layout="Fit">
<Items>
<ext:GridPanel ID="SearchResultPanel" runat="server" Icon="Report" StoreID="ResultStore"
MaxWidth="300">
<View>
<ext:GridView runat="server" AutoHeight="True" AutoScroll="true" />
</View>
<ColumnModel runat="server">
<Columns>
<ext:Column ID="Column3" runat="server" Text="Column 1" DataIndex="TourId" Sortable="True"
Width="50" Align="Center" />
<ext:Column ID="Column4" runat="server" Text="Column 2" DataIndex="Car" Sortable="True"
Align="Center">
</ext:Column>
<ext:Column ID="Column5" runat="server" Text="Column 3" DataIndex="TourDate" Sortable="True"
Align="Center" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single" />
</SelectionModel>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
<ext:Panel runat="server" Region="Center" ID="mapPanel" Collapsible="false" MarginsSummary="5 5 5 0">
<Content>
<div>
<b>Map will be displayed here</b>
</div>
</Content>
</ext:Panel>
</Items>
</ext:Viewport>
</form>



If you click on "Search", the grid in the right Panel will be filled with 50 records which definitely should create a scrollbar.
I have removed the flex and fitlayout conditions because it did not work.

The codebehind is written in vb.net

Daniil
Oct 01, 2012, 6:34 PM
Thank you for the sample.

By the way you can include it into ASPX wrapping in

<script runat="server">

Please see an example here.
Forum Guidelines For Posting New Topics (http://forums.ext.net/showthread.php?3440)

Regarding the problem.

Please apply the following changes.

1. Set explicit Width for the West region.

Width="500"

Either Width or Flex is required for any West region.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.layout.container.Border

2. Set

Align="Stretch" for the HBoxLayoutConfig or some explicit Height for the RightPanel. In a different way there is no height of the GridPanel. Generally, I told here about it:


One of main vertical scrolling conditions is: the combined height of all rows must exceed the GridPanel height.

Actually, your grids have no height. You don't set its Height and any Layout for the GridPanel's container which would manage its Height.


3. Set

Flex="1"
or some explicit Width for the RightPanel. HBoxLayout requires Flex or Width for its Items. to function well.

It would be worth for you to investigate the layout examples to avoid such issues in the future, the Layout folder here:
http://examples.ext.net (http://examples2.ext.net/)

It can extremely decrease time that you spend on developing.

blueworld
Oct 02, 2012, 8:24 AM
Hi Daniil,

thank you for your help. The right panel is working fine now.

I still have a problem with the two grids in the left Panel, they are not showing vertical scrollbars.

The Leftpanel has an explicit width so this cant be the problem.

I have tried to wrap another panel around these two grids with
<ext:VBoxLayoutConfig Align="Stretch"/>, still no scrollbars.


Edit:

I have removed the wrapper panel around these two grids and gave both GridPanels
Layout="Fit" Flex="1" and now they have vertical scrollbars.

Only remaining issue now: each of those two gridpanels now gets 50% of the remaining height, but of course one of these gridpanels could just have like two records, so there is unused white space now, I know that this happens because flex=1, but this was the only option that produced vertical scrollbars.

Daniil
Oct 02, 2012, 9:25 AM
I have removed the wrapper panel around these two grids and gave both GridPanels
Layout="Fit" Flex="1" and now they have vertical scrollbars.


I think you can remove

Layout="Fit"



Only remaining issue now: each of those two gridpanels now gets 50% of the remaining height, but of course one of these gridpanels could just have like two records, so there is unused white space now, I know that this happens because flex=1, but this was the only option that produced vertical scrollbars.

Well, as I mentioned before a GridPanel should have some height to get vertical scrolling.

In your case to save the space, I would try to manage height in a Store Load listener.

blueworld
Oct 02, 2012, 2:31 PM
Thank you Daniil, you can close this thread.