PDA

View Full Version : [CLOSED] Master Pages and ViewPort Control (v0.5 Beta / Preview)



stevenoc
May 26, 2008, 10:02 AM
Hiya folks,

First of I want to say kudos on a great control library.

How would I go about implementing the following:
Master Page:
a.) Two (2) Regions / Areas:
i.) North (For Navigation purposes)
ii.) South (For Child Content)

Child Page:
a.) Four (4) Regions / Areas (ala ViewPort):
i.) North
ii.) East
iii.) Center
iv.) West


Creating the the 2 regions on the master page was easy enough - just added 2 ext:Panels to the page




<%@ Master Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{

}
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Site.Master Page</title>
</head>
<body>
<form id="form1" runat="server">

<ext:ScriptManager ID="extScriptManager" runat="server" CleanResourceUrl="True" Theme="Gray" />
<ext:Panel ID="northPanel" runat="server" AutoHeight="True" Title="Site.Master North Panel" Header="True">
<Content>
</Content>
</ext:Panel>
<ext:Panel ID="southPanel" runat="server" AutoHeight="True" Title="Site.Master South Panel" Header="True">
<Content>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" />
</Content>
</ext:Panel>


</form>
</body>
</html>





For me, the trickey part came with the "child" page.
If I make use of the ext:ViewPort control, the Panels on the master page are not shown / displayed.





<%@ Page Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" Title="Default Page" %>

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{

}
</script>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<ext:ViewPort ID="ViewPort1" runat="server">
<Content>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<North Collapsible="True" Split="True">
<ext:Panel ID="Panel2" runat="server" Height="100" Title="North" />
</North>
<East Collapsible="true" Split="true">
<ext:Panel ID="Panel3" runat="server" Title="East" Width="175">
<Content>
<ext:FitLayout ID="FitLayout1" runat="server">
<ext:TabPanel ID="TabPanel1" runat="server" ActiveTab="0" Border="false" TabPosition="Bottom" Title="Title">
<Tabs>
<ext:Tab ID="Tab1" runat="server" Title="Tab 1" />
<ext:Tab ID="Tab2" runat="server" Title="Tab 2" />
</Tabs>
</ext:TabPanel>
</ext:FitLayout>
</Content>
</ext:Panel>
</East>
<West Collapsible="true" Split="true">
<ext:Panel ID="Panel5" runat="server" Title="West" Width="175">
<Content>
<ext:Accordion ID="Accordion1" runat="server" Animate="true">
<ext:Panel ID="Panel6" runat="server" Border="false" Collapsed="True" Icon="FolderGo" Title="Item 1" />
<ext:Panel ID="Panel7" runat="server" Border="false" Collapsed="true" Icon="FolderWrench" Title="Item 2" />
</ext:Accordion>
</Content>
</ext:Panel>
</West>
<Center>
<ext:Panel ID="Panel8" runat="server" Title="Center">
<Content>
<ext:FitLayout ID="FitLayout2" runat="server">
<ext:TabPanel ID="TabPanel2" runat="server" ActiveTab="0" Border="false" Title="Center">
<Tabs>
<ext:Tab ID="Tab3" runat="server" Closeable="true" Title="Tab 1" />
<ext:Tab ID="Tab4" runat="server" Title="Tab 2" />
</Tabs>
</ext:TabPanel>
</ext:FitLayout>
</Content>
</ext:Panel>
</Center>
</ext:BorderLayout>
</Content>
</ext:ViewPort>
</asp:Content>



Given the above, how would I attempt to create a viewport area (which does not make use of the entire webpage)?

Regards
Steven O'Connor

oskarni
Jun 12, 2008, 12:57 PM
Hi Oakley and all Coolite folks!

I'm trying to do something pretty similar to what you want. I got a little further but there is still a coouple of issues. Let me explain...

What I did was to place the viewport into the Master page with the two desired regions and inside the panel of the center region i placed the asp:ContentPlaceHolder. Finally I added an ext: Panel with an ext:BorderLayout Control inside right into the asp:Content of the Content Page. Th regions are there as desired but since there is no Layout control between the Master Page ext:Panel (the one that has the ContenPlaceHolder) and the Child Panel (the one in the content page), this last one has to be set to have a fixed size.

Here is the code for the master page:



<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="ViewPortMaster.master.cs" Inherits="Sandbox.ViewPortMaster" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager2" runat="server" Theme="Gray">
</ext:ScriptManager>

<ext:ViewPort ID="ViewPort1" runat="server">
<Content>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<North Collapsible="True" Split="false">
<ext:Panel runat="server" Height="100px" Title="North" Header="false">
</ext:Panel>
</North>
<Center>
<ext:Panel runat="server" Title="Center">
<Content>
<asp:ContentPlaceHolder ID="ContentPlaceHolderMain" runat="server"></asp:ContentPlaceHolder>
</Content>
</ext:Panel>
</Center>
</ext:BorderLayout>
</Content>
</ext:ViewPort>


</form>
</body>
</html>


and this is for the content page:




<%@ Page Language="C#" MasterPageFile="~/ViewPortMaster.Master" AutoEventWireup="true" CodeBehind="Dashboard.aspx.cs" Inherits="Sandbox.Dashboard" Title="Untitled Page" %>


<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolderMain" runat="server">
<ext:Panel ID="Panel5" runat="server" Title="Content" Width="800" Height="800">
<Content>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<West Collapsible="true" Split="true">
<ext:Panel ID="Panel1" runat="server" Title="West" Width="175">
<Content>
Wild wild west
</Content>
</ext:Panel>
</West>
<Center>
<ext:Panel ID="Panel2" runat="server" Title="Center">
<Content>
Down town
</Content>
</ext:Panel>
</Center>
<East Collapsible="true" Split="true">
<ext:Panel ID="Panel3" runat="server" Title="East" Width="175">
<Content>
East coast
</Content>
</ext:Panel>
</East>
<South Collapsible="true" Split="true">
<ext:Panel ID="Panel4" runat="server" Height="150" Title="South">
<Content>
Way down!
</Content>
</ext:Panel>
</South>
</ext:BorderLayout>
</Content>
</ext:Panel>
</asp:Content>



So. This solution shows you the regions but the inner regions are fixed and is kind of tricky... The other thing is that when you have a viewport in the master page you loose the design capabilities for the content page (Or at least I could not make it work)..

You are gonna ask: And why did'nt you tried to put a Fit layout in the master or the content page? Well, I tried but Layout containers cannot be placed inside of non-ext controls or to have non-ext controls inside...

Hey guys! Any ideas or suggestions?? I was working with 0.4.1 until yesterday and just got 0.5.1 so any help will be great!

Cheers!

stevenoc
Jun 19, 2008, 5:26 PM
Hi Oscar,

Have you tried removing the ViewPort control entirely from the master page.

I was able to get the effect that I wanted by solely making use of the BorderLayout (as per you example) in my child page.
My master page only contains the following:

Panel (NorthPanel)
ContentPlaceHolder

as to the design capabilities, I've just set them to a specific height (as my webpage has a min. window requirement to which I cater for).

Regards
Steven O'Connor

geoffrey.mcgill
Jun 19, 2008, 9:16 PM
Hey Guys,

In the next couple days I'm going to be doing some work with the Layout controls and try to enable functionality to allow for an <asp:ContentPlaceHolder> to be placed inside the <Content> region and have it's child (<asp:Content>) participate properly in the Layout lifecycle.

As stated above, currently you can not place <asp:ContentPlaceHolder> controls inside a Layout control, such as <ext:FitLayout>. Obviously that restriction is creating problems and is cerainly not ideal from my perspective.

My goal is to also enable Custom Web User Controls (.ascx) to pick up the same functionalilty.

I'll keep this thread updated with our progress.

oskarni
Jun 20, 2008, 10:40 AM
Hey guys!! Thank you very much for taking time to help me. As Steven states, using only the border layout and giving it fixed size works. Since my page size is supossed to be dinamyc, using the viewport would my better option, unfortunately I had to take it out of the master page because it won't work there.

Geoffrey, thanks for your help, it will be great if you succeed including those other controls into the layout lifeciclye as you stated.

In the meantime, there is anyway for me to tell a region or a panel to take as content element any of the client elements of my page? (for example a DIV or a Table) I think that could do the trick by now...

Once again thanks for your help!

geoffrey.mcgill
Jun 23, 2008, 9:46 AM
Hi all,

With the latest build (http://www.ext.net/download/) (0.5.3) you can now set a ContentPlaceHolder within a Panel (any Container control) and then in the <asp:Content> you can add your Layout.

For example, in your MasterPage you define a <ext:ViewPort> with a <Center> region. In the Center region you add a <ext:Panel> and within that Panel you add your <asp:ContentPlaceHolder>. Now in the child page which uses this MasterPage, you can now add a <ext:FitLayout>.

Example

Define the following in your ViewPort MasterPage.


<ext:BorderLayout runat="server">
<Center>
<ext:Panel runat="server" Title="Center">
<Content>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server" />
</Content>
</ext:Panel>
</Center>
</ext:BorderLayout>

Then in the child you can add the following.


<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<ext:FitLayout ID="FitLayout1" runat="server">
<ext:Panel ID="Panel1" runat="server" Title="Inner Panel" />
</ext:FitLayout>
</asp:Content>

Hope this helps.

oskarni
Jun 23, 2008, 10:21 AM
Thanks Geoffrey, that was faster than i thought! I will download it right away and give it a try. I will let you guys now the results asap.

Thanks for your quick responses and help

See ya!

Oscar

stevenoc
Jun 24, 2008, 3:38 AM
Hi Geoffrey,

Thanks for the update. Can't wait to download the new version and give it a bash :)

Regards
Steven O'Connor

Sreejith
Jan 12, 2009, 9:51 AM
Hi all

Am also using viewport control in master page.
I have one north region and their i want to put some menu vertical menu.
When i clicking the menu i want the corresponding pages in the center port.

Inside my center region i put one ASP content placeholder and when i clicking the menu in the north region i want the content in center region.

How can i navigate between north and center regions...

Regrds..

Vladimir
Jan 12, 2009, 11:04 AM
Hi,

Please see the following example, it has a similar functionality 
http://examples1.ext.net/#/TabPanel/Basic/Add_Tabs/

Sreejith
Jan 13, 2009, 6:31 AM
Thanks Vladsch

i got it.

Regrds

zeus
Oct 25, 2012, 12:08 PM