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

教程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属性的表单组件列表

xtype属性的工具栏组件列表

2.2Extjs组件的应用

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