EXTJS学习系列基础篇:第一篇(转载)作者殷良胜
基础篇:第一篇,本节主要向大家介绍Ext的最基础的话题
朋友问我,Ext怎么学习,我记得自己学的时候纯纯因为它的简单和视觉效果特别好,因为喜欢了才有努力的坚持不懈的激情.有朋友说能否写点简单的示例方便入门,我是觉得自己写的都是很浅陋东西,实在不知道怎么简单了,昨天晚上想了许久,觉得自己还是无比的粗浅,但依然有人说看不懂,我想可能是言语没有说清楚,或者你在等到天上掉馅饼吧.因为,我觉得开始学习就是不断的模仿,只要知道它的大致概念,在自己的项目中不断的接触,一天一天就会成长起来,建议最好根据自己的学习进度写个小网站,将所学的知识融会贯通一下,就像我写了好几个Ext的网站,虽然暂时都没有发布出去,但自己经常看看也是对自己的工作的激励吧.接下来一段日子,尽量写一些Ext2.2所有的对象的最简单的用法.如果能够坚持,以后会写一个对应的提高系列.
下面就开始Ext之旅吧
Ext是什么?
答曰:Ext是一个用jscript(javascript)所写的一个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层,是的,有的,有些人总是喜欢称底层是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了,直接用就可以.
