ExtJS与.NET结合开发实例.doc

资源描述

基础篇第一篇,本节主要向大家介绍Ext的最基础的话题 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一样,我问了好多好多人,都说难,让我学习的信心到最后都剩的没有一点儿了,于是学了当时身边谁也不懂的.呵呵.如果有人问我这个问题,我告诉你,真的很简单,不是说我会了才这么说,其实,我想说的是:大家玩游戏基本上都是无师自通的吧,现在明白了吧,如果你有玩游戏的那份精神和斗志,靠,天下事难难难者亦易易易也. 在哪里下载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类. 第二篇,精美的Ext式样的消息框．精美的消息框截图了感觉就像写书一样,好难,不过我有玩游戏的精神,难亦易也. 如果你看到了上文,那么我想你手上现在应该有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> <%--这是一个的页面头部分.在里面输入正确访问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> 上面是一个完整的网页,路径正确后,就可以直接在页面显示出来．精美的消息框截图了另外，提一句，Ext的所有消息框都封装在Ext.Msg类里面．第三篇,常用的一些Ext方法在开始编写每个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("不带参数"); 就不一一介绍了第四篇,Ext中有两个很重要的方法,一个是decode;一个是encode. 在述说这个例子之前，我假想你已经知道什么是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=" /> <link rel="Stylesheet" type="text/css" href=" /> <script type="text/javascript" src=" <script type="text/javascript" src=" <script type="text/javascript" src=" </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.util.Format类 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.

展开阅读全文