ExtJs入门(适合新手)

EXTJS系列精品课件ExtJS框架入门培训2011.08.11EXTJS系列精品课件一、ExtJs简介二、ExtJs类库三、ExtJs基础组件四、ExtJs布局EXTJS简介什么是ext？Ext是一个Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。Ext是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中。Ext最新版本是ext4.0EXTJS简介界面示例一EXTJS简介界面示例二EXTJS简介获得ExtJS要使用ExtJS，那么首先要得到ExtJS库文件，该框架是一个开源的，可以直接从官方网站下载，地址：://最新版本为ExtJS4.0.2a(收费)，3.0及以前版本不收费。EXTJS简介ExtJs发布包目录:EXTJS简介adapter：负责将里面提供第三方底层库（包括Ext自带的底层库）映射为Ext所支持的底层库。air：Ext对基于Air可视化编辑器的支持。build：压缩后的ext全部源码(里面分类存放)。docs：API帮助文档。exmaples：提供使用ExtJs技术做出的小实例。package：Ext提供常用控件。resources：ExtUI资源文件目录，如CSS、图片文件都存放在这里面。source：无压缩Ext全部的源码(里面分类存放)遵从LesserGNU（LGPL）开源的协议。EXTJS简介Ext-all.js：压缩后的Ext全部源码。ext-all-debug.js：无压缩的Ext全部的源码(用于调试)。ext-core.js：压缩后的Ext的核心组件，包括sources/core下的所有类。ext-core-debug.js：无压缩Ext的核心组件，包括sources/core下的所有类。EXTJS简介EXTAPI参考手册EXTJS简介htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=utf-8/titleExtJS/titlelinkrel=stylesheettype=text/csshref=extjs/resources/css/ext-all.css/scripttype=text/javascriptsrc=extjs/adapter/ext/ext-base.js/scriptscripttype=text/javascriptsrc=extjs/ext-all.js/scriptscriptExt.onReady(function(){Ext.MessageBox.alert(hello,Hello,easyjfopensource);});/script/headbody/body/htmlExtJs代码示例（HelloWorld）:EXTJS简介hello.html页面效果EXTJS简介EXTJs比其他JS框架的优势：EXTJS系列精品课件一、ExtJs简介二、ExtJs类库三、ExtJs基础组件四、ExtJs布局EXTJS类库ExtJS由一系列的类库组成，一旦页面成功加载了ExtJS库后，我们就可以在页面中调用ExtJS的类及控件来实现需要的功能。ExtJS的类库由以下几部分组成：底层API(core)控件(widgets)实用工具(Utils)EXTJS类库底层API(core)：底层API中提供了对DOM操作、查询的封装、事件处理、DOM查询器等基础的功能。其它控件都是建立在这些底层api的基础上，底层api位于源代码目录的core子目录中，包括DomHelper.js、Element.js等文件。EXTJS类库控件(widgets)：控件是指可以直接在页面中创建的可视化组件，比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI。控件位于源代码目录的widgets子目录中。EXTJS类库实用工具Utils：Ext提供了很多的实用工具，可以方便我们实现如数据内容格式化、JSON数据解码或反解码、对Date、Array、发送Ajax请求、Cookie管理、CSS管理等扩展等功能。EXTJS系列精品课件一、ExtJs简介二、ExtJs类库三、ExtJs基础组件四、ExtJs布局EXTJS基础组件Ext组件简介Ext2.0对整个框架进行了重构，最为杰出的是推出了一个以Component类为基础的组件体系，在Component类基础上，使用面向对象的方法，设计了一系列的组件及控件。因此，要能游刃有余地使用Ext，熟悉Ext组件体系是最基本的。通过组件结构图我们可以一目了然的看出整个Ext组件继承及组成体系，当使用一个组件的时间，了解他的继承体系，这样可以便于我们掌握组件的各种特性EXTJS基础组件EXTJS基础组件EXTJS基础组件EXTJS基础组件EXTJS基础组件Ext.FormPanelEXT核心组件应用Ext.tree.TreePanelExt.WindowtoolBarandMenusExt界面中的布局Ext.grid.GridPanelRecord、Store、DataProxy、DataReader辅助函数EXTJS基础组件组件可以直接通过new关键子来创建，比如控件一个窗口，使用newExt.Window()，创建一个表格则使用newExt.GridPanel()。当然，除了一些普通的组件以外，一般都会在构造函数中通过传递构造参数来创建组件。组件的构造函数中一般都可以包含一个对象，这个对象包含创建组件所需要的配置属性及值，组件根据构造函数中的参数属性值来初始化组件。EXTJS基础组件一个简单的FormPanel效果图EXTJS基础组件varsimple=newExt.FormPanel({labelWidth:75,frame:true,url:'saveForm.do',title:'SimpleForm',bodyStyle:'padding:5px5px0',width:350,defaults:{width:230},defaultType:'textfield',items:[{fieldLabel:'FirstName',name:'first',allowBlank:false},{fieldLabel:'Company',name:'company'},{fieldLabel:'Email',name:'email',vtype:'email'},newExt.form.TimeField({fieldLabel:'Time',name:'time',minValue:'8:00am',maxValue:'6:00pm'})],buttons:[{text:'Save'},{text:'Cancel'}]});一个简单的FormPanel代码EXTJS基础组件Ext.FormPanel中的数据控件Ext.form.Checkbox,Ext.form.CheckboxGroupExt.form.ComboBoxExt.form.DateFieldExt.form.HtmlEditorExt.form.NumberFieldExt.form.Radio,Ext.form.RadioGroupExt.form.TextAreaExt.form.TextFieldExt.form.TimeFieldExt.form.VTypesEXTJS基础组件toolBar是用来存放功能按钮的容器toolBar中可以放置所有的FormPanel中的控件toolBar可以放置在formPanel,panel,gridPanel,treePanel等容器中示例效果图toolBarandMenusEXTJS基础组件Ext.tree.TreePanelTree是用来显示树形数据的，效果图如下EXTJS基础组件Ext.tree.TreePanel代码实现—定义根节点：Varroot=newExt.tree.AsyncTreeNode({id:'0',text:'未分配权限',expanded:true});EXTJS基础组件Ext.tree.TreePanel代码实现—定义树的数据源Varstore=newExt.tree.TreeLoader({dataUrl:‘loadTreeNode.do’});EXTJS基础组件Ext.tree.TreePanel代码实现—定义树vartree=newExt.tree.TreePanel({rootVisible:true,autoScroll:true,loader:store,enableDD:true,containerScroll:true,dropConfig:{appendOnly:true},root:root});vartree=newExt.tree.TreePanel({rootVisible:true,autoScroll:true,loader:newExt.tree.TreeLoader({dataUrl:‘loadTreeNode.do’}),enableDD:true,containerScroll:true,dropConfig:{appendOnly:true},root:newExt.tree.AsyncTreeNode({id:'0',text:'未分配权限',expanded:true})});EXTJS基础组件Ext.Window其本身也是一个容器，可以放置所有的EXT控件主要是用来处理弹出式窗口的varwin=newExt.Window({id:'w',title:‘lyr:新窗口',//窗口显示名称width:300,height:140,collapsible:true,//是否可折叠layout:‘column’,//布局方式model:true,items:[]//窗口需要增加的内容}).show();//让窗口显示出来EXTJS基础组件Ext.grid.GridPanelGridPanel是用来显示数据，并且支持分页效果图EXTJS基础组件Ext.grid.GridPanel数据的显示非常简单：HTML文件：divid='grid'/divJS：vargrid=newExt.grid.GridPanel({el:‘grid’,//renderTo:‘myPanel’ds:ds,//Stroe数据源cm:cm//columnModle大家可以理解为表头});grid.render();EXTJS基础组件Ext.grid.GridPanel首先，一个表格应该有列定义，即定义表头ColumnModel：//定义一个ColumnModel，表头中有四列varcm=newExt.grid.ColumnModel([{header:'编号',dataIndex:'id'},{header:'性别',dataIndex:'sex'},{header:'名称',dataIndex:'name'},{header:'描述',dataIndex:'descn'}]);cm.defaultSortable=true;该ColumnModel定义了表格的四个列，其每列的名称和对应的数据键。请注意defaultSortable属性，即为每个列都安上一个可以排序的功能。如果只想某些列举有该功能，可以设置：{header:'编号',dataIndex:'id',Sortable:true