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文件复制到网站的任何一个目录里面,在页面设置正确的路径即可.如下图所示:
需要说明一点，以后所有的程序都不再罗列整个页面，只写出y>之间的语句 

    无标题页
    //下面是整个Ext框架所必备的文件,除了中文映射老外不需要外
    //样式文件

     //中文映射

<%--这是一个 的页面头部分.在里面输入正确访问Ext的路径.顺序更要注意哦,而且绝对不可以颠倒.
有了上面的正确的引用后,我们就要开始实战演练了.
好吧,我们也是从 hello世界 开始吧!--%>

    平时在工作经常遇到的情况封装成了方法，有兴趣的朋友读读它的源代码，会发现里面封装的语句和我们平时写的没有什么区别．提一句，它的源代码读起来真的是一种享受，虽然有很多地方我还看不懂，但，我觉得它的源代码确实是学习javascript的最好的教程．ext-all-debug.js和ext-core-debug.js这两个文件是调试文件，非常清晰，假如我有２个月的时间休假，我是愿意把时间全部花在上面的．
第一想说的方法想来想去，觉得还是再说一次Ext类的onReady()方法吧，它的作用就是指定当Ext类的全部框架全部加载完成后执行什么函数．具体执行什么函数就是它的参数． 
第一：Ext.getCmp("对象ID")　:该方法只有一个参数，就是组件的 ID
说明：在执行下面的语句后，点击确定会弹出定义的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" %>
sitional.dtd">

    测试Ext.decode()和Ext.encode()方法

    符串转换成对象后,通过对象访问属性生成的消息框

 //下面是将上面生成的对象又转换成json字符串后生成的消息框

第五篇,Ext.util.Format类
Ext.util.Format类是Ext对数据进行格式化操作的一个类,这篇会把所有的方法都讲解下,因为每个方法都会用到.因为每个方法都和我们用到的服务器端语言中所常用到的方法一样,看了名称就知道什么意思.这里我会把Ext封装起来的源代码复制出来,看了之后就能够更加理解它的方法的意义了.
 关于我们      便捷服务       自信AI       AI导航        抽奖活动©2010-2025 宁波自信网络信息技术有限公司  版权所有客服电话：4009-655-100  投诉/维权电话：[phone]浙公网安备33021202000488号   浙ICP备2021020529号-1  |  浙B2-20240490  关注我们 ：