ExtJS知识集锦
常用代码片段
DOM的增删改
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
var myDiv1 = Ext.get( 'div1' ); //根据ID获取DOM元素 myDiv1.createChild( 'Child from a string' ); //创建要给子节点 myDiv1.createChild( '<div>Element from a string</div>' ); //创建一个子元素 myDiv1.createChild( { //使用对象配置方式添加子元素 tag : 'div', html : 'Child from a config object' } ); //添加多个子代元素 myDiv1.createChild( { tag : 'div', id : 'nestedDiv', style : 'border: 1px dashed; padding: 5px;', children : { tag : 'div', html : '...a nested div', style : 'color: #EE0000; border: 1px solid' } } ); //在最前面插入子元素 myDiv1.insertFirst( { tag : 'div', html : 'Child inserted as node 0 of myDiv1' } ); //在某个子元素之前插入 myDiv1.createChild( { tag : 'div', id : 'removeMeLater', html : 'Child inserted as node 2 of myDiv1' }, myDiv1.dom.childNodes[3] ); //删除一个元素 var myDiv1 = Ext.get( 'div1' ); myDiv1.remove(); |
组件导航
|
1 2 3 4 5 |
var me = currentBorderContainer; //根据Region在border布局中导航 var northChild = me.down( '*[region=north]' ); //遍历所有子组件 Ext.each( me.items.items, function( cmp ) {}); |
使用模板（Template和XTemplate）
使用模板可以很方便的创建复杂的DOM结构。模板中的占位符使用花括号{}包围，可以应用一个上下文对象以替换模板生成最终结果。
XTemplate支持循环、选择等基础程序结构，支持任意表达式的计算。可用于表达式的内置变量包括：
- out：模板结果添加到的输出数组对象
- values：当前上下文对象
- parent：使用子模板时，代表父模板的上下文对象
- xindex：在使用循环结构时，代表以1为基准的索引
- xcount：在使用循环结构时，代表被迭代数组的元素个数
- this：当前模板对象
位于{[...]}中的代码以当前模板为this执行，其结果插入到模板填充结果中。
位于{%...%}中的代码以当前模板为this执行，其结果不插入到模板填充结果中。
下面是模板用法示例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
//简单的模板用法 var myTpl = Ext.create('Ext.Template' , "<div>Hello {0}.</div>"); myTpl.append(document.body, ['Marjan']); //替换模板并作为body的子元素 myTpl.append(document.body, ['Michael']); myTpl.append(document.body, ['Sebastian']); var myTpl = Ext.create('Ext.Template', [ '<div style="background-color: {color}; margin: 10px;">', '<b> Name :</b> {name}<br />', '<b> Age :</b> {age}<br />', '<b> DOB :</b> {dob}<br />', '</div>' ]); myTpl.compile(); //编译模板可以获取更快的速度 //使用多个变量替换占位符，并作为body的子元素 myTpl.append( document.body, { color : "#E9E9FF", name : 'John Smith', age : 20, dob : '10/20/89' } ); myTpl.append( document.body, { color : "#FFE9E9", name : 'Naomi White', age : 25, dob : '03/17/84' } ); var tplData = [ { color : "#FFE9E9", name : 'Naomi White', age : 25, dob : '03/17/84', cars : [ 'Jetta', 'Camry', 'S2000' ] }, { color : "#E9E9FF", name : 'John Smith', age : 20, dob : '10/20/89', cars : [ 'Civic', 'Accord', 'Camry' ] } ]; //XTemplate使用在循环场景使用： var myTpl = Ext.create( 'Ext.XTemplate', [ //数组形式的多个字符串 '<tpl for=".">', //点号表示遍历的变量是上下文本身 '<div style="background-color: {color}; margin: 10px;">', '<b> Name :</b> {name}<br />', '<b> Age :</b> {age}<br />', '<b> DOB :</b> {dob}<br />', '</div>', '</tpl>' ] ); myTpl.compile(); myTpl.append( document.body, tplData ); //添加多个DIV //复杂的例子： var myTpl = Ext.create( 'Ext.XTemplate', [ '<tpl for=".">', //对数据中每个元素进行遍历 '<div style="background-color: {color}; margin: 10px;">', '<b> Name :</b> {name}<br />', '<b> Age :</b> {age}<br />', '<b> DOB :</b> {dob}<br />', '<b> Cars : </b>', '<tpl for="cars">', //对每个元素的cars属性进行遍历 '{.}', '<tpl if="this.isCamry(values)">', //条件语句：表达式不要花括号 '<b> (same car)</b>', '</tpl>', '{[ (xindex < xcount) ? ", " : "" ]}', //需要花括号：xindex为从1开始的当前循环索引，xcount为总数 '</tpl>', '<br />', '</div>', '</tpl>', { //模板配置项 disableFormats: true, //模板成员函数定义 isCamry : function( car ) { return car === 'Camry'; } } ] ); myTpl.compile(); myTpl.append( document.body, tplData ); |
使用键盘导航
ExtJS支持针对任何元素的键盘导航：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
me.keyNav = new Ext.util.KeyNav( { target: me.getEl(), // 目标元素 up: function ( e ) { me.doSomething(); }, down: function ( e ) { me..doSomething(); }, enter: me..doSomething, esc: { fn: me..doSomething, defaultEventAction: false }, scope: me } ); |
注意：
- 键盘导航对象需要随着组件一起销毁： me.keyNav.destroy()
- 对于div之类的元素，默认是不支持键盘导航的，除非添加tabindex属性：
1me.getEl().set( { 'tabindex': 1 } )这个特性在Chrome测试过
- 要激活键盘导航时，目标元素必须获得焦点： this.getEl().focus()
ExtJS4.x常见问题
作为子组件的浮动（floating）组件
设置任意组件的配置项
floating:true 可以让它变成浮动组件，浮动组件脱离文档流，进行绝对定位。Window、Menu等组件默认就是浮动的。ExtJS的浮动特性由混入类
Ext.util.Floating 负责。
手工渲染的浮动组件注册它们自己到全局
ZIndexManager ，而浮动组件亦可作为其它容器的子组件。
浮动子组件在渲染阶段（ZIndexManager）要求得到一个ZIndexManager，用以管理一组相互堆叠的浮动组件。调用浮动组件的
toFront() 可以将其放置在最前面。浮动子组件向上递归寻找到第一个浮动的ownerCt的zIndexManager属性作为自己的ZIndexManager，如果找不到，则使用全局ZIndexManager。
浮动子组件不参与容器的布局，只有当你手工调用其
show() 方法时它才会渲染和显示，配置
autoShow:true 可以触发自动显示。
默认情况下浮动组件具有阴影效果，配置
shadow : false 可以去除阴影。
调用
alignTo() 可以让浮动组件相对于任意组件/元素对齐，可以设置参考位置和偏移量。虽然文档中没有说明，但实验表明（ExtJS 4.1）可以配置
x 、
y 来指定浮动子组件相对于其浮动祖先的显示偏移量。
单例Ext提供了哪些属性和方法
| 属性/方法 | 说明 | ||
| chromeVersion firefoxVersion isChrome isIE6 |
不一一列举，这些方法用于判断浏览器类型、版本，操作系统的类型 | ||
| emptyFn | 可重用的空函数 | ||
| emptyString | 可重用的空字符串 | ||
| addBehaviors() | 在domready之后，为CSS选择器匹配的元素添加事件监听器：
|
||
| application() | 加载 Ext.app.Application并启动基于MVC的ExtJS应用 | ||
| apply(o, c) | 递归的拷贝c对象的所有属性到o | ||
| applyIf(o, c) | 如果o不存在某个属性，则拷贝之 | ||
| batchLayouts() | 执行某个函数，并在完成前暂停布局 | ||
| bind() | 绑定参数、作用域（this）以形成一个新函数：
|
||
| callback() | 在指定的延迟后，执行回调函数 | ||
| defer() | 在指定的延迟后，执行函数 | ||
| clone() | 克隆基本类型、 数组、{}形式的简单对象、DOM节点、日期 | ||
| copyTo() | 把指定的一组属性拷贝到目标对象：
|
||
| create() | 通过类名、别名或者备选类名实例化类 | ||
| createByAlias() | 等价于Ext.ClassManager.instantiateByAlias() | ||
| decode() | 解码JSON字符串为JavaScript对象，等价于 Ext.JSON.decode() | ||
| define() | 定义或者覆写一个类 | ||
| destroy() | 尝试销毁传递进来的对象数组，例如移除监听器、移除DOM节点、调用destroy()函数、 | ||
| destroyMembers() | 销毁对象的指定属性 | ||
| each() | 便利集合并对每一个元素执行函数：
|
||
| encode() | 把JavaScript对象编码为JSON字符串 | ||
| exclude() | 显式排除加载一个ExtJS类 | ||
| fly() | 享元一个HTML元素对象为Ext.Element | ||
| get() | 类似于fly()，不享元 | ||
| getBody() | 获取body元素为Ext.Element | ||
| getClass() | 获取某个对象的ExtJS类 | ||
| getClassName() | 得到某个对象的ExtJS类名称 | ||
| getCmp() | 根据ID获取组件 | ||
| getDoc() | 获取document元素为Ext.Element | ||
| getDom() | 根据ID或者Element得到DOM元素 | ||
| getHead() | 获取head元素为Ext.Element | ||
| getOrientation() | 对于移动设备，得到方向 | ||
| getScrollbarSize() | 得到滚动条大小 | ||
| getStore() | 根据ID获取Store对象 | ||
| id() | 创建唯一的ID | ||
| is***() | 进行类型判断，包括数字、字符串、未定义、日期、可迭代、DOM节点等 | ||
| iterate() | 迭代对象的每一个元素 | ||
| log() | 记录日志 | ||
| merge() | 合并两个对象，递归的进行，不保留引用 | ||
| namespace() | 创建名字空间，等价于ns() | ||
| onDocumentReady() | 等价于 Ext.EventManager.onDocumentReady() | ||
| onReady() | 等价于Ext.Loader.onReady() | ||
| override() |
覆盖指定对象的成员：
举例：
|
||
| pass(() | 传递前导的参数给函数，并创建新的函数
|
||
| query() | 根据CSS选择器查询DOM元素，等价于Ext.dom.Query.select() | ||
| select() | 根据CSS选择器查询Element元素，等价于Ext.Element.select() | ||
| removeNode() | 移除DOM节点 | ||
| require() | 等价于Ext.Loader.require() | ||
| syncRequire() | 同步化的require() | ||
| resumeLayouts() | 恢复布局功能 | ||
| suspendLayouts() | 暂停布局功能 | ||
| toArray() | 把可迭代对象转换为数组 | ||
| typeOf() |
返回对象的类型，支持： undefined |
||
| valueFrom() | 如果不Ext.isEmpty()则返回对象本身，否则返回默认值 | ||
| widget() | 根据xtype创建组件 |
Ext.Class类提供了哪些配置项和方法
Ext.Class类似于Java的java.lang.Class类，但是其只专注于如何生成类对象，关注于类的结构性特征。
| 配置项/属性/方法 | 说明 | ||
| {alias} | 别名列表，主要用于定义组件的xtype、ptype、ftype。必须添加针对*type的前缀：widget、plugin、feature | ||
| {alternateClassName} | 备选类名列表 | ||
| {config} | 该类包含的配置项、配置项的默认值。这些配置项自动生成getter/setter | ||
| {extend} | 父类的名称 | ||
| {inheritableStatics} | 可继承的静态方法列表 | ||
| {mixins} | 混入类的字典或者数组 | ||
| {requires} |
在创建该类之前必须加载的类列表 |
||
| {singleton} | 是否实例化为单例对象：
|
||
| {statics} | 静态成员字典 | ||
| {uses} | 可选的，与当前类一起加载的类。不是必须在创建当前类的时候就加载，但是必须在Ext.onReady()之前加载完毕 | ||
| new Ext.Class() | 创建一个匿名类 |
Ext.Base类提供了哪些配置项和方法
Ext.Base相当于Java的java.lang.Object，是所有类型的基类；其提供的静态方法则类似java.lang.Class的功能
| 配置项/属性/方法 | 说明 | ||
| self | 得到创建当前对象的ExtJS类对象（Ext.Class），与statics()不同，其具有多态性、作用域依赖（this）的特征 | ||
| callParent | 传入数组或者arguments，调用被覆盖的父类的当前方法，相对于Java的super.*** | ||
| getInitialConfig() | 得到创建当前对象时，传递给构造器的配置对象 | ||
| initConfig() | 为当前对象初始化配置， 典型用法：
|
||
| statics() | 得到创建当前对象的ExtJS类对象（Ext.Class），与self不同，不具有作用域依赖的特征（与this指针无关），总是返回调用该方法的方法所属的类 | ||
| 静态成员 | |||
| addMembers() | 为当前类的原型添加方法或者属性 | ||
| addStatics() | 为当前类添加/覆盖静态成员或属性 | ||
| create() | 创建当前类的实例 | ||
| createAlias() | 为当前类的原型方法创建别名 | ||
| getName() | 得到当前类的字符串名称 | ||
如何根据传入的构造参数来定制本容器的items的内容？
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
Ext.define( 'Ext.ux.Container', { extend : 'Ext.container.Container', alias : 'widget.uxcontainer', hideBar : true, items : {},//不要在这里配置items的内容 initComponent : function(){ var me = this; me.callParent(arguments); //如果items的内容由当前容器类决定，则可以在调用ExtJS默认initComp方法后，初始化items var items = { xtype : 'container', hidden : me.hideBar }; me.add(items); } }); |
ExtJS3.x常见问题
在IE6下无法显示按钮栏
去除配置项：animateTarget : this
← C++学习笔记
Leave a Reply