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

WBOY

發布： 2016-06-07 15:13:39

原創

1012 人瀏覽過

教程1补充：如果跟着教程1做完后，你肯定会既激动又纳闷，网页里面的脚本到底是什么意思？比如Ext.onReady(function(){...}) ; 这个Ext.onReady()意思就是只有在Ext框架全部加载完后才能在客户端的代码中使用Ext，而Ext的onReady正是在Ext框架及页面的html

教程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你也就掌握差不多了。