常用方法和属性(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类
//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
//克隆出独立的对象
//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类
操作对象
//对字符进行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类
调用函数
//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
//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节点
//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对象
//获取当前对象的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对象
//获取组件所包含的类型为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()
//使组件得到焦点