• 1. Extjs4分享手册谢立 2012-5-4
  • 2. Extjs文件包ext-all.js:包含所有的Extjs框架文件 ext.js:只包含能运行Extjs的基础文件 ext-all-debug.js:ext-all.js文件的未混淆版本 ext-debug.js:ext.js文件的未混淆版本 ext-all-dev.js:ext-all.js文件的未混淆版本并包含调试信息 ext-dev.js:ext.js文件的未混淆版本并包含调试信息 bootstrap.js:自动加载ext-all.js文件或者ext-all-dev.js文件
  • 3. docs文件夹:Ext.js文档 examples文件夹:Extjs组件实例 resources文件夹:Extjs样式文件 src文件夹:Extjs组件源代码 locale文件夹:本地化文件
  • 4. ExtjsAPI
  • 5. (本页无文本内容)
  • 6. 必须了解的Extjs方法一、Ext.define 说明:创建一个类 可配属性: extend:继承其他的类 mixins:将其他类融入当前的类,类似于多继承 constructor:构造函数 statics:静态属性或者方法 二、Ext.create 说明:实例化类
  • 7. 三、Ext.apply 说明:将原对象的所有属性和方法复制到目标对象 四、Ext.applyIf 说明:将原对象的所有目标对象中未包含的属性和方法复制到目标对象 五、Ext.Array.each 说明:遍历数组,类似于for(var x in array) 六、Ext.require 说明:请求后台的js文件,类似于C#的using关键字 七、Ext.onReady 说明:在文档上下文加载以后再执行onReady中包含的js文件,类似于jQuery中的Ready方法 八、Ext.util.Format 说明:格式化数据扩展包 九、Ext.isEmpty 说明:判断数据是否为空,类似于C#的string.isNullorEmpty
  • 8. Extjs选择器在EXT框架中,一个组件有3种状态:html控件、Ext元素、Ext组件。他们的关系如下: 获取html控件方法:Ext.getDom(id)/Ext.query(CSS选择器) 获取Ext元素: Ext.get(id) 获取Ext组件: Ext.getCmp(id)/Ext.ComponentQuery.query(CSS选择器)
  • 9. 如下页面:获取id为text1的html控件:Ext.getDom(“text1”) 获取第一个input控件:Ext.query("input")[0] 获取id为text2的ext元素:Ext.get(“text2”) 获取id为textfield1的ext元素:Ext.get("textfield1") 获取id为textfield2的ext组件:Ext.getCmp(“textfield2”) 获取第一个textfield组件:Ext.ComponentQuery.query(“textfield”)[0] 获取textfiled1相邻的textfield2:Ext.getCmp("textfield1").next("textfield") 获取textfieldchild1的父panel:Ext.getCmp(“textfieldchild1”).up(“panel”) 获取panel下面的第一个textfield组件:Ext.ComponentQuery.query("panel[title=Extjs控件]")[0].down("textfield")
  • 10. Extjs数据组件Extjs的数据组件包括model、proxy、store三大类,model是用于定义数据结构,store是用于存放数据的容器,proxy用于定义数据交互方式。
  • 11. Model一、定义一个简单的Model(见备注): 说明:定义一个数据模型,名称叫做patient,有8个字段: Name:姓名,类型Ext自动判断 Age:年龄,类型int型 Phone:电话,类型string型 Gender:性别,类型string型 Birthday:出生日期,类型date型,数据格式化为“天/月/年”格式 Alive:是否健在,类型布尔型 Weight:体重,类型float型 WeightKg:体重KG,类型float型,值由weight字段的值计算得到
  • 12. 二、Model验证(见备注): 说明: presence 验证:不能为空 length验证:长度限制 format验证:正则表达式验证 Inclusion验证:必须包含 exclusion验证:不能包含 验证方法: var errors = patient.validate(); errors.isValid(); errors.items;
  • 13. 三、Model间的关系(见备注) 说明:Model间的关系有2种。 belongsTo:多对一关系 hasMany:一对多关系 例子:我们定义3类数据。作者、书籍、章节。一个作者可以写多本书,一本书有多个章节:
  • 14. 一对多: Author: Ext.define('Author', { extend: 'Ext.data.Model', fields: [ {name: 'id', type: 'int'}, {name: 'name', type: 'string'}, ], hasMany: {model: 'Book', foreignKey: 'authorId'} }); Book: Ext.define ('Book', { extend: 'Ext.data.Model', fields: [ {name: 'id', type: 'int'}, {name: 'title', type: 'string'}, {name: 'pages', type: 'int'}, {name: 'numChapters', type: 'int'}, {name: 'authorId', type: 'int'} ], hasMany: {model: 'Chapter', foreignKey: 'bookId'} }); Chapter: Ext.define ('Chapter', { extend: 'Ext.data.Model', fields: [ {name: 'id', type: 'int'}, {name: 'number', type: 'int'}, {name: 'title', type: 'string'}, {name: 'bookId', type: 'int'} ] }); 说明:hasMany有以下的配置项 model :关联对象的model名称 name::关联的模型别名,用来获取关联对象数据,如果没有,默认为model名称加上“s” primaryKey :主键,主对象用于关联的属性名称,默认为id foreignKey:外键,关联对象用于关联的属性名称,默认为关联对象model名称加上“_id” filterProperty :过滤数据,只需要指定数据关联
  • 15. 多对一: Ext.define('Author', { extend: 'Ext.data.Model', fields: [ { name: 'id', type: 'int' }, { name: 'name', type: 'string' }, ], hasMany: { model: 'Book', foreignKey: 'authorId' }, proxy: { type: 'ajax', url: '../../Scripts/Test/author.js' } }); Ext.define('Book', { extend: 'Ext.data.Model', fields: [ { name: 'id', type: 'int' }, { name: 'title', type: 'string' }, { name: 'pages', type: 'int' }, { name: 'numChapters', type: 'int' }, { name: 'authorId', type: 'int' } ], hasMany: { model: 'Chapter', foreignKey: 'bookId' }, belongsTo: { model: 'Author', foreignKey: 'authorId' } }); Ext.define('Chapter', { extend: 'Ext.data.Model', fields: [ { name: 'id', type: 'int' }, { name: 'number', type: 'int' }, { name: 'title', type: 'string' }, { name: 'bookId', type: 'int' } ], belongsTo: { model: 'Book', foreignKey: 'bookId' } }); 说明:通过belongsto属性,配置多对一关系 model 关联的对象 primaryKey: 主键 foreignKey: 外键 getterName: 获取父对象方法名 setterName: 设置父对象方法名
  • 16. ProxyProxy(代理)用于定义EXT交互数据的方式。分为客户端代理和服务器端代理。 客户端代理: LocalStorageProxy SessionStorageProxy MemoryProxy 服务器端代理: AjaxProxy JsonPProxy DirectProxy RestProxy
  • 17. 一、LocalStorageProxy 说明:通过html5提供的localStorage API来交互数据,将数据保存在浏览器中 特点:关闭浏览器,数据不丢失 二、 SessionStorageProxy 说明:通过html5提供的sessionStorage API来交互数据,将数据保存在浏览器中 特点:关闭浏览器,数据不丢失 三、MemoryProxy 说明:加载上下文中已经存在的数据
  • 18. 四、AjaxProxy 说明:通过Ajax方式和后台交互数据 五、 RestProxy 说明:在AjaxProxy的基础上,通过GET请求请求数据,通过delete请求发送要删除的数据,通过PUT请求发送要更新,通过POST发送新增的数据(注:是采用POST还是PUT发送数据主要是看对象的ID 是否有值) 六、JsonPProxy 说明:跨域获取数据 注意:在后台获取URL的callback参数,并将获取的数据放入“参数值”+“(”+数据+“)”,构成函数调用形式,前台才能解析
  • 19. Extjs布局Extjs布局分为容器布局和组件布局两大类。 容器布局: 组件布局:Dock、Tool、Field、TriggerField
  • 20. 容器布局一、Auto layout 说明:组件在容器中原样排列
  • 21. 二、Anchor layout 说明:组件通过anchor属性,能够设置相对于容器的宽、高
  • 22. 三、Absolute layout 说明:继承自Anchor布局,可以同通过x、y属性设置组件同容器左上角的距离。
  • 23. 四、Hbox layout 说明:容器内的组件水平布局,通过flex属性,可以自动计算组件的宽度。 组件的宽度=(容器的宽度-具有固定宽度的组件宽度) * 该组件的flex值 / 所有组件的flex值之和
  • 24. 五、VBox layout 说明:说明:容器内的组件垂直布局,通过flex属性,可以自动计算组件的高度。 组件的高度=(容器的高度-具有固定高度的组件高度) * 该组件的flex值 / 所有组件的flex值之和
  • 25. 六、Accordion layout 说明:采用垂直布局,不过一次只显示一个组件
  • 26. 七、Table layout 说明:表格布局,和html的table控件相识
  • 27. 八、Column layout 说明:列布局,类似于水平布局,组件可以设置相对于容器的宽度,在相同情况下,建议使用hbox
  • 28. 九、Fit layout 说明:容器内的组件占满整个容器
  • 29. 十、Card layout 说明:继承自fit布局,容器内的多个组件一次只显示一个
  • 30. 十一、Border layout 说明:将容器分为上下左右中5各部分,其中中间部分必须填充组件,如果某一部分没有填充组件,中部的组件会自动占据那部分空间
  • 31. 组件布局一、Dock layout 说明:将组件内部的子组件定位到组件的上下左右四个方位
  • 32. 二、Tool layout 说明:Extjs提供了一些功能按钮供我们使用,但是这些按钮的方法需要我们自定义
  • 33. 三、Field layout 说明:field布局会在组件出现错误现在的时候,自动调整布局,显示错误提示
  • 34. 三、TriggerField layout 说明:会为文本框增加一个下拉按钮,等同于combo组件
  • 35. 表格控件一、简单的表格 说明: store:定义表格的数据源 columns:定义表格的列 dataIndex:指定列绑定的数据源
  • 36. 二、表格选择模式 说明:通过selType属性,定义行选择/单元格选择模式(默认行选择模式)
  • 37. 三、列的种类: 1.单选框列(Ext.selection.CheckboxModel ) 2.Index列(Ext.grid.RowNumberer ) 3.文本列(默认) 4.模板列(templatecolumn) 5.逻辑判断列(booleancolumn) 6.日期列(datecolumn) 7. 数字列(numbercolumn) 8.行为列(actioncolumn')
  • 38. 四、表格的特性 Ext.grid.feature.Grouping 说明:根据指定字段分组展示
  • 39. 2. Ext.grid.feature.GroupingSummary 说明:根据指定字段分组展示并为每个分组添加注释
  • 40. 3. Ext.grid.feature.Summary 说明:为指定的列添加注释
  • 41. 4. Ext.grid.feature.RowBody 说明:为每行添加注释
  • 42. 五、表格的插件 Ext.grid.plugin.CellEditing 说明:双击单元格,如果此列声明了editor属性,就会出现编辑提示
  • 43. 2. Ext.grid.plugin.RowEditing 说明:行编辑插件,当点击(自定义连续点击次数)表行时,此行所有定义了editor的单元格可以编辑
  • 44. 树形控件一、一个简单的树 说明: 1.树形结构的store要使用Ext.data.TreeStore 2.子节点必须声明leaf属性,中间的节点需要声明children属性 3. expanded属性表示渲染完成后,展开指定的节点
  • 45. 二、带选择框的树 说明:如果需要节点前面有选择框,只需要在节点声明checked属性。
  • 46. 三、树型表格 说明:通过声明columns属性,实现树形表格效果。注意,属性表格是创建的Ext.tree.Panel控件而不是Ext.grid.Panel控件
  • 47. 表单控件一、Form fields包括: hiddenfield displayfield Textfield Textareafield Filefield Timefield Datefield Combobox Numberfield Checkboxfield Radiofield Multislider sliderfield
  • 48. 二、表单验证: 验证包括: 必须输入 长度限制 数值型的取值范围 正在表达式 定义好的验证
  • 49. Extjs MVC框架Extjs MVC框架包括:“页面层”,“控制层”,“数据层”。
  • 50. 目录结构: APP文件夹:项目根目录 Controller文件夹:放置页面行为文件 Model文件夹:放置数据结构文件 Store文件夹:放置数据容器文件 View文件夹:放置页面文件 App.js文件:项目人口
  • 51. 执行结果: