[CLOSED] Nested Layout issue

[blueworld]

Hello.

I am refering back to this thread: http://forums.ext.net/showthread.php...ical-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.

[geoffrey.mcgill]

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...ation-Required

http://forums.ext.net/showthread.php...ing-New-Topics

[blueworld]

[Daniil]

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]

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]

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]

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

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/#!...ntainer.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:
https://examples2.ext.net

It can extremely decrease time that you spend on developing.

[blueworld]

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]

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]

Thank you Daniil, you can close this thread.