Javascript - ExtJs - 常用方法和属性

常用方法和属性（Common methods and attributes）

ExtJs中的对象

Ext.Component

Ext组件对象，表示一个可渲染的组件。

Ext.dom.Element

Ext元素对象，通常称为Element对象，Ext.dom.Element是对Html Dom元素的封装。在官方API文档中提到的Element，指的就是Ext元素对象，可别当成dom元素。Html Dom被封装为Element，Element被封装为Component组件。获取HtmlDom有两种方式：Element.dom或Element.getDom()。

Ext.dom.CompositeElement

Ext.dom.Element的集合。

Ext命名空间下的类型和方法

Ext类

Ext.onReady(callBack,scope,delay)
//delay：调用回调的延迟毫秒数，指定此参数貌似会形成死循环
//文档装载完毕将执行回调

/*===============编码解码===============*/
Ext.encode(obj)
//obj：Array | Json
//将Array或Json包装成Json格式的字符

Ext.decode(obj)
//obj：ArrayString | JsonString
//将Array字符或Json字符解码为本地Array或Json对象

Ext.urlAppend(urlhead, queryString)
//urlhead：url头部
//queryString：查询字符串
//为url追加查询字符串

Ext.urlEncode(url)
//将url字符编码，以便可以在网络间传输

/*===============选择元素、组件、存储器===============*/
Ext.select(selector)
//获取Element元素，返回CompositeElementLite[ ]

Ext.query(selector)
//获取Html Dom元素，返回Dom元素数组

Ext.get(domID | dom | Element )
//将参数所指转化为Element并返回它
var el = Ext.get("box");

Ext.fly(domID | dom | Element)
//将参数所指转化为Element并返回它，与get区别仅在于fly方法会将结果自动返回到第一次定义的变量里
var el = Ext.fly("box");
Ext.fly("box2");
Ext.fly("box3");
alert(el.dom.id); //box3

Ext.getDoc()
//获取html节点的Element表示

Ext.getBody()
//获取Body节点的Element表示 
    
Ext.getDom(domID | dom | Element)
//获取Element的dom表示，如果需要直接操纵dom元素，此方法非常实用

Ext.getCmp(ComponentID)
//根据Ext组件的ID获取该组件对象，得到组件后可调用以set为前缀的方法去设置组件的各种属性，更多组件的查找方式参看：ExtJS 4.2 组件的查找方式

Ext.getStore(storeID)
//根据存储器的storeId获取存储器对象

/*===============迭代===============*/
Ext.each(x, fn)
//x：Array | CompositeElement  
//fn：function（item、index、allItems）  
//等同的方法还有：
//ArrayObj.forEach、Ext.each、Ext.Array.forEach、Ext.Array.each，
//数组对象只有forEach方法，其余类似的方法则是Ext或Ext.Array的静态方法
//退出当前循环不能使用continue，可用return作为替代
//类似的方法还有：
//Ext.Array.some()，回调函数返回为true，就终止整个循环
//Ext.Array.every()，回调函数返回为false，就终止整个循环

/*===============其它操作===============*/
Ext.typeOf(x)
//测试参数的数据类型，可能的值如下：
//undefined | null | string | number | boolean | date | function | object | array | regexp | element（dom元素） | textnode | whitspace（空的文本节点）

Ext.clone(x)
//x：object | array | dom 
//克隆出独立的对象

 

Ext.isEmpty(x, [ allowString ] )
//x：对象 | 字符 
//allowString：字符是否允许空
//测试对象是否为空
//如果x=string，就需要提供allowString
//如果allowString是true，则返回false，否则返回true

/*===============销毁对象、组件===============*/
Ext.destroy(x)
//销毁组件，包括它的子组件和它注册过的事件。可一次性删除多个x，参数以逗号隔开

Ext.destroyMembers(obj, member1, member2)
//删除对象成员

/*===============为元素注册事件===============*/
Ext.addBehaviors(Json)
//Json：{ "css选择器" : fn }
//为Html元素绑定事件
//为id为box的元素，其包含的span、p的类名为pClass的元素绑定click事件
//事件名以@开头
Ext.addBehaviors({
    "#box span,p.pClass@click": function (e) { }
});

Ext.Object类

操作对象

Ext.Object.toQueryString(string,bool)
//对字符进行Url格式化编码
//bool：默认false，如果为true则启用递归转码
var student={
    name:"sam",
    age:32,
    score:[{name:"语文",score:90},{name:"数学",score:80}]
}
var str = Ext.Object.toQueryString(student,true);
//输出：
"name=sam&age=32&score%5B0%5D%5Bname%5D=%E8%AF%AD%E6%96%87&score%5B0%5D%5Bscore%5D=90&score%5B1%5D%5Bname%5D=%E6%95%B0%E5%AD%A6&score%5B1%5D%5Bscore%5D=80"

Ext.Object.fromQueryString(string, bool)
//对字符进行Url格式解码，
//bool：默认false，如果为true则启用递归解码
var student = {
    name: "sam",
    age: 32,
    score: [{ name: "语文", score: 90 }, { name: "数学", score: 80 }]
}
//将student编码之后得到str
var str = "name=sam&age=32&score%5B0%5D%5Bname%5D=%E8%AF%AD%E6%96%87&score%5B0%5D%5Bscore%5D=90&score%5B1%5D%5Bname%5D=%E6%95%B0%E5%AD%A6&score%5B1%5D%5Bscore%5D=80";
var str = Ext.Object.fromQueryString(str, true);
Ext.Msg.alert('', str.score[0].name + "<br>" + str.score[1].name);

Ext.Object.toQueryObjects(obj)
//将对象转化为数组，对构造查询字符串有点用
var student = {
    name: "sam",
    age: 32,
    score: [{ name: "语文", score: 90 }, { name: "数学", score: 80 }]
}
var ary = Ext.Object.toQueryObjects("student", student, true);
var msg = "[<br>";
ary.forEach(function (item) {
    msg += "<span style='margin-left:30px;'></span>" + Ext.encode(item) + "<br>";
});
msg += "]";
document.write(msg);

 

Ext.Object.getValues(x)
//获取给定对象所有的值所组成的数组

Ext.Object.getKey(obj,value)
//根据value获取对象的key

Ext.Object.getKeys(obj)
//获取对象所有的key，key以数组返回

Ext.Function类

调用函数

Ext.Function.createDelayed(callBack,delay)
//delay：毫秒
//在指定时间后执行回调
var fn = Ext.Function.createDelayed(function () {
    alert("");
}, 2000);
fn(); //2秒后弹出

Ext.Function.defer(callBack,delay)
//delay：毫秒
//在指定时间后执行回调，与createDelayed区别仅在于不需要手动调用fn
var fn = Ext.Function.defer(function () {
    alert("");
}, 2000);

Ext.DomQuery类

过滤Html Dom Element

Ext.DomQuery.filter(HtmlDomArray, selector, nonMatches)
//selector：选择器
//nonMatches：bool，是否不取相反的结果
//从数组中筛选出符合条件的Html Dom元素，返回匹配后的新数组

<div id="sam" class="box divbox"></div>
<div id="korn" class="box divbox"></div>
<div id="leo" class="box"></div>

Ext.onReady(function () {
    var els = Ext.query(".box");
    els = Ext.DomQuery.filter(els, "div[class='divbox']", true);
    Ext.each(els, function (item, index, allItems) {
        alert(item.id); //sam、korn
    });
});

Ext.domHelper类

操纵Dom节点

Ext.domHelper.append(parent, x, bool)
//parent：htmlString | Ext Dom Element | Html Dom Element
//x：htmlString | Html Dom Element | Ext Dom Element | [ ] ，[ ]格式如下：
//[ { tag：'Html标签名'  , cls : 'Html标签的类名'  , id: 'Html的ID' , type : '表单元素的type' , cn:[子元素1，子元素2] , name : '表单元素的name' , value : '表单元素的值或标签包含文本',html:'子html标签名称' }]
//bool：是否返回Ext Dom Element，默认false，默认返回Html Dom Element
//Json'sforHtmlSet :
//将x添加到parent所包含的末尾
//示例：
Ext.DomHelper.append("box", "<span><b>hello</b></span>", true);
//等同于
Ext.DomHelper.append("box", [
    {
        tag: 'span', cn: [
            { tag: 'b', cls: 'fontClass', id: 'fontID', html: 'hello world' }
        ]
    }
], true);

Ext.domHelper.applyStyles(Html Dom Element | Ext Dom Element, Json)
//设置css
//示例：
Ext.DomHelper.applyStyles("box", {
    'background-color':"red",
    width: 200,
    height: 200,
    border:"1px solid black"
});

Ext.domHelper.insertAfter(x,y)
//x：htmlString | Html Dom Element | Ext Dom Element
//y：htmlString | Html Dom Element | Ext Dom Element | [ ]，[ ]格式如下：
//[ { tag：'Html标签名'  , cls : 'Html标签的类名'  , id: 'Html的ID' , type : '表单元素的type' , cn:[子元素1，子元素2] , name : '表单元素的name' , value : '表单元素的值或标签包含文本',html:'子html标签名称' }]
//将y插入到x之后

Ext.domHelper.insertBefore(x,y)
//x：htmlString | Html Dom Element | Ext Dom Element
//y：htmlString | Html Dom Element | Ext Dom Element | [ ]，[ ]格式如下：
//[ { tag：'Html标签名'  , cls : 'Html标签的类名'  , id: 'Html的ID' , type : '表单元素的type' , cn:[子元素1，子元素2] , name : '表单元素的name' , value : '表单元素的值或标签包含文本',html:'子html标签名称' }]
//将y插入到x之前

Ext.domHelper.insertHtml(where,x,y)
//x：htmlString | Html Dom Element | Ext Dom Element
//y：htmlString | Html Dom Element | Ext Dom Element | [ ]，[ ]格式如下：
//[ { tag：'Html标签名'  , cls : 'Html标签的类名'  , id: 'Html的ID' , type : '表单元素的type' , cn:[子元素1，子元素2] , name : '表单元素的name' , value : '表单元素的值或标签包含文本',html:'子html标签名称' }]
//where：条件
//将y插入到x的由where指示的某个位置
//where可能的值：beforeBegin（插入到x的开始标签之前）afterBegin（插入到x的开始标签之后）afterEnd（插入到x的结束标签之后）beforeEnd（插入到x的结束标签之前）

Ext.domHelper.markup(x) 
//x：htmlString | Html Dom Element | Ext Dom Element
//获取该对象的html块

Ext.domHelper.overwrite(x,y) 
//x：htmlString | Html Dom Element | Ext Dom Element
//用y替换x包含的所有html

Ext.domHelper.createTemplate(x) 
//x：htmlCode
//创建一个html模板。此方法的好处在于简化需要重复创建相同结构的html，达到复用
//示例：
var htmlTemplate = Ext.DomHelper.createTemplate("<div id='{id}'>{value}</div>");//创建模板，定义占位变量
htmlTemplate.append(Ext.get("box"), { tag:"div",id: "childBox1",value:"hello" });
htmlTemplate.append(Ext.get("box"), { tag:"div",id: "childBox2", value: "world" });

Ext.dom.Element对象

dom
//获取当前对象的Html Dom Element表示

inputEl
//获取当前对象包含的输入框元素，返回一个Ext Dom Element，可调用它的getValue方法获取到输入框的数据

setStyle(Json)
//设置该对象的css样式，类似的有applyStyles
//示例：
Ext.get("box").setStyle({
    background: "red",
    margin: 10
});

getCount( ) 
//获取Element数组元素的总数

hide( )    
//隐藏Element。

highlight( ) 
//使Element背景高亮，呈现从显黄到渐隐的动画

on(eventType,fn) 
//eventType是事件触发方式，fn是事件处理函数
//示例：
Ext.get("TestBox").on("click", function () {
    Ext.MessageBox.alert("", "event click！");
});

Ext.Component对象

inputEl
//获取组件所包含的类型为input的Ext Dom Element
//示例
Ext.getCmp("xxx").inputEl.getValue();//获取id为xxx的组件，获取该组件包含的输入框的值

add(component)
//将指定组件插入到当前组件的子组件集合的末尾处

insert(number,component)
//将指定组件插入到组件的子组件集合的指定索引处
//示例
var newItem = { xtype: "displayfield", value: "未选择任何权限", hideLabel: true, labelWidth: 130, fieldStyle:"color:white;", style: 'color:white;background:red;'};
Ext.getCmp("formEdit").insert(0,newItem);

getEl( )
//获取包含了当前组件的最顶层的组件的Ext.dom.Element对象

destroy() 
//销毁自身，包括子组件和注册的事件

add(component | component[ ])
//为当前组件添加子组件
//子组件可以在服务端创建，打包成Json字符，通过ajax传输到客户端，在父组件渲染完成之前将Json插入到父组件中

update(x)
//更新组件的html配置项，如果已经配置过html项，则用x替换原来的html

focus()
//使组件得到焦点

　　

Javascript - 学习总目录