Extjs+Grails教程系列2(Extjs组件大致介绍)
2013-04-30 17:45
169 查看
教程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。
本人建议:新手刚开始的话,可以接触FormPanel作为入手学习,等自己的FormPanel学得不错了,就可以迁移到更多的组件学习,毕竟,在现在的Web开发中,表单用的是最多的。
创建一个组件,通用的方法是跟java差不多,通过关键字new出来一个对象。比如一个按钮,可以这么写
上面一个简单的几行代码,就创建出来一个按钮对象,如果想创建其他不同的对象,都可以参照以上方式。在Extjs中,用xtype区分不同的组件,xtype就像各个组件类型的代号一样,比如定义xtype为button,那么组件将以button显示出来,如果定义xtype为form,那么组件将以表单组件显示。到后面的应用中,大家都会明白xtype的含义。
在Extjs中,所有的组件的xtype定义如下:
xtype属性的基本组件列表
xtype属性的表单组件列表
xtype属性的工具栏组件列表
如果跟着教程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 | 说 明 |
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 | 说 明 |
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你也就掌握差不多了。相关文章推荐
- Extjs+Grails教程系列1(Extjs环境搭配及HelloWorld程序)
- Hyper-V 2016 系列教程47 Windows Backup组件安装
- 自定义View系列教程01--常用工具介绍
- Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇
- ExtJS 学习系列(1)---介绍和环境安装
- ExtJS专题(二):ExtJS类库和组件介绍
- Android系列教程之GridView组件的使用
- 【易语言界面开发系列教程之(EX_UI使用系列教程--EX组件(一键换肤))】
- ExtJS教程----自定义下载组件
- web前端开发教程系列-1 - 前端开发编辑器介绍
- 介绍Extjs的formPanel (入门教程)
- Vmware vSphere 5.0系列教程之三 vCenter介绍及安装配置 推荐
- unity3d基础教程—组件介绍1
- 【稀饭】react native 实战系列教程之项目介绍
- ★★★【庖丁解牛:纵向切入Asp.net 3.5控件和组件开发技术系列—教程索引】★★★
- react系列(一)JSX语法、组件概念、生命周期介绍
- WPF入门教程系列五——Window 介绍
- WPF入门教程系列三——Application介绍(续)
- Unity+Vuforia SDKAR开发系列教程--1.1 AR技术介绍
- 【Apache Samza 系列】实时流数据处理框架Samza中文教程 (一)-- 介绍