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

Answer 1

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