Extjs+Grails教程系列2（Extjs组件大致介绍）

教程1补充：

如果跟着教程1做完后，你肯定会既激动又纳闷，网页里面的脚本到底是什么意思？比如Ext.onReady(function(){...}) ;

这个Ext.onReady()意思就是只有在Ext框架全部加载完后才能在客户端的代码中使用Ext，而Ext的onReady正是在Ext框架及页面的html代码加载完后用来注册所要执行的函数。

具体参考信息的话，大家可以参考这里：

1：http://book.51cto.com/art/201003/191905.htm

2：http://dujuntian.blog.163.com/blog/static/2837755420103160461840/

写到这里，我说几句废话：本人写这些博客，一来是让新手快速上手，因为这些文章是我学了历程的体现，大家可以参考，二来给自己做个总结，至于理解，可以在后面学习深入情况下，慢慢加深。我在公司做Ext，刚开始也是短时间就让做出界面，至于理解，也是模模糊糊的，我也是参考例子给一点一点摸索出来，后来等自己学得差不多的时候再回头去看，觉得Extjs真的并没有想象的那么恐怖，知识如果之前从来没接触过的话，刚开始学习坡度确实陡了点。还好，只要大家坚持，2个礼拜，基本都能很熟悉Extjs。

2.1Extjs组件简介

    Ext JS还设计了良好的组件体系，组件大致可以分成三大类，即基本组件、工具栏组件、表单及元素组件。

    本人建议：新手刚开始的话，可以接触FormPanel作为入手学习，等自己的FormPanel学得不错了，就可以迁移到更多的组件学习，毕竟，在现在的Web开发中，表单用的是最多的。

    创建一个组件，通用的方法是跟java差不多，通过关键字new出来一个对象。比如一个按钮，可以这么写

Ext.onReady(function(){
	var oTestButton = new Ext.Button({
		//以下是配置信息
		renderTo:Ext.getBody() ,//渲染到网页上面
		text:'这是按钮上的文字',//按钮文字
		handler:function(){
			alert('点击按钮就会调用我') ;
		}//这个是点击按钮激发的事件,handler只对按钮起作用
	}) ;
}) ;

  上面一个简单的几行代码，就创建出来一个按钮对象，如果想创建其他不同的对象，都可以参照以上方式。在Extjs中，用xtype区分不同的组件，xtype就像各个组件类型的代号一样，比如定义xtype为button，那么组件将以button显示出来，如果定义xtype为form，那么组件将以表单组件显示。 到后面的应用中，大家都会明白xtype的含义。

    在Extjs中，所有的组件的xtype定义如下：
    xtype属性的基本组件列表

xtype	说     明
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 ，进度条
splitbutton	Ext.SplitButton ，可分裂的按钮
tabpanel	Ext.TabPanel ，选项面板
treepanel	Ext.tree.TreePanel ，树
viewport	Ext.ViewPort ，视图
window	Ext.Window ，窗口

xtype属性的表单组件列表

xtype	说     明
form	Ext.FormPanel ， Form 面板
checkbox	Ext.form.Checkbox ， checkbox 录入框
combo	Ext.form.ComboBox ， combo 选择项
datefield	Ext.form.DateField ，日期选择项
field	Ext.form.Field ，表单字段
fieldset	Ext.form.FieldSet ，表单字段组
hidden	Ext.form.Hidden ，表单隐藏域
htmleditor	Ext.form.HtmlEditor ， html 编辑器
numberfield	Ext.form.NumberField ，数字编辑器
radio	Ext.form.Radio ，单选按钮
textarea	Ext.form.TextArea ，区域文本框
textfield	Ext.form.TextField ，表单文本框
timefield	Ext.form.TimeField ，时间录入项
trigger	Ext.form.TriggerField ，触发录入项

xtype属性的工具栏组件列表

xtype	说     明
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 ，工具栏文本项

 

2.2Extjs组件的应用

其实，在Extjs提供的API里面，还有Extjs提供的Example里面，已经有很多的例子了，大家参考下例子，对应着API各个组件的属性，方法，应该都是可以慢慢摸索出来的，我学习的历程，几乎就是摸索Example代码的过程，把Example看差不多了，Extjs你也就掌握差不多了。