【Asp.net精品源码栏目提醒】:网学会员为需要Asp.net精品源码的朋友们搜集整理了ExtJS与.NET结合开发实例 - 计算机等级相关资料,希望对各位网友有所帮助!
基础篇第一篇本节主要向大家介绍 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 是一个用 jscriptjavascript所写的一个 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 层是的有的有些人总是喜欢称底层是 APIAPI 是什么意思全称 Application Programming Interface 应用编程接口喜欢就喜欢吧我管不着.但 Ext 说了要改变这样的称呼于是 Ext 称之为 Core为什么呢因为 Ext 的底层在 Core 这个文件夹里面.core 是什么意思呢corekC:n.果核 中心 核心我觉得称底层为 Core 确实不错而且大写的 CORE 还有一个意思:CORECongress 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.BoxComponentbutton Ext.Buttoncolorpalette Ext.ColorPalettecomponent Ext.Componentcontainer Ext.Containercycle Ext.CycleButtondataview Ext.DataViewdatepicker Ext.DatePickereditor Ext.Editoreditorgrid Ext.grid.EditorGridPanelgrid Ext.grid.GridPanelpaging Ext.PagingToolbarpanel Ext.Panelprogress Ext.ProgressBarpropertygrid Ext.grid.PropertyGridslider Ext.Slidersplitbutton Ext.SplitButtonstatusbar Ext.StatusBartabpanel Ext.TabPaneltreepanel Ext.tree.TreePanelviewport Ext.Viewportwindow Ext.Window导航组件---------------------------------------toolbar Ext.Toolbartbbutton Ext.Toolbar.Buttontbfill Ext.Toolbar.Filltbitem Ext.Toolbar.Itemtbseparator Ext.Toolbar.Separatortbspacer Ext.Toolbar.Spacertbsplit Ext.Toolbar.SplitButtontbtext Ext.Toolbar.TextItem窗体组件---------------------------------------form Ext.FormPanelcheckbox Ext.form.Checkboxcombo Ext.form.ComboBoxdatefield Ext.form.DateFieldfield Ext.form.Fieldfieldset Ext.form.FieldSethidden Ext.form.Hiddenhtmleditor Ext.form.HtmlEditorlabel Ext.form.Labelnumberfield Ext.form.NumberFieldradio Ext.form.Radiotextarea Ext.form.TextAreatextfield Ext.form.TextFieldtimefield Ext.form.TimeFieldtrigger Ext.form.TriggerFieldExt 的每个组件都是有一个指定的 Xtype 属性值通过该值就可以得到该组件的类型同时也可以根据该组件来定义一个组件 例如:xtype:quotbuttonquotid:quotbtnEnterquottext:quot确定quot //这就是定义了一个按钮的组件.xtype:quotfieldquotid:quottxtNamequot //这就是定义了一个输入框的组件.xtype:quotfieldquotid:quottxtPwdquotinputType:quotpasswordquot //这就是定义了一个密码框的组件.当然你可以不用 xtype 比如:var btnEnter new Ext.Buttonid:quotbtnEnterquottext:quot确定quot //这就是定义了一个按钮的组件.var txtName new Ext.form.Textfieldid:quottxtNamequot //这就是定义了一个输入框的组件.var txtPwd new Ext.form.Textfieldid:quottxtPwdquotinputType:quotpasswordquot //这就是定义了一个密码框的组件.是不是很简单在下面会解说具体的示例包括它的基本的语法结构同时你需要明确这和你在 javascript 里面的用法不会有不同的地方只是有些方法 Ext 已经给我们封装好了我们只要有拿来主义的精神就可以.特别一说的是:Ext 的一些很实用的类都是全局的无须 new 了直接用就可以.在下节会介绍一些 Ext 的很好的很实用的也很简单就能够使用的 Util 类.第二篇精美的 Ext 式样的消息框.精美的消息框截图了感觉就像写书一样好难不过我有玩游戏的精神难亦易也.如果你看到了上文那么我想你手上现在应该有 Ext2.2 的文件了吧.这里再说一次所有的程序除非有说明则全部是以 2008 c.net 为前提虽然 Ext 不在乎你使用什么语言但我只会.net.好首先建立一个新的网站吧然后把你下载的 Ext2.2 文件复制到网站的任何一个目录里面在页面设置正确的路径即可.如下图所示:需要说明一点,以后所有的程序都不再罗列整个页面,只写出ltbodygtlt/bodygt之间的语句ltDOCTYPE html PUBLIC quot-//W3C//DTD XHTML 1.0 Transitional//ENquot quothttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquotgtlthtml xmlnsquothttp://www.w3.org/1999/xhtmlquot gtlthead runatquotserverquotgt lttitlegt无标题页lt/titlegt //下面是整个 Ext 框架所必备的文件除了中文映射老外不需要外 ltlink relquotStylesheetquot typequottext/cssquot hrefquot../ExtJS/resources/css/ext-all.cssquot /gt//样式文件 ltscript typequottext/javascriptquot srcquot../ExtJS/adapter/ext/ext-base.jsquotgtlt/scriptgt ltscript typequottext/javascriptquot srcquot../ExtJS/ext-all.jsquotgtlt/scriptgt ltscript typequottext/javascriptquot srcquot../ExtJS/ext-lang-zh_CN.jsquotgtlt/scriptgt //中文映射lt/headgtlt--这是一个
asp.net 的页面头部分.在里面输入正确访问 Ext 的路径.顺序更要注意哦而且绝对不可以颠倒.有了上面的正确的引用后我们就要开始实战演练了.好吧我们也是从 hello 世界 开始吧--gtltbodygt ltform idquotform1quot runatquotserverquotgt ltdivgt lt--既然 Ext 是基于 javascript 的,所以我们要把 Ext 的东东包裹在 javascript 里面--gt ltscript typequottext/javascriptquotgt //定义一个函数,在里面定义一个弹出按钮当网页上出现弹出按钮后点击就会出现 hello 世界了. function ready // 下面 openMs 就是出发事件后所执行的函数 var openMsg function //alertquotgoodquot比较下 ext 的弹出消息框是多么多么的令人狂喜 Ext.Msg.alertquot提示消息,可以自定义quotquothello 世界-hello 世界-hello 世界-hello 世界quot //定义 Ext 的按钮 var 弹出按钮 new Ext.Button id:quotbtnOpenquot //定义按钮的 ID text:quot弹出按钮quot //定义按钮的标题 handler:openMsg //定义按钮出发的事件,handler 后面直接写函数的名称 openMsg //也可以写成下面这样,本质是一样的,效果也是一样的 //handler:functionExt.Msg.alertquot提示消息,可以自定义quotquothello 世界-hello 世界-hello 世界-hello 世界quot renderTo:document.body//将弹出按钮渲染到窗体上 Ext.onReadyready//里面的参数就是上面定义的函数 //onReady 是使用 Ext 的入口只有在上面所说的 Ext 框架全部加载完成后才会执行 Ext.onReady 里面所包含的函数,就是说具体执行什么函数,由 Ext 的 onReady 方法指定. //当然 onReady 这个 Ext 方法总共有三个参数,为了力求简单,这里先使用一个参数,在提高篇里面则会详细讲解. lt/scriptgt lt/divgt lt/formgtlt/bodygtlt/htmlgt上面是一个完整的
asp.net 网页路径正确后就可以直接在页面显示出来.精美的消息框截图了另外,提一句,Ext 的所有消息框都封装在 Ext.Msg 类里面.第三篇常用的一些 Ext 方法在开始编写每个 Ext 的组件用法之前,先对自己在工作中常用的一些 Ext 方法总结出来.只罗列一些经常用到的,偶尔也会用到的仅仅说明下.Ext 框架把一些我们平时在工作经常遇到的情况封装成了方法,有兴趣的朋友读读它的源代码,会发现里面封装的语句和我们平时写的没有什么区别.提一句,它的源代码读起来真的是一种享受,虽然有很多地方我还看不懂,但,我觉得它的源代码确实是学习 javascript 的最好的教程.ext-all-debug.js 和 ext-core-debug.js 这两个文件是调试文件,非常清晰,假如我有2个月的时间休假,我是愿意把时间全部花在上面的.第一想说的方法想来想去,觉得还是再说一次 Ext 类的 onReady方法吧,它的作用就是指定当 Ext 类的全部框架全部加载完成后执行什么函数.具体执行什么函数就是它的参数.第一:Ext.getCmpquot对象 IDquot :该方法只有一个参数,就是组件的 ID说明:在执行下面的语句后,点击确定会弹出定义的 Ext 按钮的一些属性值,同时将原来的值由quot确定quot更改为quot取消quotltbodygt ltform idquotform1quot runatquotserverquotgt ltdivgt ltscript typequottext/javascriptquotgt function ready //这个函数的主要作用有两个: //一个获取定义的 buttonName 按钮。
有消息弹出结果 //另一个就是将 buttonName 按钮值由quot确定quot更改为quot取消quot var setText function //通过 getCmp 方法获取指定参数的对象,参数的值是某个已经在页面中初始化的 Ext 对象的 ID //getCmp方法只有一个参数,就是组件的 ID var btn Ext.getCmpquotbuttomIDquot //获取按钮 ID var id btn.id //获取按钮文本 var text btn.text //获取按钮类型 var type btn.type var result quot执行结果是:IDquotidquot textquottextquot typequottype Ext.Msg.alertquot提示消息quotresult //setText 是将按钮的文本重新设置为新的文本“取消” Ext.getCmpquotbuttomIDquot.setTextquot取消quot //定义一个按钮 出发事件后执行函数 setText var buttonName new Ext.Button id:quotbuttomIDquot text:quot确定quot renderTo:document.body handler:setText Ext.onReadyready lt/scriptgt lt/divgt lt/formgtlt/bodygt//第二: Ext.getBody//该方法等同于 document.body 呵呵 不用说了吧//以上是我经常使用的 2 个方法其他还有很多我都不喜欢用像:Ext.getquot一个参数quotExt.getDomquot一个参数quotExt.getDocquot不带参数quot就不一一介绍了第四篇Ext 中有两个很重要的方法一个是 decode一个是 encode.在述说这个例子之前,我假想你已经知道什么是 Json 数据了,那么在这里在温习一下吧:JSONJavaScript 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 字符串后生成的消息框具体看下示例吧lt Page LanguagequotCquot AutoEventWireupquottruequot CodeBehindquottestDecode.aspx.csquot InheritsquotTest.Example.hello.testDecodequot gtltDOCTYPE html PUBLIC quot-//W3C//DTD XHTML 1.0 Transitional//ENquot quothttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquotgtlthtml xmlnsquothttp://www.w3.org/1999/xhtmlquot gtlthead runatquotserverquotgt lttitlegt测试 Ext.decode和 Ext.encode方法lt/titlegt ltlink relquotStylesheetquot typequottext/cssquot hrefquothttp://www.cnblogs.com/ExtJS/resources/css/ext-all.cssquot /gt ltlink relquotStylesheetquot typequottext/cssquot hrefquothttp://www.cnblogs.com/ExtJS/resources/css/xtheme-purple.cssquot /gt ltscript typequottext/javascriptquot srcquothttp://www.cnblogs.com/ExtJS/adapter/ext/ext-base.jsquotgtlt/scriptgt ltscript typequottext/javascriptquot srcquothttp://www.cnblogs.com/ExtJS/ext-all.jsquotgtlt/scriptgt ltscript typequottext/javascriptquot srcquothttp://www.cnblogs.com/ExtJS/ext-lang-zh_CN.jsquotgtlt/scriptgtlt/headgtltbodygt ltform idquotform1quot runatquotserverquotgt ltdivgt ltscript typequottext/javascriptquotgtfunction ready //再用一个示例说明下如何使用 decode 和 encode,现在我们已经知道什么是 json 数据格式了,也知道它的作用和语法了 //现在我们就开始演练吧 //先使用 decode 方法,这个方法是将 json 字符串转换成对象的 //第一步:先定义一个 json 字符串吧 var 刘天王 quot姓名:刘德华性别:男老家:香港quot //第二步:现在我们要把刘天王转换成对象了 var who Ext.decode刘天王 //第三步:who 成了对象后就相当于是类的对象了,里面的姓名,性别,老家都成了 who 的属性了,现在知道怎么通过对象访问属性了吧 var name who.姓名 //获取 who 对象的姓名属性var sex who.性别 //获取 who 对象的性别属性var home who.老家 //获取 who 对象的老家属性//第四步:下面将获取的信息组合起来var result quot刘天王资料的信息:姓名是--quotname quot;性别--quotsexquot;老家--quothome//第五步:我们把获取的 who 对象的信息用弹出消息的方式显示出来吧Ext.Msg.alertquot刘天王的资料信息quotresult//以上就是将一个 json 字符串转换成对象后,再逐个访问对象的属性的示例//下面使用 encode 方法//encode 方法很简单了,就是将上面生成的 who 对象再转换成第一步定义的 json 字符串//定义一个到时间执行的函数.