【Asp.net精品源码栏目提醒】:网学会员--在 Asp.net精品源码编辑为广大网友搜集整理了:ExtJS与 NET结合开发实例 PDF - 技术总结绩等信息,祝愿广大网友取得需要的信息,参考学习。
基础篇 第一篇本节主要向大家介绍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.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: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.dtdquotgt lthtml xmlnsquothttp://www.w3.org/1999/xhtmlquot gt lthead 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/headgt lt--这是一个
asp.net的页面头部分.在里面输入正确访问Ext的路径.顺序更要注意哦而且绝对不可以颠倒. 有了上面的正确的引用后我们就要开始实战演练了. 好吧我们也是从 hello世界 开始吧--gt ltbodygt 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/formgt lt/bodygt lt/htmlgt 上面是一个完整的
asp.net网页路径正确后就可以直接在页面显示出来 精美的消息框截图了 另外提一句Ext的所有消息框都封装在Ext.Msg类里面 第三篇常用的一些Ext方法 在开始编写每个Ext的组件用法之前先对自己在工作中常用的一些Ext方法总结出来只罗列一些经常用到的偶尔也会用到的仅仅说明下Ext框架把一些我们平时在工作经常遇到的情况封装成了方法有兴趣的朋友读读它的源代码会发现里面封装的语句和我们平时写的没有什么区别提一句它的源代码读起来真的是一种享受虽然有很多地方我还看不懂但我觉得它的源代码确实是学习javascript的最好的教程ext-all-debug.js和ext-core-debug.js这两个文件是调试文件非常清晰假如我有个月的时间休假我是愿意把时间全部花在上面的 第一想说的方法想来想去觉得还是再说一次Ext类的onReady方法吧它的作用就是指定当Ext类的全部框架全部加载完成后执行什么函数具体执行什么函数就是它的参数 第一Ext.getCmpquot对象IDquot :该方法只有一个参数就是组件的 ID 说明在执行下面的语句后点击确定会弹出定义的Ext按钮的一些属性值同时将原来的值由quot确定quot更改为quot取消quot ltbodygt 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/formgt lt/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 gt ltDOCTYPE html PUBLIC quot-//W3C//DTD XHTML 1.0 Transitional//ENquot quothttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtdquotgt lthtml xmlnsquothttp://www.w3.org/1999/xhtmlquot gt lthead 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/scriptgt lt/headgt ltbodygt ltform idquotform1quot runatquotserverquotgt ltdivgt ltscript typequottext/javascriptquotgt function 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 h.