extjs基础篇.docx
《extjs基础篇.docx》由会员分享，可在线阅读，更多相关《extjs基础篇.docx（47页珍藏版）》请在冰豆网上搜索。
extjs基础篇
【原】基础篇:
第一篇,本节主要向大家介绍Ext的最基础的话题
ExtJS是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web应用程序界面。
ExtJS可以用来开发RIA也即富客户端的AJAX应用ExtJS是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。
因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。
ExtJs最开始基于YUI技术，由开发人员JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从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是什么意思,全称ApplicationProgrammingInterface应用编程接口）,喜欢就喜欢吧,我管不着.但Ext说了,要改变这样的称呼,于是Ext称之为Core,为什么呢?
因为Ext的底层在Core这个文件夹里面.core是什么意思呢?
core[kC:
]n.果核,中心,核心,我觉得称底层为Core确实不错,而且大写的CORE还有一个意思:
CORE=CongressofRacialEquality争取种族平等大会.感觉Ext的作者JackSlocum是具有很浓烈的浪漫主义情怀的追求完美的一个程序员.说到Core了:
core对Ext的DoM操作,事件处理以及所有的直接在页面上可以展示的和不可以展示的组件等提供了基础的功能.刚刚提到可显示的控件也叫组件,我们在程序中可以直接通过这些控件来实现非常友好,并且交互性也很好的应用.特别一提的是在那些不可见的组件中,有一个utils类,该类提供了很多的很实用的功能,可以方便实现对接收和发送的数据进行各种操作,实在是Ext框架不可或缺的一部分.
如何介绍Ext的组件呢?
答曰:
这个问题我确实想了很长时间,因为像很多软件的帮助教程一样,它们总是把该软件的所有功能都罗列出来,然后再逐个详解,甚至很多功能可能你都从来都不需要,但你并不知道自己是否需要,就像最近在学习flash,总感到自己有茫然不知所措的感觉,学习的态度都会转变.但,也不能够说人家的帮助教程不好呀,毕竟是追求完整性和可用性方面,每个人的见解并不一样.好吧,我下定决心了.先简单把组件说下,然后对这些组件再详细解说加示例,而且每个示例都追求可用和简单,将来再写一个深入的就能够达到完整性,倒不是说一定要追求完整,而是,如果你仅仅写了入门,却没有提高的版本,感觉自己并没有把事情做好做完整,毕竟人人都希望有始有终呀.毕竟自己还想早点介绍点关于Flex的故事呢,唉,总是没有时间.
Ext的组件有哪些呢?
答曰:
Everycomponenthasaspecificxtype,whichisitsExt-specifictypename,alongwithmethodsforcheckingthextypelikegetXTypeandisXType.下面就是这些可以使用了控件的列表了,我直接从它的帮助文档复制过来,并同时加上了它的英文原文,因为每次看到这段我总是能够想起什么,呵呵:
Ext组件主要包括一些常用组件,如表单组件,数据组件,导航组件,相信大家看名称就知道什么意思了.
xtypeClass
基本组件---------------------------------------
boxExt.BoxComponent
buttonExt.Button
colorpaletteExt.ColorPalette
componentExt.Component
containerExt.Container
cycleExt.CycleButton
dataviewExt.DataView
datepickerExt.DatePicker
editorExt.Editor
editorgridExt.grid.EditorGridPanel
gridExt.grid.GridPanel
pagingExt.PagingToolbar
panelExt.Panel
progressExt.ProgressBar
propertygridExt.grid.PropertyGrid
sliderExt.Slider
splitbuttonExt.SplitButton
statusbarExt.StatusBar
tabpanelExt.TabPanel
treepanelExt.tree.TreePanel
viewportExt.Viewport
windowExt.Window
导航组件---------------------------------------
toolbarExt.Toolbar
tbbuttonExt.Toolbar.Button
tbfillExt.Toolbar.Fill
tbitemExt.Toolbar.Item
tbseparatorExt.Toolbar.Separator
tbspacerExt.Toolbar.Spacer
tbsplitExt.Toolbar.SplitButton
tbtextExt.Toolbar.TextItem
窗体组件---------------------------------------
formExt.FormPanel
checkboxExt.form.Checkbox
comboExt.form.ComboBox
datefieldExt.form.DateField
fieldExt.form.Field
fieldsetExt.form.FieldSet
hiddenExt.form.Hidden
htmleditorExt.form.HtmlEditor
labelExt.form.Label
numberfieldExt.form.NumberField
radioExt.form.Radio
textareaExt.form.TextArea
textfieldExt.form.TextField
timefieldExt.form.TimeField
triggerExt.form.TriggerField
Ext的每个组件都是有一个指定的Xtype属性值,通过该值就可以得到该组件的类型,同时也可以根据该组件来定义一个组件例如:
{xtype:
"button",id:
"btnEnter",text:
"确定"}//这就是定义了一个按钮的组件.
{xtype:
"field",id:
"txtName"}//这就是定义了一个输入框的组件.
{xtype:
"field",id:
"txtPwd",inputType:
"password"}//这就是定义了一个密码框的组件.
当然你可以不用xtype比如:
varbtnEnter=newExt.Button（{id:
"btnEnter",text:
"确定"}）;//这就是定义了一个按钮的组件.
vartxtName=newExt.form.Textfield（{id:
"txtName"}）;//这就是定义了一个输入框的组件.
vartxtPwd=newExt.form.Textfield（{id:
"txtPwd",inputType:
"password"}）;//这就是定义了一个密码框的组件.
是不是很简单,在下面会解说具体的示例,包括它的基本的语法结构,同时,你需要明确,这和你在javascript里面的用法不会有不同的地方,只是有些方法Ext已经给我们封装好了,我们只要有拿来主义的精神就可以.特别一说的是:
Ext的一些很实用的类都是全局的,无须new了,直接用就可以.
在下节会介绍一些Ext的很好的很实用的也很简单就能够使用的Util类.
【原】基础篇:
第二篇,精美的Ext式样的消息框．
精美的消息框截图了
感觉就像写书一样,好难,不过我有玩游戏的精神,难亦易也.
如果你看到了上文,那么我想你手上现在应该有Ext2.2的文件了吧.
这里再说一次,所有的程序除非有说明,则全部是以2008c#.net为前提,虽然Ext不在乎你使用什么语言,但我只会.net.
好,首先建立一个新的网站吧,然后把你下载的Ext2.2文件复制到网站的任何一个目录里面,在页面设置正确的路径即可.如下图所示:
需要说明一点，以后所有的程序都不再罗列整个页面，只写出
之间的语句
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
无标题页
//下面是整个Ext框架所必备的文件,除了中文映射老外不需要外
//样式文件
//中文映射
<%--这是一个的页面头部分.在里面输入正确访问Ext的路径.顺序更要注意哦,而且绝对不可以颠倒.
有了上面的正确的引用后,我们就要开始实战演练了.
好吧,我们也是从hello世界开始吧!
--%>
<%--既然Ext是基于javascript的，所以我们要把Ext的东东包裹在javascript里面--%>
//定义一个函数，在里面定义一个弹出按钮,当网页上出现弹出按钮后,点击就会出现hello世界了.
functionready（）
{
//下面openMs就是出发事件后所执行的函数
varopenMsg=function（）
{
//alert（"good"）;比较下ext的弹出消息框是多么多么的令人狂喜
Ext.Msg.alert（"提示消息，可以自定义","hello世界-hello世界-hello世界-hello世界"）;
};
//定义Ext的按钮
var弹出按钮=newExt.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方法总共有三个参数，为了力求简单，这里先使用一个参数，在提高篇里面则会详细讲解．