如何使用Asp.Net创建simpe ExtJS应用程序 [英] How to create simpe ExtJS application using Asp.Net
问题描述
Controls>> HeaderControl.ascx
<％@控制语言="C#" ClassName ="HeaderControl"％>
< table style ="width:100％;" cellpadding ="0" cellspacing ="0">
< tr>
< td style ="width:300px;">
< asp:ImageButton ID ="ImageButton1" runat =服务器" 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，
宽度:400，
plain:true，
默认值:{autoHeight:true}，
项目:[
{contentEl:''script''，标题:识别区域"}
]
});
});
</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;
填充:5px；>
< input type ="button" value ="North" class ="northRegionButton"/>< input type ="button"
value ="South" class ="southRegionButton"/><输入type ="button" value ="West" class ="westRegionButton"/>< input
type ="button" value ="Center" class ="centerRegionButton"/>
</div>
< script type ="text/javascript">
//--------------------------------
//jQuery代码
//--------------------------------
$(document).ready(function(){
//--------------------------------
//设置北部地区
//--------------------------------
$("div.northRegion").hide();
$("div.northRegion").html(
< div style ="字体家族:Tahoma；字体大小:11像素；颜色:白色；宽度:800像素；"+
"text-align:center;">< h1 style =''字体家族:影响；字体大小:50像素；''>北部地区"+
</h1>这是极北地区"
);
//--------------------------------
//活动
//--------------------------------
//北部地区
$("input.northRegionButton").click(function(){$("div.northRegion").toggle("slow");});
//南部地区(pSouth-在MasterPage中定义的Global Ext Panel)
$("input.southRegionButton").click(function(){(pSouth.collapsed)?pSouth.expand():pSouth.collapse()});
//西部地区(pWest-在MasterPage中定义的Global Ext Panel)
$("input.westRegionButton").click(function(){(pWest.collapsed)?pWest.expand():pWest.collapse()});
//中心区域
$("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
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
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
<％@控制语言="C#" ClassName ="NavControl"％>
< script runat ="server">
受保护的void Page_Load(对象发送者，EventArgs e)
{
//是否需要捕捉您的TREEVIEW链接的客户事件?
//字符串脚本= @"function treeNodeClick(mEvent)
//{
//var o;
////Internet Explorer
//如果((mEvent.srcElement)
//{
//o = mEvent.srcElement;
//}
////Netscape和Firefox
//否则if(mEvent.target)
//{
//o = mEvent.target;
//}
//
//arr = mEvent.srcElement.toString().split(''，'');
//
//nodeText = arr [1];
//
//if(o.tagName ==``A''|| o.tagName ==``a'')
//{
//如果(nodeText.match(''Picture Carousel'')！= null)
//{
//document.getElementById(''frameSamples'').src ='''';
//}
//}
//
//返回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">
< parentnodestyle font-bold ="False">
< hovernodestyle font-underline ="True" forecolor =#5555DD">
< SelectedNodeStyle Font-Underline ="True" ForeColor =#5555DD" HorizontalPadding ="0px"
VerticalPadding ="0px"/>
< nodes>
< 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教程">
< asp:TreeNode Text ="jQuery范例" Value ="Ext范例" SelectAction ="Expand">
< asp:TreeNode Text ="Picture Carousel" Value ="Picture Carousel" NavigateUrl ="http://www.coswest.com/c/jquery/carousel3d/"
Target ="_ blank">
< asp:TreeNode Text ="Ext实例" Value ="Ext实例" 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范例">
< nodestyle字体名称="Tahoma" font-size ="10pt" forecolor ="Black" horizontalpadding ="0px">
NodeSpacing ="0px" VerticalPadding ="0px"/>
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">
<parentnodestyle font-bold="False">
<hovernodestyle font-underline="True" forecolor="#5555DD">
<SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD" HorizontalPadding="0px"
VerticalPadding="0px" />
<nodes>
<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">
<nodestyle font-names="Tahoma" font-size="10pt" forecolor="Black" horizontalpadding="0px">
NodeSpacing="0px" VerticalPadding="0px" />
推荐答案
(document).ready(function(){
//--------------------------------
//设置北部地区
//--------------------------------
(document).ready(function(){
//--------------------------------
// Setup North Region
//--------------------------------
( "div.northRegion").hide();
("div.northRegion").hide();
("div.northRegion").html(
< div style ="字体家族:Tahoma；字体大小:11像素；颜色:白色；宽度:800像素；"+
"text-align:center;">< h1 style =''字体家族:影响；字体大小:50像素；''>北部地区"+
</h1>这是北部地区"
);
//--------------------------------
//活动
//--------------------------------
//北部地区
("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
这篇关于如何使用Asp.Net创建simpe ExtJS应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
