How to resize ext.net container with border layout on browser window resize

Question

Below is the markup i am using to render an EXT.NET container containing a collapsible panel(west) and another panel containing my content (center).

how do i make it resizable when i resize my browser?

currently its not resizing as i specified width and height and if i do not specify Width and Height, it does not show me anything, it shows blank.

    @Html.X().Container().Layout(LayoutType.Border).Width(500).Height(300).Items(
    Html.X().Panel()
                     .ID("Panel1")
                     .Region(Region.West)
                     .AutoDoLayout(true)
                     .Collapsible(true).Border(true).Title("West Panel").Items(
                     Html.X().Label().Text("Item 1"),
                     Html.X().Label().Text("Item 2")
                     ),
    Html.X().Panel().ID("Panel2").Region(Region.Center).Title("Center")
)

EDIT : I Cannot use ViewPort as its distracting my layout

sakir sakir · Accepted Answer · 2015-07-03T14:08:05

I am not ure container support this but viewport. Use instead of the container an viewport

@Html.X().Viewport().Layout(LayoutType.Border).Items(
        Html.X().Panel()
        .ID("Panel1")
                     .Region(Region.West)
                     .AutoDoLayout(true)
                     .Collapsible(true).Border(true).Title("West Panel").Items(
                     Html.X().Label().Text("Item 1"),
                     Html.X().Label().Text("Item 2")
                     ),
        Html.X().Panel().ID("Panel2").Region(Region.Center).Title("Center")
)

another solution I can imagine ,to get the resize event and set the width and height of container with the appropriate values

How to resize ext.net container with border layout on browser window resize

1 Answers