Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: ASP.NET4.0
Controls>> HeaderControl.ascx
 

<%@ Control Language="C#" ClassName="HeaderControl" %>
<table style="width: 100%;" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 300px;">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Resources/images/logo.png" />
</td>
<td style="width: auto;">
 
<script type="text/javascript">
Ext.onReady(function(){
var tabs = new Ext.TabPanel({
renderTo: 'tabs1',
activeTab: 0,
width:400,
plain:true,
defaults:{autoHeight: true},
items:[
{contentEl:'script', title: 'Identify Regions'}
]
});
});
</script>
 
<div id="tabs1" class="contentToChange">
<div class="northRegion" style="position: absolute; top: 5px; right: 0%; z-index: 50000;">
</div>
<div id="script" class="x-hide-display" style="background-color: #000; text-align: center;
padding: 5px;">
<input type="button" value="North" class="northRegionButton" /><input type="button"
value="South" class="southRegionButton" /><input type="button" value="West" class="westRegionButton" /><input
type="button" value="Center" class="centerRegionButton" />
</div>
 
<script type="text/javascript">

//--------------------------------
// jQuery Code
//--------------------------------
$(document).ready(function(){
//--------------------------------
// Setup North Region
//--------------------------------
$("div.northRegion").hide();
$("div.northRegion").html(
"<div style='font-family: Tahoma; font-size: 11px; color: white; width: 800px; " +
"text-align: center;'><h1 style='font-family: Impact; font-size: 50px;'>North Region" +
"</h1>this is the Ext North Region"
);
//--------------------------------
// Events
//--------------------------------
// North Region
$("input.northRegionButton").click(function(){ $("div.northRegion").toggle("slow"); });
// South Region (pSouth - Global Ext Panel defined in MasterPage)
$("input.southRegionButton").click(function(){ (pSouth.collapsed) ? pSouth.expand() : pSouth.collapse() });
// West Region (pWest - Global Ext Panel defined in MasterPage)
$("input.westRegionButton").click(function(){ (pWest.collapsed) ? pWest.expand() : pWest.collapse() });
// Center Region
$("input.centerRegionButton").click(function(){
var $child = $("#center").children();
var $page0 = "/webportal/resources/jscript/<%= Resources.Settings.ExtVersion %>/examples/samples.html";
var $page1 = "/webportal/resources/jscript/<%= Resources.Settings.ExtVersion %>/examples/collapsed.html";
($child[0].src.toLowerCase().match($page1) != null) ? $child[0].src = $page0 : $child[0].src = $page1;
});
//--------------------------------
});

</script>
 
</div>
</td>
</tr>
</table>
 

Default.aspx
 
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" Title="Web Portal Homepage" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="ContentBody" runat="Server">
  <div id="center">
    <iframe id="frameSamples" src="Resources/jscript/<%= Resources.Settings.ExtVersion %>/examples/samples.html" marginwidth="0"
      marginheight="0" frameborder="0" scrolling="auto" width="100%"></iframe>
  </div>
</asp:Content>
 
MasterPage.master
 
<%@ Master Language="C#" %>
<%@ Register TagPrefix="WebPortal" TagName="Header" Src="~/Controls/HeaderControl.ascx" %>
<%@ Register TagPrefix="WebPortal" TagName="Nav1" Src="~/NavControl.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<script runat="server">
 
  string extVersion;
 
  protected void Page_Load(object sender, EventArgs e)
  {
    extVersion = Resources.Settings.ExtVersion;
    ExtAllCss.Href = "/webportal/resources/jscript/" + extVersion + "/resources/css/ext-all.css";
    ExtThemeCss.Href = "/webportal/resources/jscript/" + extVersion + "/resources/css/xtheme-slickness.css";
  }
 
</script>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>WebPortal Master Page</title>
 
  <script type="text/javascript" src="/webportal/resources/jscript/<%= extVersion %>/adapter/jquery/jquery.js"
    xml:space="preserve">
  //<![CDATA[JQUERY LIBRARY
  //]]>
  </script>
 
  <script type="text/javascript" src="/webportal/resources/jscript/<%= extVersion %>/adapter/jquery/ext-jquery-adapter.js"
    xml:space="preserve">
  //<![CDATA[EXT JQUERY LIBRARY
  //]]>
  </script>
 
  <script type="text/javascript" src="/webportal/resources/jscript/<%= extVersion %>/ext-all.js"
    xml:space="preserve">
  //<![CDATA[EXT FRAMEWORK
  //]]>
  </script>
 
  <link id="ExtAllCss" rel="stylesheet" type="text/css" runat="server" />
  <link id="ExtThemeCss" rel="stylesheet" type="text/css" runat="server" />
 
  <script type="text/javascript">
    Ext.BLANK_IMAGE_URL = "/webportal/resources/jscript/<%= extVersion %>/resources/images/default/s.gif";
  </script>
 
  <style type="text/css">
  html, body {
    font:normal 12px verdana;
    margin:0;
    padding:0;
    border:0 none;
    overflow:hidden;
    height:100%;
  }
  p {
    margin:5px;
  }
  .settings {
    background-image:url(/webportal/resources/jscript/<%= extVersion %>/examples/shared/icons/fam/folder_wrench.png);
  }
  .nav {
    background-image:url(/webportal/resources/jscript/<%= extVersion %>/examples/shared/icons/fam/folder_go.png);
  }
  </style>
 
  <script type="text/javascript">
    // Declare Global Panels
    var pSouth;
    var pWest;
    var pCenter
 
    Ext.onReady(function(){
      Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
          // DEFINE PANELS
          pSouth = new Ext.Panel ({
            region:'south',
            id: 'south-panel',
            contentEl: 'south',
            split:true,
            height: 100,
            minSize: 100,
            maxSize: 200,
            collapsible: true,
            hidden: false,
            title:'About Web Portal',
            margins:'0 0 0 0'
          });
          pWest = new Ext.Panel ({
            region:'west',
            id:'west-panel',
            title:'Navigation',
            split:true,
            width: 250,
            minSize: 175,
            maxSize: 400,
            collapsible: true,
            hidden: false,
            margins:'0 0 0 0',
            layout:'accordion',
            layoutConfig:{
              animate:true
            },
            items: [{
              contentEl: 'mainNavigation1',
              title:'Tree View',
              border:false,
              iconCls:'nav'
            },{
              contentEl: 'mainNavigation2',
              title:'Another Section',
              border:false,
              iconCls:'nav'
            }]
        });
        pCenter = new Ext.Panel ({
            region:'center',
            id:'center-panel',
            contentEl: 'center',
            margins:'0 0 0 0'
        });
        var viewport = new Ext.Viewport({
          layout:'border',
          items:[
            new Ext.BoxComponent({
              region:'north',
              el: 'north',
              id: 'north-panel',
              height:110,
              split: true,
              hidden: false
            }),
            pSouth,
            pWest,
            pCenter
          ]
        });
 
        // Init Panels
        pSouth.collapse (true);
 
    });
  </script>
 
  <link href="Resources/style/common.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <form id="form1" runat="server">
    <div id="north">
      <WebPortal:Header ID="Header" runat="server" />
    </div>
    <div id="mainNavigation1" style="padding-left: 5px; padding-top: 10px;">
      <WebPortal:Nav1 ID="Nav1" runat="server" />
    </div>
    <div id="mainNavigation2" style="padding-left: 5px; padding-top: 10px;">
      <p>
        Another section</p>
    </div>
    <asp:ContentPlaceHolder ID="ContentBody" runat="server">
    </asp:ContentPlaceHolder>
    <div id="south" class="south">
      <b>About</b>
      <p>
        WebPortal is a custom implementation of the Ext Framework.
      </p>
    </div>
 
    <script type="text/javascript">
     //<![CDATA[FIX FRAME HEIGHT
      $(document).ready(function(){
 
        document.getElementById("frameSamples").style.height = screen.availHeight - 250 + "px";
 
      });
      //]]>
    </script>
 
  </form>
</body>
</html>
 

NavControl.ascx
 

<%@ Control Language="C#" ClassName="NavControl" %>
 
<script runat="server">
 
protected void Page_Load(object sender, EventArgs e)
{
// NEED TO CATCH CLIENT EVENTS FOR YOUR TREEVIEW LINKS?
// string script = @"function treeNodeClick(mEvent)
// {
// var o;
// // Internet Explorer
// if (mEvent.srcElement)
// {
// o = mEvent.srcElement;
// }
// // Netscape and Firefox
// else if (mEvent.target)
// {
// o = mEvent.target;
// }
//
// arr = mEvent.srcElement.toString().split(',');
//
// nodeText = arr[1];
//
// if(o.tagName == 'A' || o.tagName == 'a')
// {
// if (nodeText.match('Picture Carousel') != null)
// {
// document.getElementById('frameSamples').src = '';
// }
// }
//
// return false;
//
// }";
 
// ScriptManager.RegisterClientScriptBlock(TreeView1, typeof(TreeView), "treeNodeClick", script, true);
 
// TreeView1.Attributes.Add("onclick", "return treeNodeClick(event)");
 
}

</script>
 
<asp:TreeView ID="TreeView1" runat="server" ImageSet="Simple" ShowLines="True">


<SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD" HorizontalPadding="0px"
VerticalPadding="0px" />

<asp:TreeNode Text="References" Value="References">
<asp:TreeNode NavigateUrl="http://extjs.com/deploy/dev/docs/" Target="_blank" Text="Ext API"
Value="Ext API">
<asp:TreeNode NavigateUrl="http://extjs.com/deploy/dev/examples/samples.html" Target="_blank"
Text="Ext Online Samples" Value="Ext Online Samples">
<asp:TreeNode NavigateUrl="http://docs.jquery.com/Main_Page" Target="_blank" Text="jQuery API"
Value="jQuery API">
<asp:TreeNode NavigateUrl="http://docs.jquery.com/Tutorials" Target="_blank" Text="jQuery Tutorial"
Value="jQuery Tutorial">

<asp:TreeNode Text="jQuery Examples" Value="Ext Examples" SelectAction="Expand">
<asp:TreeNode Text="Picture Carousel" Value="Picture Carousel" NavigateUrl="http://www.coswest.com/c/jquery/carousel3d/"
Target="_blank">

<asp:TreeNode Text="Ext Examples" Value="Ext Examples" SelectAction="Expand">
<asp:TreeNode NavigateUrl="~/Resources/jscript/ext-2.2/examples/desktop/desktop.html"
Target="_blank" Text="Desktop" Value="Desktop">
<asp:TreeNode NavigateUrl="http://www.coolite.com/" Target="_blank" Text="Coolite"
Value="Coolite">
<asp:TreeNode NavigateUrl="http://examples.coolite.com/" Target="_blank" Text="Coolite Examples"
Value="Coolite Examples">



NodeSpacing="0px" VerticalPadding="0px" />
Posted 1-Jun-12 23:24pm

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Common.css
 
body
{
  font-family: Verdana;
  font-size: 100%;
}
 
/*************
 * COMMON
 *************/
 
.extTab
{
  margin: 3px;
  padding: 3px;
}
 
/*************
 * REGIONS
 *************/
#north
{
  background-color: #000;
  background-image: url(/webportal/resources/images/gradient.jpg);
  background-repeat: no-repeat;
  background-position: right;
}
 
#south
{
  font-size: 11px;
  margin: 3px;
  padding: 3px;
}
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 368
1 Richard MacCutchan 240
2 OriginalGriff 230
3 Jared Sanow 145
4 Vinay Mistry 133
0 Sergey Alexandrovich Kryukov 5,955
1 OriginalGriff 4,805
2 CPallini 2,473
3 Abhinav S 1,507
4 Richard MacCutchan 1,437


Advertise | Privacy | Mobile
Web04 | 2.8.140814.1 | Last Updated 2 Jun 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100