ExtJS and ASP.Net Part 3 – Border Layout and Master Page

In ExtJS and ASP.Net Part 2 – WCF communication we learned how to make ajax calls to an asp.net application, but the most beautiful thing about extjs framework is its richness of UI components and layout controls, which presents irresistible attractions for us developers who normally find it hard to deal with positioning of html based controls.

It is a big temptation to use their layout controls to save us from the hassles of brick laying, it would be wonderful that we can leave extjs to do most of the weight lifting of html layout (dealing with browser compatibilities and all), while we can focus on programming.

It is not any problem to render an extjs control like panel to a div in our aspx page, but trouble comes when you try to use layout controls especially to integrate with asp.net master pages.

In this blog I will share the secret of using layout controls together with master pages.

I started with two top most layout controls viewport and border layout panel. Unfortunate I have not found any way to use viewport in a master page, my understanding is viewport will take over control from ‘body’ level down which is not acceptable to a master page that normally assumes the absolute control of body and the form element. If anyone here knows how to use viewport on a master page, please leave a message here, it is very much appreciated.

It sounded easy to use a border layout panel, because it has a ‘renderTo’ field you can point to a div, then most likely you will get an extjs error like ‘htmlfile: Unknown runtime error’ when extjs starts to initialize dom objects. Fortunately I found a workaround which is do not put the layout panel within form. Here is an example :

Master page markup:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    </form>
    <div>
        <div style="height: 100px; background-color: Olive">
            Header Of Master page
        </div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
</body>
</html>

You can place a border layout panel within contentplaceholder1 like this

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
  <div id="div1">
        This is from default content page
    </div>
</asp:Content>

And with javascript:

  var layout = new Ext.Panel({
                layout: 'border',
                renderTo: 'div1',
                height: 600,
                items: [
               {
                   region: 'west',
                   split: true,
                   title: 'Some Infor',
                   width: 500,
                   minSize: 200,
                   collapsible: true,
                   collapseMode: 'mini',
                   html: 'west'
               },
               formPanel,
               eastPanel

            ]
            });

Tags:

This entry was posted on Wednesday, July 28th, 2010 at 3:40 am and is filed under ASP.NET, Javascript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “ExtJS and ASP.Net Part 3 – Border Layout and Master Page”

  1. ExtJS and ASP.Net Part 3 – Border Layout and Master Page…

    In ExtJS and ASP.Net Part 2 – WCF communication we learned how to make ajax calls to an asp.net application, but the most beautiful thing about extjs framework is its richness of UI components and layout controls, which presents irresistible attraction…

Leave a Reply

*