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);

 
Javascript - ExtJs - 常用方法和属性

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 - 学习总目录

上一篇:ExtJs 第二章,Ext.form.Basic表单操作


下一篇:[原创]cocos2d-x + Lua接入iOS原生SDK的实现方案