15 min read

(For more resources related to this topic, see here.)

Border layout

The Border layout is perhaps one of the more popular layouts. While quite complex at first glance, it is popular because it turns out to be quite flexible to design and to use. It offers common elements often seen in complex web applications, such as an area for header content, footer content, a main content area, plus areas to either side. All are separately scrollable and resizable if needed, among other benefits. In Ext speak, these areas are called Regions, and are given names of North, South, Center, East, and West regions.

Only the Center region is mandatory. It is also the one without any given dimensions; it will resize to fit the remaining area after all the other regions have been set. A West or East region must have a width defined, and North or South regions must have a height defined. These can be defined using the Width or Height property (in pixels) or using the Flex property which helps provide ratios.

Each region can be any Ext.NET component; a very common option is Panel or a subclass of Panel. There are limits, however: for example, a Window is intended to be floating so cannot be one of the regions. This offers a lot of flexibility and can help avoid nesting too many Panels in order to show other components such as GridPanels or TabPanels, for example.

Here is a screenshot showing a simple Border layout being applied to the entire page (that is, the viewport) using a 2-column style layout:

We have configured a Border layout with two regions; a West region and a Center region. The Border layout is applied to the whole page (this is an example of using it with Viewport. Here is the code:

<%@ Page Language="C#" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Border Layout Example</title>
</head>
<body>
<ext:ResourceManager runat="server" Theme="Gray" />
<ext:Viewport runat="server" Layout="border">
<Items>
<ext:Panel Region="West"
Split="true" Title="West" Width="200"
Collapsible="true" />
<ext:Panel Region="Center"
Title="Center content" />
</Items>
</ext:Viewport>
</body>
</html>

The code has a Viewport configured with a Border layout via the Layout property. Then, into the Items collection two Panels are added, for the West and Center regions.

The value of the Layout property is case insensitive and can take variations, such as Border, border, borderlayout, BorderLayout, and so on.

As regions of a Border layout we can also configure options such as whether you want split bars, whether Panels are collapsible, and more. Our example uses the following:

  • The West region Panel has been configured to be collapsible (using Collapsible=”true”). This creates a small button in the title area which, when clicked, will smoothly animate the collapse of that region (which can then be clicked again to open it).

  • When collapsed, the title area itself can also be clicked which will float the region into appearance, rather than permanently opening it (allowing the user to glimpse at the content and mouse away to close the region). This floating capability can be turned off by using Floatable=”false” on the Panel.

  • Split=”true” gives a split bar with a collapse button between the regions.

This next example shows a more complex Border layout where all regions are used:

The markup used for the previous is very similar to the first example, so we will only show the Viewport portion:

<ext:Viewport runat="server" Layout="border">
<Items>
<ext:Panel Region="North" Split="true" Title="North" Height="75"
Collapsible="true" />
<ext:Panel Region="West" Split="true" Title="West" Width="150"
Collapsible="true" />
<ext:Panel runat="server" Region="Center" Title="Center content"
/>
<ext:Panel Region="East" Split="true" Title="East" Width="150"
Collapsible="true" />
<ext:Panel Region="South" Split="true" Title="South" Height="75"
Collapsible="true" />
</Items>
</ext:Viewport>

Although each Panel has a title set via the Title property, it is optional. For example, you may want to omit the title from the North region if you want an application header or banner bar, where the title bar could be superfluous.

Different ways to create the same components

The previous examples were shown using the specific Layout=”Border” markup. However, there are a number of ways this can be marked up or written in code. For example,

  • You can code these entirely in markup as we have seen

  • You can create these entirely in code

  • You can use a mixture of markup and code to suit your needs

Here are some quick examples:

Border layout from code

This is the code version of the first two-panel Border layout example:

<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
var viewport = new Viewport
{
Layout = "border",
Items =
{
new Ext.Net.Panel
{
Region = Region.West,
Title = "West",
Width = 200,
Collapsible = true,
Split = true
},
new Ext.Net.Panel
{
Region = Region.Center,
Title = "Center content"
}
}
};
this.Form.Controls.Add(viewport);
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Border Layout Example</title>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" Theme="Gray" />
</form>
</body>
</html>

There are a number of things going on here worth mentioning:

  • The appropriate panels have been added to the Viewport’s Items collection

  • Finally, the Viewport is added to the page via the form’s Controls Collection

If you are used to programming with ASP.NET, you normally add a control to the Controls collection of an ASP.NET control. However, when Ext.NET controls add themselves to each other, it is usually done via the Items collection. This helps create a more optimal initialization script. This also means that only Ext.NET components participate in the layout logic. There is also the Content property in markup (or ContentControls property in code-behind) which can be used to add non-Ext.NET controls or raw HTML, though they will not take part in the layout. It is important to note that configuring Items and Content together should be avoided, especially if a layout is set on the parent container. This is because the parent container will only use the Items collection. Some layouts may hide the Content section altogether or have other undesired results. In general, use only one at a time, not both because the Viewport is the outer-most control; it is added to the Controls collection of the form itself.

Another important thing to bear in mind is that the Viewport must be the only top-level visible control. That means it cannot be placed inside a div, for example it must be added directly to the body or to the <form runat=”server”> only. In addition, there should not be any sibling controls (except floating widgets, like Window).

Mixing markup and code

The same 2-panel Border layout can also be mixed in various ways. For example:

<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.WestPanel.Title = "West";
this.WestPanel.Split = true;
this.WestPanel.Collapsible = true;
this.Viewport1.Items.Add(new Ext.Net.Panel
{
Region = Region.Center,
Title = "Center content"
});
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Border Layout Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Viewport ID="Viewport1" runat="server" Layout="Border">
<Items>
<ext:Panel ID="WestPanel" runat="server" Region="West"
Width="200" />
</Items>
</ext:Viewport>
</body>
</html>

In the previous example, the Viewport and the initial part of the West region have been defined in markup. The Center region Panel has been added via code and the rest of the West Panel’s properties have been set in code-behind. As with most ASP. NET controls, you can mix and match these as you need.

Loading layout items via User Controls

A powerful capability that Ext.NET provides is being able to load layout components from User Controls. This is achieved by using the UserControlLoader component. Consider this example:

<ext:Viewport runat="server" Layout="Border">
<Items>
<ext:UserControlLoader Path="WestPanel.ascx" />
<ext:Panel Region="Center" />
</Items>
</ext:Viewport>

In this code, we have replaced the West region Panel that was used in earlier examples with a UserControlLoader component and set the Path property to load a user control in the same directory as this page. That user control is very simple for our example:

<%@ Control Language="C#" %>
<ext:Panel runat="server" Region="West" Split="true" Title="West"
Width="200" Collapsible="true" />

In other words, we have simply moved our Panel from our earlier example into a user control and loaded that instead. Though a small example, this demonstrates some useful reuse capability.

Also note that although we used the UserControlLoader in this Border layout example, it can be used anywhere else as needed, as it is an Ext.NET component.

The containing component does not have to be a Viewport

Note also that the containing component does not have to be a Viewport. It can be any other appropriate container, such as another Panel or a Window. Let’s do just that:

<ext:Window runat="server" Layout="Border" Height="200" 
Width="400"
Border="false">
<Items>
<ext:Panel Region="West" Split="true" Title="West" Width="150"
Collapsible="true" />
<ext:Panel Region="Center" Title="Center content" />
</Items>
</ext:Window>

The container has changed from a Viewport to a Window (with dimensions). It will produce this:

More than one item with the same region

In previous versions of Ext JS and Ext.NET you could only have one component in a given region, for example, only one North region Panel, one West region Panel, and so on. New to Ext.NET 2 is the ability to have more than one item in the same region. This can be very flexible and improve performance slightly. This is because in the past if you wanted the appearance of say multiple West columns, you would need to create nested Border layouts (which is still an option of course). But now, you can simply add two components to a Border layout and give them the same region value.

Nested Border layouts are still possible in case the flexibility is needed (and helps make porting from an earlier version easier). First, here is an example using nested Border layouts to achieve three vertical columns:

<ext:Window runat="server" Layout="Border" Height="200" 
Width="400"
Border="false">
<Items>
<ext:Panel Region="West" Split="true" Title="West" Width="100"
Collapsible="true" />
<ext:Panel Region="Center" Layout="Border" Border="false">
<Items>
<ext:Panel Region="West" Split="true" Title="Inner West"
Width="100" Collapsible="true" />
<ext:Panel Region="Center" Title="Inner Center" />
</Items>
</ext:Panel>
</Items>
</ext:Window>

This code will produce the following output:

The previous code is only a slight variation of the example preceding it, but has a few notable changes:

  • The Center region Panel has itself been given the layout as Border. This means that although this is a Center region for the window that it is a part of, this Panel is itself another Border layout.

  • The nested Border layout then has two further Panels, an additional West region and an additional Center region.

  • Note, the Title has also been removed from the outer Center region so that when they are rendered, they line up to look like three Panels next to each other.

Here is the same example, but without using a nested border Panel and instead, just adding another West region Panel to the containing Window:

<ext:Window runat="server" Layout="Border" Height="200" 
Width="400"
Border="false">
<Items>
<ext:Panel Region="West" Split="true" Title="West" Width="100"
Collapsible="true" />
<ext:Panel Region="West" Split="true" Title="Inner West"
Width="100" Collapsible="true" />
<ext:Panel Region="Center" Title="Center content" Border="false"
/>
</Items>
</ext:Window>

Regions are not limited to Panels only

A common problem with layouts is to start off creating more deeply nested controls than needed and the example earlier shows that it is not always needed. Multiple items with the same region helps to prevent nesting Border Layouts unnecessarily. Another inefficiency typical with the Border layout usage is using too many containing Panels in each region. For example, there may be a Center region Panel which then contains a TabPanel. However, as TabPanel is a subclass of Panel it can be given a region directly, therefore avoiding an unnecessary Panel to contain the TabPanel:

<ext:Window runat="server" Layout="Border" Height="200" 
Width="400"
Border="False">
<Items>
<ext:Panel Region="West" Split="true" Title="West" Width="100"
Collapsible="True" />
<ext:TabPanel Region="Center">
<Items>
<ext:Panel Title="First Tab" />
<ext:Panel Title="Second Tab" />
</Items>
</ext:TabPanel>
</Items>
</ext:Window>

This code will produce the following output:

The differences with the nested Border layout example shown earlier are:

  • The outer Center region has been changed from Panel to TabPanel.

  • TabPanels manage their own items’ layout so Layout=”Border” is removed.

  • The TabPanel also has Border=”false” taken out (so it is true by default).

  • The inner Panels have had their regions, Split, and other border related attributes taken out. This is because they are not inside a nested Border layout now; they are tabs.

Other Panels, such as TreePanel or GridPanel, can also be used as we will see.

Something that can be fiddly from time to time is knowing which borders to take off and which ones to keep when you have nested layouts and controls like this. There is a logic to it, but sometimes a quick bit of trial and error can also help figure it out! As a programmer this sounds minor and unimportant, but usually you want to prevent the borders becoming too thick, as aesthetically it can be off-putting, whereas just the right amount of borders can help make the application look clean and professional. You can always give components a class via the Cls property and then in CSS you can fine tune the borders (and other styles of course) as you need.

Weighted regions

Another feature new to Ext.NET 2 is that regions can be given weighting to influence how they are rendered and spaced out. Prior versions would require nested Border layouts to achieve this. To see how this works, consider this example to put a South region only inside the Center Panel:

To achieve this output, if we used the old way—the nested Border layouts—we would do something like this:

<ext:Window runat="server" Layout="Border" Height="200" 
Width="400"
Border="false">
<Items>
<ext:Panel Region="West" Split="true" Title="West" Width="100"
Collapsible="true" />
<ext:Panel Region="Center" Layout="Border" Border="false">
<Items>
<ext:Panel Region="Center" Title="Center" />
<ext:Panel Region="South" Split="true" Title="South"
Height="100" Collapsible="true" />
</Items>
</ext:Panel>
</Items>
</ext:Window>

In the preceding code, we make the Center region itself be a Border layout with an inner Center region and a South region. This way the outer West region takes up all the space on the left. If the South region was part of the outer Border layout, then it would span across the entire bottom area of the window.

But the same effect can be achieved using weighting. This means you do not need nested Border layouts; the three Panels can all be items of the containing window, which means a few less objects being created on the client:

<ext:Window runat="server" Layout="Border" Height="200" 
Width="400"
Border="false">
<Items>
<ext:Panel Region="West" Split="true" Title="West" Width="100"
Collapsible="true" Weight="10" />
<ext:Panel Region="Center" Title="Center" />
<ext:Panel Region="South" Split="true" Title="South" Height="100"
Collapsible="true" />
</Items>
</ext:Window>

The way region weights work is that the region with the highest weight is assigned space from the border before other regions. If more than one region has the same weight as another, they are assigned space based on their position in the owner’s Items collection (that is first come, first served). In the preceding code, we set the Weight property to 10 to the West region only, so it is rendered first and, thus, takes up all the space it can before the other two are rendered. This allows for many flexible options and Ext.NET has an example where you can configure different values to see the effects of different weights:

http://examples.ext.net/#/Layout/BorderLayout/Regions_Weights/

As the previous examples show, there are many ways to define the layout, offering you more flexibility, especially if generating from code-behind in a very dynamic way.

Knowing that there are so many ways to define the layout, we can now speed up our look at many other types of layouts.

Summary

This article covered one of the numerous layout options available in Ext.NET, that is, the Border layout, to help you organize your web applications.

Resources for Article :

Further resources on this subject:

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here