本示例因一个朋友需要，因此写得比较简单，没有涉及较多的功能，仅仅依靠ajaxpro从后台返回一条eli数据，用于填充ext窗口的标题，
因ext代码较大，这里的源代码下载并不包含ext库文件，请注意：博客使用开发环境2008.net，其他未作测试，如果使用低版本的开发环境，请修改webconfig。
示例图：
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
<!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>登陆系统</title>
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" />
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ExtJS/ext-all.js"></script>
<script type="text/javascript" src="ExtJS/ext-lang-zh_CN.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript">
Ext.onReady(function()
{
var win = new Ext.Window({
title:Default.getvalue("用AjaxPro方式返回的窗口标题哦").value,
width:300,
height:300
});
win.show();
});
</script>
</div>
</form>
</body>
</html>
Default.aspx.cs
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using AjaxPro;
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
AjaxPro.Utility.RegisterTypeForAjax(typeof(Default));
}
[AjaxMethod]
public object getvalue(string title)
{
return title;
}
}
posted @ 2009-06-05 13:30 奋斗的萌丫头 阅读(140) 评论(0)
编辑如何获取后台返回的自定义错误信息和系统异常信息
这里暂时不讨论是否应该在前台显示后台的异常信息
其实 我还是能够理解这个朋友的要求的 想调试方便查看而已
下面就做了这个小例子
在以前 我经常会在后台返回成功或者失败的信息：
简单的就是返回0或者1 直接response.write("{flag:0}"),或者response.write("{flag:‘0’}"),这样就可以了
但如果是异常信息 就不能够单纯的再使用这个方式了
因为 多数情况下 异常信息的内容还是比较多的。
如果再这样写：response.write("{flag:‘"+exception.message+"’}"),就有问题了（异常内容较少的情况下还是不会有问题的）
看看效果图吧 今天为写这个例子 总是希望出现长点的异常 可总是让我失望 最后总算找到了
这个错误来源于数据库连接正确，但表名不正确所捕获的异常
这个错误来源于数据库连接不正确 这个异常捕获的时间较长 要耐心等待1--9秒 就会弹出下面的消息框了
看下Ext的页面实现源代码
Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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>测试捕获异常</title>
<link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" />
<link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/xtheme-green.css" />
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ExtJS/ext-all.js"></script>
<script type="text/javascript" src="ExtJS/ext-lang-zh_CN.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="button"></div>
<script type="text/javascript">
function ready()
{
Ext.Ajax.request
({
url:"json.aspx",
success: function(response,option)
{
var resu = Ext.decode(response.responseText);
if(resu&&resu[0])
{
if(resu[0].success)
{
Ext.Msg.alert('提示消息',"加载成功！");
}
else
{
Ext.Msg.alert('提示消息',"加载失败！失败信息："+resu[0].errorinfo);
}
}
},
failure: function(response,option)
{
Ext.Msg.alert('提示消息',"加载失败！后台出现了严重的未捕获到的异常！");
}
});
}
Ext.onReady(ready);
</script>
</div>
</form>
</body>
</html>
json.aspx的html页面源代码 再强调下 这个返回json数据的html页面文件就一行
Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="json.aspx.cs" Inherits="json" %>
json.aspx.cs的后台捕获异常的代码的实现
Code
using System.Collections.Generic;
using Newtonsoft.Json;
public partial class json : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Hashtable ht = new Hashtable();
try
{
DataSet ds = ExtAccess.GetMoreRow("select top 10 * from TypeTable11");
if (ds != null && ds.Tables[0].Rows.Count > 0)
{
ht["success"] =true;
ht["errorinfo"] = "自定义成功信息";
}
else
{
ht["success"] = false;
ht["errorinfo"] = "自定义错误信息" ;
}
}
catch (Exception ee)
{
ht["errorinfo"] =ee.Message;//获取系统异常信息
ht["success"] = false;
}
finally //强制返回数据
{
IList<Hashtable> htList = new List<Hashtable>();
htList.Add(ht);
string json = JavaScriptConvert.SerializeObject(htList);
Response.Write(json);
}
}
}
posted @ 2009-06-05 13:23 奋斗的萌丫头 阅读(162) 评论(1)
编辑为单选和复选按钮添加事件，本篇例子来自一个朋友的询问：如何给单选组件添加事件，这里对单选和复选同时做了说明添加的方式，其实添加事件是很简单的，这里举出了三种添加事件的方式。
先看看效果图
因为不涉及后台的交互，这里只提供前台的html页面的Ext的实现
Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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>无标题页</title>
<link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" />
<link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/xtheme-green.css" />
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ExtJS/ext-all.js"></script>
<script type="text/javascript" src="ExtJS/ext-lang-zh_CN.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="button"></div>
<script type="text/javascript">
function ready()
{
var win = new Ext.Window
({
id:"win",
width:300,
height:200,
title:"如何给单选和复选按钮添加事件",
tbar:
[
{
xtype : 'radio',
id:"hege",
boxLabel : '合格',
name : 'flag',
inputValue : '0',
handler:function()//添加事件
{
var hege = Ext.getCmp("hege");
if(hege&&hege.checked)
{
Ext.Msg.alert("提示消息","你选择的是["+hege.boxLabel+"]");
}
}
},
'',
{
xtype : 'radio',
id:"buhege",
boxLabel : '不合格',
name : 'flag',
inputValue : '0',
listeners:{"check":function()//添加事件
{
var buhege = Ext.getCmp("buhege");
if(buhege&&buhege.checked)
{
Ext.Msg.alert("提示消息","你选择的是["+buhege.boxLabel+"]");
}
}}
}
],
bbar://debugger;
[
'请选择你的爱好','',
{
xtype : 'checkbox',
boxLabel : '玩游戏',
id:"playGame",
inputValue : '0',
listeners:{"check":function()//添加事件
{
var playGame = Ext.getCmp("playGame");
if(playGame&&playGame.checked)
{
Ext.Msg.alert("提示消息","你选择的是["+playGame.boxLabel+"]");
}
}}
},
'',
{
xtype : 'checkbox',
boxLabel : '看电影',
id:"seeFilm",
inputValue : '0',
handler:function()//添加事件
{
var seeFilm = Ext.getCmp("seeFilm");
if(seeFilm&&seeFilm.checked)
{
Ext.Msg.alert("提示消息","你选择的是["+seeFilm.boxLabel+"]");
}
}
},
'',
{
xtype : 'checkbox',
boxLabel : '踢足球',
id:"playFoot",
inputValue : '0'
}
]
});
win.show();
//为踢足球添加事件
var playFoot = Ext.getCmp("playFoot");
playFoot.addListener("check",function()//添加事件
{
if(playFoot&&playFoot.checked)
{
Ext.Msg.alert("提示消息","你选择的是["+playFoot.boxLabel+"]");
}
});
}
Ext.onReady(ready);
</script>
</div>
</form>
</body>
</html>
posted @ 2009-06-05 13:23 奋斗的萌丫头 阅读(149) 评论(0)
编辑-先把fieldSet简单的回忆下：
fieldset：对表单进行分组，一个表单可以有多个fieldset
legend：说明每组的内容描述
fieldset默认是带边框的，而legend默认一般显示在左上角。但在某些场合或许不愿意让fieldset和legend的默认样式或默认布局影响设计方案中的美观。
解决方法：在CSS中将fieldset的border设置为0，legend的display设置为none即可。
同样的道理，知道了html标签的基本用法后，在Ext里也是一样的
首先，我们要知道FieldSet默认的样式是'x-fieldset'
其次，我们需要做的就是给FieldSet定义一个新的样式，
我们看看Ext原始的样式是什么：.x-fieldset{border:1px solid #B5B8C8;padding:10px;margin-bottom:10px;display:block;}
而我们只要将其中的border设置为0px ，
然后在使用Ext.form.FieldSet组件的时候，
我们先定义一个新的样式，最好和以前的同名，然后这个新的样式就会覆盖以前的样式
现在定义新的样式为：当然你可以定义任何符合规范的样式，下面的效果图向你详细展示了不同的样式
<style type="text/css">
.x-fieldset{border:11px solid #B5B8C8;padding:10px;margin-bottom:10px;display:block;}
</style>
只要将Ext.form.FieldSet组件的baseCls属性设置为新的"x-fieldset", 就可以将边框去掉，当然你可以将边框的宽度增加，也可以设置其他你需要的样式。
下面张贴几张Ext.form.FieldSet组件的效果图片
下面把源代码贴出来，供有兴趣的朋友参考：
具体如何使Ext.form.FieldSet没有边框，现在你一定知道了吧！
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FieldSet.aspx.cs" Inherits="WebExt.Sample4.FieldSet" %>
<!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>无标题页</title>
<link rel="Stylesheet" type="text/css" href="../ExtJS/resources/css/ext-all.css" />
<link rel="Stylesheet" type="text/css" href="../ExtJS/resources/css/xtheme-green.css" />
<script type="text/javascript" src="../ExtJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ExtJS/ext-all.js"></script>
<script type="text/javascript" src="../ExtJS/ext-lang-zh_CN.js"></script>
<style type="text/css">
.x-fieldset{border:12px solid #B5B8C8;padding:10px;margin-bottom:10px;display:block;border-bottom-color:Red; border-left-color:Green; border-right-color:Blue; border-top-color:Purple; text-decoration:underline;}
</style>
</head>
<body style="text-align:center;">
<form id="form1" runat="server">
<br /><br /><br /><br />
<div>
<script type="text/javascript">
function ready()
{
var fieldSet = new Ext.form.FieldSet
({
title:"测试fieldSet-将边框设置成不同的颜色",
width:400,height:200,
baseCls:"x-fieldset",
maskDisabled:true,
renderTo:document.body
});
}
Ext.onReady(ready);
</script>
</div>
</form>
</body>
</html>
上面的代码对应下面的示例图，其它样式 朋友们不需要了吧
posted @ 2009-06-05 13:20 奋斗的萌丫头 阅读(494) 评论(0)
编辑本章介绍Ext.form.Field组件的基本用法:
<form id="form1" runat="server">
<div>
<div id="Bind_Field"></div>
<script type="text/javascript">
//这里是把Field很重要的属性列出来 实际在应用的时候不需要将每个属性都列出 也许只需要一个属性就够了。
function ready()
{
Ext.QuickTips.init();//用于显示提示信息
var fieldName = new Ext.form.Field
({
id:"fieldName",
cls:"",//默认是""
disabled:false,//默认是false
fieldLabel:"名称",//默认是""
height:"auto",//默认是auto
hidden:false,//默认是false
hideLabel:false,//默认是false
hideMode:"offsets",//默认display,可以取值：display，offsets，visibility
inputType:"text",//输入类型 这个很重要，可以是radio, text, password, file 默认是text
invalidText:"invalidText：只能够输入数字",//默认是：The value in this field is invalid
listeners:
{
"change":function(){Ext.Msg.alert("提示信息","文本信息发生了改变！");}
},
readOnly:false,//内容是否只读，默认false
validateOnBlur:true,//默认是true,失去焦点时验证
validationDelay:300,//默认是250,验证延迟时间,毫秒数
validationEvent:"click",//验证事件 默认是keyup 可以是String/Boolean
value:"TextField组件基本用法",//自定义的信息 默认是：undefined
//x:number,y:number,在容器中的x,y坐标
width:"200",//默认是auto
renderTo:"Bind_Field"
});
//Field组件的方法和事件都比较简单，具体请查看Ext2.2官方文档，如果有不明白的地方在博客里提问解决
//以上就是Field组件的常用定义。
}
Ext.onReady(ready);
</script>
</div>
</form>
posted @ 2009-06-05 13:19 奋斗的萌丫头 阅读(139) 评论(0)
编辑本章介绍Ext.form.TextField组件的基本用法:
<form id="form1" runat="server">
<div>
<div id="Bind_TextField"></div>
<br />
<div id="Bind_Button"></div>
<script type="text/javascript">
//这里是把TextField很重要的属性列出来 实际在应用的时候不需要将每个属性都列出 也许只需要一个属性就够了。
function ready()
{
Ext.QuickTips.init();
var textfieldName = new Ext.form.TextField
({
id:"textfieldName",
allowBlank:false,//默认是true,如果是false,就是不允许空
//假如不为空时，定义提示信息 默认的提示信息是：This field is required
//要使提示内容出现，需要添加 Ext.QuickTips.init();
blankText:"请输入数据",
disabled:false,//默认是false
emptyText:"请正确输入数据",//默认是null
fieldLabel:"用户名称",//默认是""
height:"auto",//默认是auto
hidden:false,//默认是false
hideLabel:false,//默认是false
hideMode:"offsets",//默认display,可以取值：display，offsets，visibility
inputType:"text",//输入类型 这个很重要，可以是radio, text, password, file 默认是text
invalidText:"invalidText：只能够输入数字",//默认是：The value in this field is invalid
maxLength:100,//能够输入的内容的最大长度
maxLengthText:"输入内容太长了",//超出最大长度的设置信息
minLength:2,//能够输入的内容的最小长度
maxLengthText:"输入内容太短了",//没有达到最小长度的设置信息
readOnly:false,//内容是否只读，默认false
regex:/^\d$/, //正则表达式 这里假设只允许输入数字 如果输入的不是数字 就会出现下面定义的提示信息
regexText:"regexText：只能够输入数字", //定义不符合正则表达式的提示信息
validateOnBlur:true,//默认是true,失去焦点时验证
validationDelay:300,//默认是250,验证延迟时间,毫秒数
validationEvent:"click", //验证事件 默认是keyup 可以是String/Boolean
//自定义的验证函数 当输入的数据不符合正则表达式的要求时，就会执行这个函数
validator:function(){Ext.Msg.alert("提示信息","只能够输入数字");},
value:"",//自定义的信息 默认是：undefined
//x:number,y:number,在容器中的x,y坐标
width:"auto",//默认是auto
renderTo:"Bind_TextField"
});
//TextField组件的方法和事件都比较简单，具体请查看Ext2.2官方文档，如果有不明白的地方在博客里提问解决
//以上就是TextField组件的常用定义。
}
Ext.onReady(ready);
</script>
</div>
</form>
posted @ 2009-06-05 13:18 奋斗的萌丫头 阅读(302) 评论(0)
编辑本篇介绍Ext.form.Label组件的基本用法:
这里通过上一篇介绍的button按钮的click事件来测试Ext.form.Label组件的用法,首先点隐藏的时候将Ext.form.Label组件隐藏,而后又通过button 这个反复键来显示Ext.form.Label组件,详细看图片效果以及代码
如图所示,当选择隐藏的时候就出现下图
当选择上图时,就又会出现
下面看看代码:
<form id="form1" runat="server">
<div>
<div id="Bind_Label"></div>
<br />
<div id="Bind_Button"></div>
<script type="text/javascript">
function ready()
{
Label组件仅仅是作为一个标签使用，所以用法较为简单
var label = new Ext.form.Label
({
id:"labelID",
text:"测试label组件",
height:100,//默认auto
width:100,//默认auto
autoShow:true,//默认false
autoWidth:true,//默认false
autoHeight:true,//默认false
hidden:false,//默认false
hideMode:"offsets",//默认display,可以取值：display，offsets，visibility
cls:"cssLabel",//样式定义,默认""
disabled:true,//默认false
disabledClass:"",//默认x-item-disabled
html:"Ext",//默认""
//x:number,y:number,在容器中的x,y坐标
renderTo:"Bind_Label"//将组件的显示效果渲染到某个节点的ID
});
//测试label 这个是反复键 选择隐藏就设置为显示 反之就设置为隐藏
var btnEvent = new Ext.Button
({
id:"btnEvent",
text:"隐藏label组件",
renderTo:"Bind_Button"
});
var flag = 0;
btnEvent.on("click",function()
{
if(flag==0)
{
label.setVisible(false);
btnEvent.setText("显示label组件");
flag = 1;
}
else
{
label.setVisible(true);
btnEvent.setText("隐藏label组件");
flag = 0;
}
});
//比较常用的方法主要有 以下方法都较为简单 在本示例中你可以对所有的方法自行测试下就知道是什么意思了
addClass( string cls )
destroy()
disable()
enable()
focus( [Boolean selectText], [Boolean/Number delay] )
getBox( [Boolean local] )
getEl()
getId()
getItemId()
getPosition( [Boolean local] )
getSize()
getXType()
getXTypes()
hide()
isVisible()
isXType( String xtype, [Boolean shallow] )
setDisabled( Boolean disabled )
setHeight( Number height )
setPosition( Number left, Number top )
setSize( Number/Object width, Number height )
setText( String text, [Boolean encode] )
setVisible( Boolean visible )
setWidth( Number width )
show()
updateBox( Object box )
}
Ext.onReady(ready);
</script>
</div>
</form>
如图所示,当选择隐藏的时候就出现下图
当选择上图时,就又会出现
posted @ 2009-06-05 13:18 奋斗的萌丫头 阅读(457) 评论(0)
编辑本篇介绍Ext.button组件的基本用法:这个组件的许多属性都很简单,看名字就知道什么意思,那这里就不再描述.
<div><img src="../Images/Menus/house.png" alt=""/>
<br />
<br />
<div id="Bind_Button"></div>
<br />
<script type="text/javascript">
function ready()
{
Ext.QuickTips.init();
var buttonName = new Ext.Button
({
id:"buttonName",
text:"Button组件基本用法",
tooltip:"提示信息：Button组件基本用法", //提示信息,如果需要显示提示信息，需要使用Ext.QuickTips.init();
tooltipType:"title", //定义显示提示信息的类型，有qtip和title两种方式，默认是qtip
type:"button", //按钮类型：可以是submit, reset or button 默认是 button
autoShow:true, //默认false
hidden:false, //默认false
hideMode:"offsets", //默认display,可以取值：display，offsets，visibility
cls:"cssButton", //样式定义,默认""
disabled:false, //默认false
disabledClass:"", //默认x-item-disabled
enableToggle:true, //默认false
pressed:false, //设置按钮是否已经被按下，默认是false
html:"Ext",//默认""
handleMouseEvents:true, //默认true,如果为false,那么mouseout mouseover就不能被触发
//x:number,y:number,在容器中的x,y坐标
handler:function(){Ext.Msg.alert('提示消息框','测试Button组件：handler事件！');},//添加事件
listeners: //添加监听事件 可以结合handler测试这两个事件哪个最先执行
{
"click":function()
{
Ext.Msg.alert('提示消息框','测试Button组件：listeners事件！');
Ext.getCmp("buttonName").hide();//隐藏按钮
}
},
cls:"x-btn-text-icon", //添加图标前需要设置该属性
icon:"../Images/Menus/house.png", //图标的地址
//plugins : Object/Array 扩展插件时使用
repeat:false, //默认false ,如果为true,需要设置mouseover事件
renderTo:"Bind_Button" //将组件的显示效果渲染到某个节点的ID
});
比较常用的方法 从字面上就能够理解它们的意思 还有更多的方法请参考Ext2.2官方文档
enable();disable();destroy();focus();getText();hide();show();
setText( String text );setVisible( Boolean visible );
使用该方法，意思是清除所有的监听事件，所以当执行该句后就不会再执行listeners的click事件了。按钮就不会被隐藏了。
buttonName.purgeListeners();
也可以通过这种方式设置handler事件:
buttonName.setHandler(function(){Ext.Msg.alert('提示消息框','测试Button组件：setHandler事件！');});
下面的事件可以自己测试下
buttonName.on("click",function()
{
Ext.Msg.alert('提示消息框','测试Button组件：click事件！');
});
buttonName.on("mouseover",function()
{
Ext.Msg.alert('提示消息框','测试Button组件：mouseover事件！');
});
buttonName.on("mouseout",function()
{
Ext.Msg.alert('提示消息框','测试Button组件：mouseout事件！');
});
比较常用的事件 从字面上就能够理解它们的意思 还有更多的方法请参考Ext2.2官方文档
mouseout : ( Button this, Event e ) ;
mouseover : ( Button this, Event e );
beforedestroy : ( Ext.Component this ) ;
beforehide : ( Ext.Component this ) ;
beforerender : ( Ext.Component this )
beforeshow : ( Ext.Component this )
click : ( Button this, EventObject e )
destroy : ( Ext.Component this )
disable : ( Ext.Component this )
enable : ( Ext.Component this )
hide : ( Ext.Component this )
show : ( Ext.Component this )
render : ( Ext.Component this )
}
Ext.onReady(ready);
</script>
</div>
posted @ 2009-06-05 13:17 奋斗的萌丫头 阅读(271) 评论(0)
编辑