本示例因一个朋友需要，因此写得比较简单，没有涉及较多的功能，仅仅依靠ajaxpro从后台返回一条eli数据，用于填充ext窗口的标题，
因ext代码较大，这里的源代码下载并不包含ext库文件，请注意：博客使用开发环境2008.net，其他未作测试，如果使用低版本的开发环境，请修改webconfig。
示例图：
Default.aspx
<!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.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;
}
}
如何获取后台返回的自定义错误信息和系统异常信息
这里暂时不讨论是否应该在前台显示后台的异常信息
其实 我还是能够理解这个朋友的要求的 想调试方便查看而已
下面就做了这个小例子
在以前 我经常会在后台返回成功或者失败的信息：
简单的就是返回0或者1 直接response.write("{flag:0}"),或者response.write("{flag:‘0’}"),这样就可以了
但如果是异常信息 就不能够单纯的再使用这个方式了
因为 多数情况下 异常信息的内容还是比较多的。
如果再这样写：response.write("{flag:‘"+exception.message+"’}"),就有问题了（异常内容较少的情况下还是不会有问题的）
看看效果图吧 今天为写这个例子 总是希望出现长点的异常 可总是让我失望 最后总算找到了
这个错误来源于数据库连接正确，但表名不正确所捕获的异常
这个错误来源于数据库连接不正确 这个异常捕获的时间较长 要耐心等待1--9秒 就会弹出下面的消息框了
看下Ext的页面实现源代码
Code
json.aspx的html页面源代码 再强调下 这个返回json数据的html页面文件就一行
json.aspx.cs的后台捕获异常的代码的实现
为单选和复选按钮添加事件，本篇例子来自一个朋友的询问：如何给单选组件添加事件，这里对单选和复选同时做了说明添加的方式，其实添加事件是很简单的，这里举出了三种添加事件的方式。
先看看效果图
因为不涉及后台的交互，这里只提供前台的html页面的Ext的实现
-先把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>
上面的代码对应下面的示例图，其它样式 朋友们不需要了吧
本章介绍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>
本章介绍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>
本篇介绍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>
如图所示,当选择隐藏的时候就出现下图
当选择上图时,就又会出现
本篇介绍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>
Ext.util.Format类是Ext对数据进行格式化操作的一个类,这篇会把所有的方法都讲解下,因为每个方法都会用到.因为每个方法都和我们用到的服务器端语言中所常用到的方法一样,看了名称就知道什么意思.这里我会把Ext封装起来的源代码复制出来,看了之后就能够更加理解它的方法的意义了.
<div>
<script type="text/javascript">
function ready()
{
//说明，这里会将每个方法执行的结果都通过消息框的方式展现出来
//定义一个字符串
var testStr = "abcdefghijklmnopqrstuvwxyz";
//capitalize调用方式：
var capitalizeResult = Ext.util.Format.capitalize(testStr);
//capitalize功能
var capitalizeValue = "capitalize()方法的功能：将首字符串的第一个字母大写！";
Ext.Msg.alert("原字符串："+testStr,"执行Ext.util.Format.capitalize(testStr)方法"+"返回的结果："+capitalizeResult+"<br/>"+capitalizeValue);
//capitalize方法的源代码
var capitalize = function(value)
{
return !value ? value : value.charAt(0).toUpperCase() + value.substr(1).toLowerCase();
};
效果图:
//ellipsis调用方式：
var ellipsisResult = Ext.util.Format.ellipsis(testStr,9);
//ellipsis功能
var ellipsisValue = "capitalize()方法的功能：如果testStr的长度大于9，那么就将字符串截取总长度为9，但最后三个字符却要用...表示，总长度为9的字符串实际上是由6个字符加上一个省落号表示的！"
Ext.Msg.alert("原字符串："+testStr,"执行Ext.util.Format.ellipsis(testStr,9)方法"+"返回的结果："+ellipsisResult+"<br/>"+ellipsisValue);
//ellipsis方法的源代码
var ellipsis = function(value, len)
{
if(value && value.length > len)
{
return value.substr(0, len-3)+"...";
}
return value;
};
效果图:
//uppercase调用方式：
var uppercaseResult = Ext.util.Format.uppercase(testStr);
//uppercase功能
var uppercaseValue = "uppercase()方法的功能：把字符串中转换成大写！"
Ext.Msg.alert("原字符串："+testStr,"执行Ext.util.Format.uppercase(testStr)方法"+"返回的结果："+uppercaseResult+"<br/>"+uppercaseValue);
//uppercase方法的源代码
var uppercase = function(value)
{
return String(value).toUpperCase();
};
效果图:
//lowercase调用方式：
var lowercaseResult = Ext.util.Format.lowercase(uppercaseResult);
//lowercase功能
var lowercaseValue = "lowercase()方法的功能：把字符串中转换成小写！"
Ext.Msg.alert("字符串："+uppercaseResult,"执行Ext.util.Format.lowercase(lowercaseResult)方法"+"返回的结果："+lowercaseResult+"<br/>"+lowercaseValue);
//lowercase方法的源代码
var lowercase = function(value)
{
return String(value).toLowerCase();
};
效果图:
//substr调用方式：
var substrResult = Ext.util.Format.substr(testStr,5,9);
//substr功能
var substrValue = "substr()方法的功能：将字符串按照指定的位置截取指定长度的新字符串！"
Ext.Msg.alert("原字符串："+testStr,"执行Ext.util.Format.substr(testStr)方法"+"返回的结果："+substrResult+"<br/>"+substrValue);
//substr方法的源代码
var substr = function(value, start, length)
{
return String(value).substr(start, length);
};
效果图:
//usMoney调用方式：
var usMoneyResult = Ext.util.Format.usMoney("1000");
//usMoney功能
var usMoneyValue = "usMoney()方法的功能：把字符串或者数字转换成美圆字符串！"
Ext.Msg.alert("字符串："+"1000","执行Ext.util.Format.usMoney(1000)方法"+"返回的结果："+usMoneyResult+"<br/>"+usMoneyValue);
//usMoney方法的源代码
var usMoney = function(v)
{
v = (Math.round((v-0)*100))/100;
v = (v == Math.floor(v)) ? v + ".00" : ((v*10 == Math.floor(v*10)) ? v + "0" : v);
v = String(v);
var ps = v.split('.');
var whole = ps[0];
var sub = ps[1] ? '.'+ ps[1] : '.00';
var r = /(\d+)(\d{3})/;
while (r.test(whole))
{
whole = whole.replace(r, '$1' + ',' + '$2');
}
v = whole + sub;
if(v.charAt(0) == '-')
{
return '-$' + v.substr(1);
}
return "$" + v;
};
效果图:
//trim调用方式：
var trimResult = Ext.util.Format.trim(" 1000 ");
//trim功能
var trimValue = "trim()方法的功能：去掉字符串中的左右空格！"
Ext.Msg.alert("原字符串："+" 1000 ","执行Ext.util.Format.trim(' 1000 ')方法"+"返回的结果："+trimResult+"<br/>"+trimValue);
//trim方法的源代码
var trim = function(value)
{
return String(value).replace(trimRe, "");
};
效果图:
//fileSizeResult调用方式：
var fileSizeResult = Ext.util.Format.fileSize("1024");
//fileSizeResult功能
var fileSizeValue = "fileSize()方法的功能：把代表字节的数据值转换成代表文件大小的字符串，如1024就转换成1kb！"
Ext.Msg.alert("原字符串：1024","执行Ext.util.Format.fileSize(1024)方法"+"返回的结果："+fileSizeResult+"<br/>"+fileSizeValue);
//fileSize方法的源代码
var fileSize = function(size)
{
if(size < 1024)
{
return size + " bytes";
}
else if(size < 1048576)
{
return (Math.round(((size*10) / 1024))/10) + " KB";
}
else
{
return (Math.round(((size*10) / 1048576))/10) + " MB";
}
};
效果图: 
}
Ext.onReady(ready);
</script>
</div>
除此之外还有几个方法,以后有时间会继续说明,不过,很多方法我希望能够自己测试下,然后就可以举一反三了.
多看看ext自带的文档,非常全,是英文的,对学习英语有很有帮助呢
在述说这个例子之前，我假想你已经知道什么是Json数据了，那么在这里在温习一下吧:
JSON(JavaScript Object Notation) 是一种数据交换格式，采用完全独立于语言的文本格式；
JSON建构于两种结构：“名称/值”对的集合和值的有序列表
下面详细说明下：
“名称/值”对的集合（A collection of name/value pairs）。不同的语言中，它被理解为对象（object），纪录（record），结构（struct），字典（dictionary），哈希表（hash table），有键列表（keyed list），或者关联数组 （associative array）。
值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组（array）。
JSON具有以下这些形式：
对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。
数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。
值（value）可以是双引号括起来的字符串（string）、数值(number)、 ture、false、 null、对象（object）或者数组（array）。这些结构可以嵌套。
字符串（string）是由双引号包围的任意数量Unicode字符的集合，使用反斜线转义。一个字符（character）即一个单独的字符串（character string）。
空白可以加入到任何符号之间
------------------------以下来自百度的最新报告
下面介绍Ext中两个很重要的方法，其实，Ext中没有多余的方法，每个方法都能够恰当好处的发挥它的作用,这里指它很重要，是因为它们太常用了,尤其是在与数据库交换数据的时候
Ext中有两个很重要的方法,一个是decode;一个是encode.顾名思义,一个是编码,一个是解码,你难道真的这么想吗?
严格的说,一个是将json字符串转换成对象;一个是将对象转换成json字符串
下面这个示例主要介绍的是Ext.decode()和Ext.encode()的用法，其中使用到了json格式的串，首先是用到了Ext.decode()方法，将json格式的串转换成对象，然后通过对象访问对象所包含的各个属性的值，通过消息框把它们显示出来；之后在用Ext.encode()将已经生成的对象转换成开始定义的json格式的串，也通过消息框把它们显示出来，加了一个函数，使得在第一个消息框弹出3秒钟后再弹出第二个消息框
用图片说明吧
//下面是将json字符串转换成对象后,通过对象访问属性生成的消息框
//下面是将上面生成的对象又转换成json字符串后生成的消息框
具体看下示例吧
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testDecode.aspx.cs" Inherits="Test.Example.hello.testDecode" %>
<!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>测试Ext.decode()和Ext.encode()方法</title>
<link rel="Stylesheet" type="text/css" href="http://www.cnblogs.com/ExtJS/resources/css/ext-all.css" />
<link rel="Stylesheet" type="text/css" href="http://www.cnblogs.com/ExtJS/resources/css/xtheme-purple.css" />
<script type="text/javascript" src="http://www.cnblogs.com/ExtJS/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/ExtJS/ext-all.js"></script>
<script type="text/javascript" src="http://www.cnblogs.com/ExtJS/ext-lang-zh_CN.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript">
function ready()
{
//再用一个示例说明下如何使用decode和encode，现在我们已经知道什么是json数据格式了，也知道它的作用和语法了
//现在我们就开始演练吧
//先使用decode方法，这个方法是将json字符串转换成对象的
//第一步：先定义一个json字符串吧
var 刘天王 = "{姓名:'刘德华',性别:'男',老家:'香港'}";
//第二步：现在我们要把刘天王转换成对象了
var who = Ext.decode(刘天王);
//第三步：who成了对象后就相当于是类的对象了，里面的姓名，性别，老家都成了who的属性了，现在知道怎么通过对象访问属性了吧
var name = who.姓名; //获取who对象的[姓名]属性
var sex = who.性别; //获取who对象的[性别]属性
var home = who.老家; //获取who对象的[老家]属性
//第四步：下面将获取的信息组合起来
var result = "刘天王资料的信息：姓名是--"+name + "；性别--"+sex+"；老家--"+home;
//第五步：我们把获取的who对象的信息用弹出消息的方式显示出来吧
Ext.Msg.alert("刘天王的资料信息",result);
//以上就是将一个json字符串转换成对象后，再逐个访问对象的属性的示例
//下面使用encode方法
//encode方法很简单了，就是将上面生成的who对象再转换成第一步定义的json字符串
//定义一个到时间执行的函数
var getJson = function()
{
//你完全可以把这段写在函数外面，之所以包含在里面纯属是为了在显示第一个消息框后再隔3秒显示下面这个消息窗口
var jsonStr = Ext.encode(who);
//我们还是通过弹出消息的方式把这个json字符串显示出来吧
Ext.Msg.alert("jsonStr信息内容",jsonStr);
};
//下面这个方法意思是：在3秒之后会调用函数getJson执行里面包含的脚本
setTimeout(getJson,3000);
//补充点东西
//Ext.decode()和Ext.encode()分别是是 Ext.util.JSON.decode()和Ext.util.JSON.encode的简写
}
Ext.onReady(ready);
</script>
</div>
</form>
</body>
</html>
现在这个例子就可以说明Ext.decode()和Ext.encode()方法的完美作用了.
用图片说明吧
//下面是将json字符串转换成对象后,通过对象访问属性生成的消息框
//下面是将上面生成的对象又转换成json字符串后生成的消息框
在开始编写每个Ext的组件用法之前，先对自己在工作中常用的一些Ext方法总结出来．只罗列一些经常用到的，偶尔也会用到的仅仅说明下．Ext框架把一些我们平时在工作经常遇到的情况封装成了方法，有兴趣的朋友读读它的源代码，会发现里面封装的语句和我们平时写的没有什么区别．提一句，它的源代码读起来真的是一种享受，虽然有很多地方我还看不懂，但，我觉得它的源代码确实是学习javascript的最好的教程．ext-all-debug.js和ext-core-debug.js这两个文件是调试文件，非常清晰，假如我有２个月的时间休假，我是愿意把时间全部花在上面的．
第一想说的方法想来想去，觉得还是再说一次Ext类的onReady()方法吧，它的作用就是指定当Ext类的全部框架全部加载完成后执行什么函数．具体执行什么函数就是它的参数．
第一：Ext.getCmp("对象ID") :该方法只有一个参数，就是组件的 ID
说明：在执行下面的语句后，点击确定会弹出定义的Ext按钮的一些属性值，同时将原来的值由"确定"更改为"取消"
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript">
function ready()
{
//这个函数的主要作用有两个：
//一个获取定义的buttonName按钮。有消息弹出结果
//另一个就是将buttonName按钮值由"确定"更改为"取消"
var setText = function()
{
//通过getCmp方法获取指定参数的对象，参数的值是某个已经在页面中初始化的Ext对象的ID
//getCmp()方法只有一个参数，就是组件的 ID
var btn = Ext.getCmp("buttomID");
//获取按钮ID
var id = btn.id;
//获取按钮文本
var text = btn.text;
//获取按钮类型
var type = btn.type;
var result = "执行结果是：ID="+id+" text="+text+" type="+type;
Ext.Msg.alert("提示消息",result);
//setText是将按钮的文本重新设置为新的文本“取消”
Ext.getCmp("buttomID").setText("取消");
};
//定义一个按钮 出发事件后执行函数setText
var buttonName = new Ext.Button
({
id:"buttomID",
text:"确定",
renderTo:document.body,
handler:setText
});
}
Ext.onReady(ready);
</script>
</div>
</form>
</body>
//第二: Ext.getBody();//该方法等同于document.body 呵呵 不用说了吧
//以上是我经常使用的2个方法,
其他还有很多,我都不喜欢用,像:Ext.get("一个参数");Ext.getDom("一个参数");Ext.getDoc("不带参数");
就不一一介绍了
精美的消息框截图了
感觉就像写书一样,好难,不过我有玩游戏的精神,难亦易也.
如果你看到了上文,那么我想你手上现在应该有Ext2.2的文件了吧.
这里再说一次,所有的程序除非有说明,则全部是以2008 c#.net为前提,虽然Ext不在乎你使用什么语言,但我只会.net.
好,首先建立一个新的网站吧,然后把你下载的Ext2.2文件复制到网站的任何一个目录里面,在页面设置正确的路径即可.如下图所示:
需要说明一点，以后所有的程序都不再罗列整个页面，只写出<body></body>之间的语句
<!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>
//下面是整个Ext框架所必备的文件,除了中文映射老外不需要外
<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>
<%--这是一个 asp.net的页面头部分.在里面输入正确访问Ext的路径.顺序更要注意哦,而且绝对不可以颠倒.
有了上面的正确的引用后,我们就要开始实战演练了.
好吧,我们也是从 hello世界 开始吧!--%>
<body>
<form id="form1" runat="server">
<div>
<%--既然Ext是基于javascript的，所以我们要把Ext的东东包裹在javascript里面--%>
<script type="text/javascript">
//定义一个函数，在里面定义一个弹出按钮,当网页上出现弹出按钮后,点击就会出现hello世界了.
function ready()
{
// 下面openMs就是出发事件后所执行的函数
var openMsg = function()
{
//alert("good");比较下ext的弹出消息框是多么多么的令人狂喜
Ext.Msg.alert("提示消息，可以自定义","hello世界-hello世界-hello世界-hello世界");
};
//定义Ext的按钮
var 弹出按钮 = new Ext.Button
({
id:"btnOpen", //定义按钮的ID
text:"弹出按钮", //定义按钮的标题
handler:openMsg, //定义按钮出发的事件，handler后面直接写函数的名称openMsg
//也可以写成下面这样，本质是一样的，效果也是一样的
//handler:function(){Ext.Msg.alert("提示消息，可以自定义","hello世界-hello世界-hello世界-hello世界"); },
renderTo:document.body//将弹出按钮渲染到窗体上
});
}
Ext.onReady(ready);//里面的参数就是上面定义的函数
//onReady是使用Ext的入口,只有在上面所说的Ext框架全部加载完成后,才会执行Ext.onReady里面所包含的函数，就是说具体执行什么函数，由Ext的onReady方法指定．
//当然onReady这个Ext方法总共有三个参数，为了力求简单，这里先使用一个参数，在提高篇里面则会详细讲解．
</script>
</div>
</form>
</body>
</html>
上面是一个完整的asp.net网页,路径正确后,就可以直接在页面显示出来．
精美的消息框截图了
另外，提一句，Ext的所有消息框都封装在Ext.Msg类里面．
ExtJS是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web应用程序界面。ExtJS可以用来开发RIA也即富客户端的AJAX应用 ExtJS是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。 ExtJs最开始基于YUI技术，由开发人员Jack Slocum开发，通过参考Java Swing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。
朋友问我,Ext怎么学习,我记得自己学的时候纯纯因为它的简单和视觉效果特别好,因为喜欢了才有努力的坚持不懈的激情.有朋友说能否写点简单的示例方便入门,我是觉得自己写的都是很浅陋东西,实在不知道怎么简单了,昨天晚上想了许久,觉得自己还是无比的粗浅,但依然有人说看不懂,我想可能是言语没有说清楚,或者你在等到天上掉馅饼吧.因为,我觉得开始学习就是不断的模仿,只要知道它的大致概念,在自己的项目中不断的接触,一天一天就会成长起来,建议最好根据自己的学习进度写个小网站,将所学的知识融会贯通一下,就像我写了好几个Ext的网站,虽然暂时都没有发布出去,但自己经常看看也是对自己的工作的激励吧.接下来一段日子,尽量写一些Ext2.2所有的对象的最简单的用法.如果能够坚持,以后会写一个对应的提高系列.
下面就开始Ext之旅吧
Ext是什么?
答曰:Ext是一个用jscript(javascript)所写的一个ajax框架(我想大家都知道什么是ajax了吧,假想你已经知道,那我就不说了).而javascript也是更知道它的概念了,就更不用说了吧,好,那就也不说了.什么是Ext呢,结合javascript和ajax,我想你闭眼猜都能够猜出它的功能了吧.那就用自己的语言说下什么是Ext吧,呵呵,思考真的很重要的.学习的重要环节就是要不断的自己总结,总结就来自自己的思考.
Ext有多好呢?
答曰:仁者见仁,官方应用示例 自己好好看看吧,它的绚丽多姿是无法用语言描述的,你可能会很惊叹,但我还要告诉你,这个官方应用示例并没有把Ext的所有的功能都罗列出来,仅仅是一部分,有更多的有太多的等你去发现,星哥说了:太阳已经落山了,时间不等人滴.
Ext难吗?
答曰:太多的人问这个问题,就像我开始学习java一样,我问了好多好多人,都说难,让我学习的信心到最后都剩的没有一点儿了,于是学了当时身边谁也不懂的vs.net.呵呵.如果有人问我这个问题,我告诉你,真的很简单,不是说我会了才这么说,其实,我想说的是:大家玩游戏基本上都是无师自通的吧,现在明白了吧,如果你有玩游戏的那份精神和斗志,靠,天下事难难难者亦易易易也.
在哪里下载Ext呢?
答曰:好,你能够这么问,看来我做说客还是可以的(信心指数又增加了),因为我是从2.0版本,2.1版本,到现在的2.2版本,我真的说不出来他们到底有何具体的差别,但明显的看见它明显壮大了,不仅仅是体积,更是它的力量. 下载地址 官方的版本,有各个版本的,我建议学习最新的吧.
Ext有核心吗?
答曰:看来只有我才能够问这个问题呀,当年比干无心而死,看来框架也是一样的,没有核心怎么可以呢.我想在javascript中大家也都知道什么是类了吧,简单的说就是一个函数就是一个类,类里面还可以有很多的类,可以无限嵌套.而Ext就是有很多的类库组成,也就是有很多的函数组成,只是现在天上飞的水里游的都成了对象了,所以很多技术也都用对象的语言来描述.Ext就是主要有哪些类库组成呢?有人说肯定有API层,是的,有的,有些人总是喜欢称底层是API(API是什么意思,全称Application Programming Interface 应用编程接口),喜欢就喜欢吧,我管不着.但Ext说了,要改变这样的称呼,于是Ext称之为Core,为什么呢?因为Ext的底层在Core这个文件夹里面.core是什么意思呢?core[kC:]n.果核, 中心, 核心,我觉得称底层为Core确实不错,而且大写的CORE还有一个意思:CORE=Congress of Racial Equality 争取种族平等大会.感觉Ext的作者Jack Slocum是具有很浓烈的浪漫主义情怀的追求完美的一个程序员. 说到Core了:core对Ext的DoM操作,事件处理以及所有的直接在页面上可以展示的和不可以展示的组件等提供了基础的功能.刚刚提到可显示的控件也叫组件,我们在程序中可以直接通过这些控件来实现非常友好,并且交互性也很好的应用.特别一提的是在那些不可见的组件中,有一个utils类,该类提供了很多的很实用的功能,可以方便实现对接收和发送的数据进行各种操作,实在是Ext框架不可或缺的一部分.
如何介绍Ext的组件呢?
答曰:这个问题我确实想了很长时间,因为像很多软件的帮助教程一样,它们总是把该软件的所有功能都罗列出来,然后再逐个详解,甚至很多功能可能你都从来都不需要,但你并不知道自己是否需要,就像最近在学习flash,总感到自己有茫然不知所措的感觉,学习的态度都会转变.但,也不能够说人家的帮助教程不好呀,毕竟是追求完整性和可用性方面,每个人的见解并不一样. 好吧,我下定决心了.先简单把组件说下,然后对这些组件再详细解说加示例,而且每个示例都追求可用和简单,将来再写一个深入的就能够达到完整性,倒不是说一定要追求完整,而是,如果你仅仅写了入门,却没有提高的版本,感觉自己并没有把事情做好做完整,毕竟人人都希望有始有终呀.毕竟自己还想早点介绍点关于Flex的故事呢,唉,总是没有时间.
Ext的组件有哪些呢?
答曰:Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the xtype like getXType and isXType. 下面就是这些可以使用了控件的列表了,我直接从它的帮助文档复制过来,并同时加上了它的英文原文,因为每次看到这段我总是能够想起什么,呵呵:
Ext组件主要包括一些常用组件,如表单组件,数据组件,导航组件,相信大家看名称就知道什么意思了.
xtype Class
基本组件---------------------------------------
box Ext.BoxComponent
button Ext.Button
colorpalette Ext.ColorPalette
component Ext.Component
container Ext.Container
cycle Ext.CycleButton
dataview Ext.DataView
datepicker Ext.DatePicker
editor Ext.Editor
editorgrid Ext.grid.EditorGridPanel
grid Ext.grid.GridPanel
paging Ext.PagingToolbar
panel Ext.Panel
progress Ext.ProgressBar
propertygrid Ext.grid.PropertyGrid
slider Ext.Slider
splitbutton Ext.SplitButton
statusbar Ext.StatusBar
tabpanel Ext.TabPanel
treepanel Ext.tree.TreePanel
viewport Ext.Viewport
window Ext.Window
导航组件---------------------------------------
toolbar Ext.Toolbar
tbbutton Ext.Toolbar.Button
tbfill Ext.Toolbar.Fill
tbitem Ext.Toolbar.Item
tbseparator Ext.Toolbar.Separator
tbspacer Ext.Toolbar.Spacer
tbsplit Ext.Toolbar.SplitButton
tbtext Ext.Toolbar.TextItem
窗体组件---------------------------------------
form Ext.FormPanel
checkbox Ext.form.Checkbox
combo Ext.form.ComboBox
datefield Ext.form.DateField
field Ext.form.Field
fieldset Ext.form.FieldSet
hidden Ext.form.Hidden
htmleditor Ext.form.HtmlEditor
label Ext.form.Label
numberfield Ext.form.NumberField
radio Ext.form.Radio
textarea Ext.form.TextArea
textfield Ext.form.TextField
timefield Ext.form.TimeField
trigger Ext.form.TriggerField
Ext的每个组件都是有一个指定的Xtype属性值,通过该值就可以得到该组件的类型,同时也可以根据该组件来定义一个组件 例如:
{xtype:"button",id:"btnEnter",text:"确定"} //这就是定义了一个按钮的组件.
{xtype:"field",id:"txtName"} //这就是定义了一个输入框的组件.
{xtype:"field",id:"txtPwd",inputType:"password"} //这就是定义了一个密码框的组件.
当然你可以不用xtype 比如:
var btnEnter = new Ext.Button({id:"btnEnter",text:"确定"} );//这就是定义了一个按钮的组件.
var txtName = new Ext.form.Textfield({id:"txtName"} );//这就是定义了一个输入框的组件.
var txtPwd = new Ext.form.Textfield({id:"txtPwd",inputType:"password"} );//这就是定义了一个密码框的组件.
是不是很简单,在下面会解说具体的示例,包括它的基本的语法结构,同时,你需要明确,这和你在javascript里面的用法不会有不同的地方,只是有些方法Ext已经给我们封装好了,我们只要有拿来主义的精神就可以.特别一说的是:Ext的一些很实用的类都是全局的,无须new了,直接用就可以.
在下节会介绍一些Ext的很好的很实用的也很简单就能够使用的Util类.
http://www.cnblogs.com/mogen_yin/archive/2008/10/23/1317603.html