ExtJs入门(适合新手).ppt

EXT Js 系列精品课件,Ext JS框架入门培训 2011.08.11,EXT Js 系列精品课件,一、 Ext Js 简 介 二、 Ext Js类库 三、 Ext Js基础组件 四、 ExtJs布局,Ext Js 简 介,什么是ext？ Ext是一个Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。 Ext是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中。 Ext最新版本是ext4.0,Ext Js 简 介,界面示例一,Ext Js 简 介,界面示例二,Ext Js 简 介,获得ExtJS 要使用ExtJS，那么首先要得到ExtJS 库文件，该框架是一个开源的，可以直接从官方 网站下载，地址： 最新版本为Ext JS 4.0.2a (收费)，3.0及以前版本不收费。,Ext Js 简 介,ExtJs发布包目录:,Ext Js 简 介,adapter：负责将里面提供第三方底层库（包括Ext 自带的底层库）映射为Ext 所支持的底层库。 air： Ext对基于Air可视化编辑器的支持。 build： 压缩后的ext 全部源码(里面分类存放)。 docs： API 帮助文档。 exmaples：提供使用ExtJs 技术做出的小实例。 package：Ext提供常用控件。 resources：Ext UI 资源文件目录，如CSS、图片文件都存放在这里面。 source： 无压缩Ext 全部的源码(里面分类存放) 遵从Lesser GNU （LGPL） 开源的协议。,Ext Js 简 介,Ext-all.js：压缩后的Ext 全部源码。 ext-all-debug.js：无压缩的Ext 全部的源码(用于调试)。 ext-core.js：压缩后的Ext 的核心组件，包括sources/core 下的所有类。 ext-core-debug.js：无压缩Ext 的核心组件，包括sources/core 下的所有类。,Ext Js 简 介,EXT API参考手册,Ext Js 简 介, ExtJS Ext.onReady(function() Ext.MessageBox.alert(“hello“,“Hello,easyjf open source“); ); ,ExtJs代码示例（HelloWorld）:,Ext Js 简 介,hello.html页面效果,Ext Js 简 介,EXTJs 比其他JS框架的优势：,EXT Js 系列精品课件,一、 Ext Js 简 介 二、 Ext Js类库 三、 Ext Js基础组件 四、 ExtJs布局,Ext Js类库,ExtJS 由一系列的类库组成，一旦页面成功加载了ExtJS 库后，我们就可以在页面中调用ExtJS 的类及控件来实现需要的功能。ExtJS 的类库由以下几部分组成： 底层API(core) 控件(widgets) 实用工具(Utils),Ext Js类库,底层API(core)：底层API 中提供了对DOM 操作、查询的封装、事件处理、DOM 查询器等基础的功能。其它控件都是建立在这些底层api 的基础上，底层api 位于源代码目录的core 子目录中，包括DomHelper.js、Element.js 等文件。,Ext Js类库,控件(widgets)：控件是指可以直接在页面中创建的可视化组件，比如面板、选项板、表格、树、窗口、菜单、工具栏、按钮等等，在我们的应用程序中可以直接通过应用这些控件来实现友好、交互性强的应用程序的UI。控件位于源代码目录的widgets 子目录中。,Ext Js类库,实用工具Utils：Ext 提供了很多的实用工具，可以方便我们实现如数据内容格式化、JSON数据解码或反解码、对Date、Array、发送Ajax 请求、Cookie 管理、CSS 管理等扩展等功能。,EXT Js 系列精品课件,一、 Ext Js 简 介 二、 Ext Js类库 三、 Ext Js基础组件 四、 ExtJs布局,Ext Js基础组件,Ext组件简介 Ext2.0对整个框架进行了重构，最为杰出的是推出了一个以Component类为基础的组件体系，在Component类基础上，使用面向对象的方法，设计了一系列的组件及控件。因此，要能游刃有余地使用Ext，熟悉Ext组件体系是最基本的。 通过组件结构图我们可以一目了然的看出整个Ext组件继承及组成体系，当使用一个组件的时间，了解他的继承体系，这样可以便于我们掌握组件的各种特性,Ext Js基础组件,Ext Js基础组件,Ext Js基础组件,Ext Js基础组件,Ext Js基础组件,Ext.FormPanel,EXT核心组件应用,Ext.tree.TreePanel,Ext.Window,toolBar and Menus,Ext界面中的布局,Ext.grid.GridPanel,Record 、 Store 、 DataProxy、DataReader,辅助函数,Ext Js基础组件,组件可以直接通过new 关键子来创建，比如控件一个窗口，使用new Ext.Window()，创建一个表格则使用new Ext.GridPanel()。当然，除了一些普通的组件以外，一般都会在构造函数中通过传递构造参数来创建组件。 组件的构造函数中一般都可以包含一个对象，这个对象包含创建组件所需要的配置属性及值，组件根据构造函数中的参数属性值来初始化组件。,Ext Js基础组件,一个简单的FormPanel效果图,Ext Js基础组件,var simple = new Ext.FormPanel( labelWidth: 75, frame:true, url:saveForm.do, title: Simple Form, bodyStyle:padding:5px 5px 0, width: 350, defaults: width: 230,defaultType: textfield, items: fieldLabel: First Name,name: first,allowBlank:false, fieldLabel: Company,name: company, fieldLabel: Email,name: email,vtype:email, new Ext.form.TimeField( fieldLabel: Time,name: time, minValue: 8:00am,maxValue: 6:00pm) , buttons: text: Save,text: Cancel );,一个简单的FormPanel代码,Ext Js基础组件,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.VTypes,Ext Js基础组件,toolBar是用来存放功能按钮的容器 toolBar中可以放置所有的FormPanel中的控件 toolBar可以放置在formPanel,panel,gridPanel,treePanel等容器中 示例效果图,toolBar and Menus,Ext Js基础组件,Ext.tree.TreePanel Tree是用来显示树形数据的，效果图如下,Ext Js基础组件,Ext.tree.TreePanel 代码实现定义根节点： Var root = new Ext.tree.AsyncTreeNode( id : 0, text : 未分配权限, expanded: true );,Ext Js基础组件,Ext.tree.TreePanel 代码实现定义树的数据源 Var store = new Ext.tree.TreeLoader( dataUrl : loadTreeNode.do );,Ext Js基础组件,Ext.tree.TreePanel 代码实现定义树 var tree = new Ext.tree.TreePanel( rootVisible : true, autoScroll:true, loader : store, enableDD:true, containerScroll: true, dropConfig: appendOnly:true, root : root );,var tree = new Ext.tree.TreePanel( rootVisible : true, autoScroll:true, loader : new Ext.tree.TreeLoader( dataUrl : loadTreeNode.do ), enableDD:true, containerScroll: true, dropConfig: appendOnly:true, root : new Ext.tree.AsyncTreeNode( id : 0, text : 未分配权限, expanded: true ) );,Ext Js基础组件,Ext.Window 其本身也是一个容器，可以放置所有的EXT控件 主要是用来处理弹出式窗口的,var win=new Ext.Window( id:w, title:lyr:新窗口,/窗口显示名称 width:300, height:140, collapsible: true,/是否可折叠 layout : column,/布局方式 model:true, items:/窗口需要增加的内容 ).show();/让窗口显示出来,Ext Js基础组件,Ext.grid.GridPanel GridPanel是用来显示数据，并且支持分页 效果图,Ext Js基础组件,Ext.grid.GridPanel 数据的显示非常简单： HTML文件： JS： var grid = new Ext.grid.GridPanel( el: grid, /renderTo: myPanel ds: ds,/Stroe数据源 cm: cm/columnModle 大家可以理解为表头 ); grid.render();,Ext Js基础组件,Ext.grid.GridPanel 首先，一个表格应该有列定义，即定义表头ColumnModel： / 定义一个ColumnModel，表头中有四列 var cm = new Ext.grid.ColumnModel( header:编号,dataIndex:id, header:性别,dataIndex:sex, header:名称,dataIndex:name, header:描述,dataIndex:descn ); cm.defaultSortable = true; 该ColumnModel定义了表格的四个列，其每列的名称和对应的数据键。请注意defaultSortable属性，即为每个列都安上一个可以排序的功能。如果只想某些列举有该功能，可以设置： header:编号,dataIndex:id,Sortable:true,Ext Js基础组件,如何在表格中添加CheckBox呢？ var sm = new Ext.grid.CheckboxSelectionModel(); var cm = new Ext.grid.ColumnModel( new Ext.grid.RowNumberer(),/自动行号 sm,/添加的地方 header:编号,dataIndex:id, header:性别,dataIndex:sex, header:名称,dataIndex:name, header:描述,dataIndex:descn ); var grid = new Ext.grid.GridPanel( el: grid3, ds: ds, cm: cm, sm: sm,/添加的地方 title: HelloWorld );,EXT Js 系列精品课件,一、 Ext Js 简 介 二、 Ext Js类库 三、 Ext Js基础组件 四、 Ext Js布局,Ext Js布局,Ext.layout.Accordion,Ext.layout.FitLayout,Ext.layout.CardLayout,Ext.layout.ColumnLayout,Ext.layout.BorderLayout,Ext.layout.FormLayout,Ext.layout.TableLayout,EXT页面布局:,Ext Js布局,Ext中布局的方式- Ext.layout.Accordion 由类Ext.layout.Accordion定义，名称为accordion，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式,Accordion布局,在布局中配置不同的参数，会展示出不同的效果。 如：animate为true，表示在执行展开折叠时是否应用动画效果。 activeOnTop为true,表示在点击每一个子元素的头部名称或右边的按钮，则会展开该面板，收缩其它已经展开的面板，并将点击的那个面板置于顶部显示。 具体的各个控件的动作和效果大家可以参考API,Ext Js布局,Ext中布局的方式- Ext.layout.BorderLayout 由类Ext.layout.BorderLayout定义，布局名称为border。该布局把容器分成东南西北中五个区域，分别由east，south, west，north, center来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置,BorderLayout布局,Ext Js布局,Ext中布局的方式-Ext.layout.CardLayout (选项卡) 由Ext.layout.CardLayout类定义，名称为card，该布局将会在容器组件中某一时刻使得只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求,CardLayout布局,var card = new Ext.Panel( layout : “card“, activeItem : activeCard, layoutOnTabChange: true, width : 640, layoutConfig : animate : true, items : height: 250,layout : fit,items : diseaseWQZInfo, height: 250,layout : fit,items : diseaseYQZInfo );,Ext Js布局,ColumnLayout布局,Ext中布局的方式- Ext.layout.ColumnLayout 由Ext.layout.ColumnLayout类定义，名称为column。列布局把整个容器组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度，而width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。,Ext Js布局,Ext中布局的方式-Ext.layout.FitLayout 由Ext.layout. FitLayout类定义，名称为fit。填充布局方式是把容器中的子元素覆盖容器的整个区域,FitLayout布局,Ext Js布局,Ext中布局的方式-Ext.layout.FormLayout 这种布局方式由类Ext.layout.FormLayout提供，定义的名称为form。一般情况只用于formPanel的布局，把formPanel中的各子元素按每行一列的方式进行布局显示。,FormLayout布局,Ext Js布局,Ext中布局的方式-Ext.layout.TableLayout -这种布局方式由类Ext.layout. TableLayout提供，定义的名称为table。一般情况不采用这种布局方式，因为其不能自适合屏幕或其父容器的宽度和高度,TableLayout布局,Ext Js布局,界面布局的综合应用,EXT Js 系列精品课件,谢谢大家！,