Javascript - ExtJs - 常用方法和属性

常用方法和属性(Common methods and attributes)

获取

get(x)

x是元素的ID || dom元素对象 || ExtElement对象

将参数所指转化为ExtElement对象并返回它(非Dom元素对象,而是对Dom元素的封装),此方法等同于new Ext.Element(x) 。

Ext.select(x)

x是选择器

返回一个CompositeElement对象,表示ExtElment对象的集合。但返回的这个对象实际上并非数组,不能通过数组索引访问它包含的数据。但可以通过each方法对集合里的每个对象进行迭代。

Ext.query(x)

x是选择器

返回html dom元素对象数组。此方法是Ext.DomQuery.select()的简写形式。

Ext.DomQuery.filter(CompositeElement,selector,mach)

CompositeElement是ExtElement对象集合,selector是选择器,mach是布尔值,意为是否取反。

从集合中筛选出符合selector的对象,然后mach再筛选一次。返回CompositeElement集合。

Ext.DomQuery.is(domElement,selector)

domElement是html Dom元素对象 || html Dom元素对象集合,selector是筛选器。

测试domElement是否匹配筛选器。

ExtElmentArray.each(fn)

fn是函数

迭代CompositeElement集合对象,该集合包含的是ExtElement对象。fn用于处理迭代,函数接收一个参数e,e表示被迭代的每个ExtElment对象。

Array.forEach(fn)

fn是函数

迭代数组的元素,fn用于处理迭代,函数接收一个参数e,e表示被迭代的每个数组的元素。如果你要迭代ExtElment对象就应该使用each方法,如果迭代数组就使用forEach方法。

Ext.each(x,fn)

x是数组对象 || CompositeElement集合对象

fn是函数用于处理迭代,函数接收三个参数item、index、allItems,item是当前迭代的某个数组的元素或CompositeElement集合中的ExtElement对象,index是索引,allItems是x。

Ext.getDoc()

获取html文档对象的ExtElement对象表示。

Ext.getBody()

获取Body元素的ExtElement对象表示。

Ext.getDom(x)

x是元素的ID || html Dom元素对象 || ExtElement对象

获取对象的Dom对象表示。

Ext.getCmp()

获取Ext组件,得到组件后可调用以set为前缀的函数方法用以设置组件的各种属性。

Ext.isEmpty(x)

x是对象 || 字符

测试对象是否为空,如果是测试字符,则需要提供第二个参数指定是否可以为空。

ExtElment.hide()

隐藏ExtElment对象。

ExtElm.highlight();

使ExtElment背景高亮显黄渐隐的动画。

ExtElement.on(eventType,fn)

eventType是事件触发方式,fn是事件处理函数。

<div id="TestBox" style="width:100px;height:100px;background:black;color:white;margin:200px auto;text-align:center;">click</div>   

<script type="text/javascript">
Ext.onReady(function () {
    Ext.get("TestBox").on("click", function () {
        Ext.MessageBox.alert("","event click!");
    });
});
</script> 

属性

ExtElment.dom

获取ExtElement对象的Dom表示,相当于转化为Dom元素。

操纵

Ext.DomHelper.append(fatherElm,x)

fatherElm是html Dom对象 || ExtElement对象,x是htmlCode

将x添加到fatherElm里的末尾。

Ext.DomHelper.applyStyles(x,styleObject)

x是html Dom对象 || ExtElement对象

设置x的css。

Ext.DomHelper.applyStyles(Ext.get("box"), { "font-size": "50px" })

Ext.DomHelper.insertAfter(x,y)

x是ExtElement对象,y是htmlCode || html Dom对象 || ExtElement对象

将y插入到x之后。

Ext.DomHelper.insertBefore(x,y)

x是ExtElement对象,y是htmlCode || html Dom对象 || ExtElement对象

将y插入到x之前。

Ext.DomHelper.insertHtml(where,x,y)

x是html Dom对象,where是指示条件

根据where的指示,将y插入到x的由where指示的某个位置。where可能的值有:beforeBegin(插入到x的开始标签之前)afterBegin(插入到x的开始标签之后)afterEnd(插入到x的结束标签之后)beforeEnd(插入到x的结束标签之前)

Ext.DomHelper.markup(x)

x是ExtElement对象 || html Dom对象

获取该对象的html块。

Ext.DomHelper.overwrite(x,y)

x是ExtElement对象 || html Dom对象

用y替换x包含的所有html。

Ext.DomHelper.createTemplate(x)

x是htmlCode

创建一个html模板。此方法的好处在于简化需要重复创建相同结构的html以便于重复调用用于生成html或用于其他操作。

<script type="text/javascript">
var htmlTemplate = Ext.DomHelper.createTemplate("<div id=‘{id}‘>{value}</div>");//创建模板同时定义占位变量id和value
htmlTemplate.append(Ext.get("box"), { id: "childBox1",value:"hello" });//在参数1里添加一个id为childBox1文本为hello的div
htmlTemplate.append(Ext.get("box"), { id: "childBox2", value: "world" });//在参数1里添加一个id为childBox2文本为world的div
</script>

Javascript - 学习总目录

时间: 2025-01-18 08:24:02

Javascript - ExtJs - 常用方法和属性的相关文章

JavaScript String常用方法和属性

一.string中的常用属性 1. length 说明: 字符串的长度属性,一直保持跟踪着该字符串中包含的字符数. 二.string中的常用方法 1. toLowerCase() 和 toUpperCase() 说明: toLowerCase(): returns a copy of the string with its letters converted to lowercase. Numbers, symbols, and other characters are not affected

javascript中常用坐标属性offset、scroll、client

原文:javascript中常用坐标属性offset.scroll.client 今天在学习js的时候觉得这个问题比较容易搞混,所以自己画了一个简单的图,并且用js控制台里面输出测试了下,便于理解. 1.在文档(document)对象里面用: scrollWidth/Height:获取对象的滚动宽度(滚动条可以滚动的宽度,相当于整个页面的总宽度的样子--网页正文全宽) scrollLeft/Top:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离(页面利用滚动条滚动到右边时,隐藏在

Javascript常用对象的属性和方法

javascript为我们提供了一些非常有用的常用内部对象和方法.用户不需要用脚本来实现这些功能.这正是基于对象编程的真正目的. 在javascript提供了string(字符串).math(数值计算)和Date(日期)三种对象和其它一些相关的方法.从而为编程人员快速开发强大的脚本程序提供了非常有利的条件. 1.常用内部对象 在javascript中对于对象属性与方法的引用,有两种情况:其一是说该对象是静态对象,即在引用该对象的属性或方法时不需要为它创建实例:而另一种对象则在引用它的对象或方法是

extjs的相关属性

通用属性: labelSeparator:''//表示fieldLabel后不会显示冒号":" readOnly:true//只读 focusCls: 'txtHalfInput'//有焦点时的样式 maxLength:3, enforceMaxLength:true//输入位数check fieldStyle: 'margin-top:3px;'//display上下不对齐解决办法 Ext.button.Button 属性: enableToggle:true//设置按钮为开关状态

【JavaScript】浅析JavaScript对象如何添加属性和方法

向JavaScript类中添加属性和方法,最直观的做法就是在类中定义属性和方法.JavaScript是一门弱语言,除了直接定义还可以用prototype来添加. 下面介绍从外部向JavaScript添加属性和方法的四种方法,首先定义一个类 function MyClass(){} 1,使用类名添加属性 MyClass.prototype.myname="吴兴国01"; 2,使用类名添加方法 MyClass.prototype.myfunc=function(){alert("

[ jquery 方法 text([val|fn]) ] 此方法操作匹配的元素或元素集中的内容,相当于javascript中的innerText属性

取得所有匹配元素的内容:结果是由所有匹配元素包含的文本内容组合起来的文本,这个方法对HTML和XML文档都有效,相当于javascript中的innerText属性,可读可写,但是无法解析HTML标签: 如果传入的是callback,此函数返回一个字符串并且参数解析如下: 1.index为元素在集合中的索引位置 2.text为原先的text值. 实例: <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Ins

javascript 追加date format属性。

Date.prototype.format = function(format){ var o = { "M+" : this.getMonth()+1, //month "d+" : this.getDate(), //day "h+" : this.getHours(), //hour "m+" : this.getMinutes(), //minute "s+" : this.getSeconds()

JavaScript中的CSS属性对照表

JavaScript中的CSS属性对照表(新手必备) JavaScript中的CSS属性对照表是js初学者必备的基础知识 盒子标签和属性对照 CSS语法 (不区分大小写) JavaScript语法 (区分大小写) border border border-bottom borderBottom border-bottom-color borderBottomColor border-bottom-style borderBottomStyle border-bottom-width border

夺命雷公狗---javascript NO:31 私有属性

1.什么是私有属性 在JavaScript代码中,是没有public/protected/private等定义属性的关键词,但是我们可以通过模拟的方式来实现这个过程. 在JavaScript只有两种属性: 一种共有属性 一种私有属性 2.定义私有属性 在构造器内部,通过this定义的属性就是公有属性 在构造器内部,通过var定义的属性就是私有属性 <!DOCTYPE html> <html> <head> <meta charset=’utf-8′> <