EXTJS API中文详解与关键类库

需积分: 0 78 浏览量更新于2024-07-27 收藏 657KB PDF 举报

EXTJS API是Ext JS框架的核心组成部分，它提供了丰富的工具和类库，使得前端开发人员能够构建高效、交互式的Web应用程序。此文档概述了EXTJS API中的关键类和功能，覆盖了从基础类型到数据管理的广泛内容，适合深入学习和理解EXTJS。 1. **Ext类**：这是EXTJS的核心容器，包含了框架的基本设置和全局配置。它与创建应用窗口、组件和其他基础结构密切相关。 2. **Array类**：EXTJS对JavaScript原生的Array类进行了扩展，提供了方便的数据操作方法，如过滤、排序和分组等。 3. **Number、String、Date** 类：这些内置的类在EXTJS中同样得到了增强，提供了更易用的方法处理数值、字符串和日期格式化。 4. **Function类**：EXTJS利用Function类实现了一些高级功能，如事件处理函数的绑定和解绑。 5. **Ext.Element类**：这个类是所有EXTJS组件的基础，封装了DOM操作，简化了对网页元素的操作和样式管理。 6. **Ext.DomQuery**：提供了类似于jQuery的查询功能，可以快速定位和操作DOM元素。 7. **Ext.DomHelper**：一个强大的DOM构建工具，用于动态创建HTML元素。 8. **Ext.Template**：模板引擎，用于将数据绑定到HTML字符串，便于动态渲染页面内容。 9. **Ext.EventManager** 和 **Ext.EventObject**：负责事件的监听和触发，是处理用户交互的核心。 10. **CompositeElement类** 和 **CompositeElementLite类**：用于批量操作多个元素，提高了代码的简洁性和效率。 11. **Ext.Fx** 和 **Ext.KeyNav**：分别提供动画效果和键盘导航功能，增强了用户体验。 12. **Ext.KeyMap**：允许定制键盘快捷键映射，增加可定制性。 13. **Ext.util.JSON** 和 **Ext.util.Format**：分别为JSON操作和格式化提供了实用工具。 14. **Ext.util.DelayedTask** 和 **Ext.util.TaskRunner**：异步任务管理和延时执行。 15. **Ext.util.TextMetrics**：文本尺寸测量工具，用于计算文本的可视宽度和高度。 16. **Ext.XTemplate**：模板引擎，结合数据模型动态生成HTML片段。 17. **Ext.data.*** 集合：包括Connection（连接）、Ajax（基于XMLHttpRequest的请求）、Record（数据记录）、DataProxy（数据源代理）、DataReader（数据解析器）等一系列数据管理类，构成了EXTJS的数据模型和存储层。 18. **Ext.data.Store类**：数据集，负责管理数据模型并提供数据操作接口，是EXTJS中最常用的对象之一。 19. **Ext.data.GroupingStore类**：扩展了Store类，支持数据分组和排序功能，常用于表格视图的动态展示。掌握EXTJS API的关键类和功能有助于开发者更好地构建复杂的前端应用，并充分利用EXTJS的强大功能来提升开发效率和用户体验。通过深入学习和实践，开发者可以熟练地将EXTJS融入到实际项目中。

getPositioning() : Object

得到当前元素的位置信息返回含以下属性的对象{position,left,right,top,bottom,z-index}

getRegion() : Region

得到当前元素的区域信息返回含有以下属性的 Ext.lib.Region 对象{top, left, bottom, right}

getRight( Boolean local ) : Number 右边界值

getScroll() : Object 得到一个批示滚动条位置的对象{left, top}

getSize( [Boolean contentSize] ) : Object 得到宽度和高度组成的对象信息{width,height}

getStyle( String property ) : String 得到指定的样式值 getStyles 简化版

getStyles( String style1, String style2, String etc. ) : Object 得到由参数组成的对象

例:el.getStyles('color', 'font-size', 'width')

可能返回 {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}

getTop( Boolean local ) : Number 得到顶点纵坐标

getUpdater() : Ext.Updater 得到当前元素的 Updater 对象,参见 Ext.Updater 类

getValue( Boolean asNumber ) : String/Number 得到 value 属性的值

getViewSize() : Object 得到 clientHeight 和 clientWidth 信息给成的对象{width,height}

getWidth( [Boolean contentWidth] ) : Number..这样的方法真多

getX() : Number 得到页面偏移量,也就是绝对坐标

getXY() : Array

getY() : Array

hasClass( String className ) : Boolean 样式类 className 存在于当前元素的 dom 节点中

hide( [Boolean/Object animate] ) : Ext.Element 隐藏当前元素

hover( Function overFn, Function outFn, [Object scope] ) : Ext.Element 设置鼠标移入移出事件

initDD( String group, Object config, Object overrides ) : Ext.dd.DD

initDDProxy( String group, Object config, Object overrides ) : Ext.dd.DDProxy

initDDTarget( String group, Object config, Object overrides ) : Ext.dd.DDTarget

这个要放到 Ext.dd 去专门搞了,用于拖曳

insertAfter( Mixed el ) : Ext.Element

insertBefore( Mixed el ) : Ext.Element

insertFirst( Mixed/Object el ) : Ext.Element

在 DOM 中 el 元素之前之后...插入当前元素

insertHtml( String where, String html, Boolean returnEl )

插入 html 内容 where 可选 beforeBegin, afterBegin, beforeEnd, afterEnd

insertSibling( Mixed/Object/Array el, [String where], [Boolean returnDom] ) :

插入或创建 el 做为当前元素的兄弟节点,where 可选 before/after,默认为 before

is( String selector ) : Boolean 验证当前节点是否匹配简单选择器 selector

isBorderBox()测试不同的样式规则以决定当前元素是否使用一个有边框的盒子

isDisplayed() : Boolean 只要不是指定 display 属性 none 都会返回真

isMasked() : Boolean

仅有当前元素有 mask 并且可见时为真,mask 译为蒙片?就是有些输入框没得到值之前会有一行模糊的提示

的那种东西

isScrollable() : Boolean 可以滚动?

isVisible( [Boolean deep] ) : Boolean 可见?

last( [String selector], [Boolean returnDom] ) : Ext.Element/HTMLElement 见 first

load( String/Function url, [String/Object params], [Function callback], [Boolean discardUrl] ) : Ext.Element 直接

应用当前 updater 的 update 方法

mask( [String msg], [String msgCls] ) : Element 为当前对象创建蒙片

move( String direction, Number distance, [Boolean/Object animate] ) : Ext.Element

相前元素相对于当前位置移动,

direction 批示方向可能的值是"l","left" - "r","right" - "t","top","up" - "b","bottom","down".

distance,指示要移动的距离,以像素为单位

moveTo( Number x, Number y, [Boolean/Object animate] ) : Ext.Element 称动到指定的位置

next( [String selector], [Boolean returnDom] ) : Ext.Element/HTMLElement

下一个符合 selector 的兄弟节点,

on( String eventName, Function fn, [Object scope], [Object options] ) : void 详见 addListener

position( [String pos], [Number zIndex], [Number x], [Number y] ) : void

初始化当前元素的位置 pos 可选择 relative/absolute/fixed

prev( [String selector], [Boolean returnDom] ) : Ext.Element/HTMLElement 前一个符合 selector 的兄弟节点

query( String selector ) : Array 通过样式选择器选择子节点

radioClass( String/Array className ) : Ext.Element 添加样式或样式数组到当前元素，并移除兄弟节点中的指

定样式

relayEvent( String eventName, Object object ) : void 将当前元素的 eventName 事件同时转发给 object 对象

remove() : void 从当前 DOM 中删除元素,并从缓存中移除

removeAllListeners() : Ext.Element 移除所有的侦听者

removeClass( String/Array className ) : Ext.Element 移除样式类

removeListener( String eventName, Function fn ) : Ext.Element 移除事件 eventName 的 fn 侦听器

repaint() : Ext.Element 强制浏览器重绘当前元素

replace( Mixed el ) : Ext.Element 用当前元素替换 el

replaceClass( String oldClassName, String newClassName ) : Ext.Element 替换样式类

replaceWith( Mixed/Object el ) : Ext.Element 用 el 替换当前元素

scroll( String direction, Number distance, [Boolean/Object animate] ) : Boolean

滚动,scroll 会保证元素不会越界,direction 和 distance 参数见 move

scrollIntoView( [Mixed container], [Boolean hscroll] ) : Ext.Element 滚动到 container 内的视图

scrollTo( String side, Number value, [Boolean/Object animate] ) : Element 基本与 scroll 方法相同,但不保证元素

不越界

select( String selector, [Boolean unique] ) :

与 query 不同的是,通过样式选择器 selector,select 方法会返回一个复合元素对象(CompositeElement)或

CompositeElementLite,

set( Object o, [Boolean useSet] ) : Ext.Element

设置属性，例

el.set({width:'200px',height:'200px'});

setBottom( String bottom ) : Ext.Element

setLeft( String left ) : Ext.Element

setRight( String right ) : Ext.Element

setTop( String top ) : Ext.Element

setLeftTop( String left, String top ) : Ext.Element

设置 css 对象的属性值

setBounds( Number x, Number y, Number width, Number height, [Boolean/Object animate] ) : Ext.Element

马上改变当前元素的位置和尺寸

setBox( Object box, [Boolean adjust], [Boolean/Object animate] ) : Ext.Element 为当前元素设置一个盒子

box:{x, y, width, height},adjust 指示是否马上调整尺寸

setDisplayed( Boolean value ) : Ext.Element 设置可见性

setHeight( Number height, [Boolean/Object animate] ) : Ext.Element

setWidth( Number width, [Boolean/Object animate] ) : Ext.Element

setSize( Number width, Number height, [Boolean/Object animate] ) : Ext.Element 设置高度和宽度

setLocation( Number x, Number y, [Boolean/Object animate] ) : Ext.Element 设置当前元素相对于页面的横纵

坐标

setOpacity( Float opacity, [Boolean/Object animate] ) : Ext.Element 设置透明度，opacity 为 1 完全不透明,0 完

全透明

setPositioning( Object posCfg ) : Ext.Element 为当前元素指定位置信息,参数 posCfg 参见 getPositioning 说明

setRegion( Ext.lib.Region region, [Boolean/Object animate] ) : Ext.Element 为当前元素指定区域信息 region 定

义见 getRegion

setStyle( String/Object property, [String value] ) : Ext.Element 设置样式

setVisibilityMode( visMode Element.VISIBILITY ) : Ext.Element 指示是使用 Element.VISIBILITY 还是

Element.DISPLAY 属性来定义可见性

setVisible( Boolean visible, [Boolean/Object animate] ) : Ext.Element 设置可见性

setX( Number The, [Boolean/Object animate] ) : Ext.Element

setXY( Array pos, [Boolean/Object animate] ) : Ext.Element

setY( Number The, [Boolean/Object animate] ) : Ext.Element 设置当前元素相对于 page 的位置

show( [Boolean/Object animate] ) : Ext.Element 显示当前元素

swallowEvent( String eventName, [Boolean preventDefault] ) : Ext.Element 阻止 eventName 事件冒泡，并视

preventDefault 阻断默认行为

toggle( [Boolean/Object animate] ) : Ext.Element 切换元素的 visibility 或 display 属性,依赖于 setVisibilityMode

设定的

toggleClass( String className ) : Ext.Element 如果样式名存在于当前元素对应的 dom 节点，移除，反之应用

translatePoints( Number/Array x, Number y ) : Object 返回一个{left,top}结构

un( String eventName, Function fn ) : Ext.Element 解除事件侦听，参见 removeListener

unclip() : Ext.Element 见 clip;

unmask() : void 见 mask;

unselectable(): Ext.Element 禁止文本选择

up( String selector, [Number/Mixed maxDepth] ) : Ext.Element 通过样式选择器 selector 选择祖先节点

update( String html, [Boolean loadScripts], Function callback ) : Ext.Element 利用 html 更新当前节点内容，

loadScripts 指示 html 中如果有 script，是否需要运行,这是一个 innerHTML 的一个老老老问题了

wrap( [Object config], [Boolean returnDom] ) : HTMLElement/Element 用另一个元素 config 包含自己

8、Ext.DomQuery 类

selector 语法详见 Ext 类

compile( String selector, [String type] ) : Function 编写一个选择器或 xpath 查询到一个方法以方便重用,type 取

select(默认)或 simple 值之一

filter( Array el, String selector, Boolean nonMatches ) : Array 过滤 el 中的元素,保留符合 selector 的，如果

nonMatches 为真，结果相反

is( String/HTMLElement/Array el, String selector ) : Boolean 验证 el 是否匹配 selector

select( String selector, [Node root] ) : Array 从 root 中选择匹配 selector 的对象数组

selectNode( String selector, [Node root] ) : Element 返回 root 中第一个匹配 selector 的对象

selectNumber( String selector, [Node root], Number defaultValue ) : Number 返回 root 中第一个匹配 selector 的

对象的节点值，转换为整数或浮点数

selectValue( String selector, [Node root], String defaultValue ) : void返回 root 中第一个匹配 selector的对象的节

点值，如果为 null,用默认值 defaultValue 代替

9、Ext.DomHelper 类

append( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.Element

创建一个新的 DOM 元素并添加到 el

参数 o 是一个 DOM 对象或一个原始 html 块

applyStyles( String/HTMLElement el, String/Object/Function styles ) : void 应用样式 styles 到对象 el，样式的

对象表示方法见 Ext.Element

createTemplate( Object o ) : Ext.Template 由 o 创建一个新的 Ext.Template 对象，详见 Ext.Template

insertAfter( Mixed el, Object o, [Boolean returnElement] ) : HTMLElement/Ext.Element

insertBefore( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.Element 创建一个新的

DOM 对象 o 并将他们挺入在 el 之后/之前

insertFirst( Mixed el, Object/String o, [Boolean returnElement] ) :创建一个新的 DOM元素并做为第一个子节点

添加到 el (看了这个 insertFirst，建议将 append 取一个别名 insertLast:))

insertHtml( String where, HTMLElement el, String html ) : HTMLElementwhere 可选值

beforeBegin/afterBegin/beforeEnd/afterEnd 将 html 代码插入到 el 附近,

markup( Object o ) : String 返回 DOM 对象 o 对应的 html 代码

overwrite( Mixed el, Object/String o, [Boolean returnElement] ) :创建一个新的 DOM 元素 o 并用它重写 el 的内

容

10、Ext.Template 类

Template 类主要是功能是生产 html 片断,例

var t = new Ext.Template(

'<div name="{id}">',

'<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>',

'</div>'

);

t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});

公用方法:

Template( String/Array html )构造一个 Ext.Template 对象，参数可以是字符串形式的 html 代码或它们组成

的数组，

Template.from( String/HTMLElement el, Object config ) : Ext.Template

能过 el 的 value(优先)或 innerHTML 来构造模板

append( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element

insertAfter( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element

insertBefore( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element

insertFirst( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element

这组方法提供由 value 产生的 html 代码，并添加到 dom 做为 el 的最后一个子节点/下一个兄弟节点/前一

个兄弟节点/第一个子节点 values 解释参见 applyTemplate

apply() : void

applyTemplate( Object values ) : String

apply是 applyTemplate的简写，如果参数是数字 values可以是一个数组，或者一个象 {id: 'myid', cls: 'myclass',

name: 'foo', value: 'bar'}这样的 json 对象

compile() : Ext.Template

编译模板,替换掉模板中的\=>\\ ,\r\n|\n==>\\n, '=\',主要是为了 js 自己处理方便

剩余65页未读，继续阅读

sd269859808

粉丝: 0
资源: 2

EXTJS API中文详解与关键类库

Ext 3.3 - 中文API文档

中文的Extjs的api手册

EXTJS API+EXT 中文手册

EXTJS核心API深度解析

掌握Extjs：中文API与实战教程

EXTjs中文API全面指南：从入门到实践

extjs4 api官网

extjs 6.2.0 api

extjs6.2中文文档

extjs6地图demo

最新资源