extjs操作dom

来源:互联网 发布:好用的精华液 知乎 编辑:程序博客网 时间:2024/05/19 02:44

var elem = Ext.get('start'); //查找id="start"的元素

var body = Ext.query('body')[0];//查找多个dom元素

Ext.query('div')

Ext.query('[id="domId"]')

Ext.query('div:first-child').支持绝大部分的CSS3选择器

var yahooLink=Ext.get('yahooLink').getAttribute('href').trim();//获取元素的属性值,返回该属性的值,类型为String,因此可调用trim()方法来去除头/尾的空白

varconfigObj={
href:'http://tw.yahoo.com',
target:'_blank'
};
Ext.get('readyToGo').set(configObj);//配置属性值

如果HTML元素是表单元素,那么可以通过getValue()/set()来读取/设置value属性,比如<input id="myName"/>标签的读取/设置可以写成如下形式:

//读取
varmyName=Ext.get('myName').getValue().trim();
//设置
Ext.get('myName').set({value:"H.Chung"});

var childNode=Ext.get('myBookList').child('li');//选择符合选择器条件的子节点

var mySon=Ext.get('myBookList').down('li');

var elemMessageArray = Ext.select("span[group='message_group']"); //查找多个dom元素

var newCssObj = {}; 

if (isInfo) { 
newCssObj["class"] = "info"; 
} else { 
newCssObj["class"] = "error"; 


// 然后对每个元素重新设置css样式就行了 
elemMessageArray.each( function(el) { 
el.set(newCssObj); //为dom元素设置class
el.update(text); //更新dom元素里的内容
el.show("display"); //设置dom元素的显示与隐藏
}); 

body.className = "myStyle"; //为dom元素添加类

elem.on('click', function(e, t) { 
alert(t.id); 
});//为dom元素添加点击事件,能获取dom元素的属性值

 Uncompleted = Ext.get('uncompleted'); 
elemUncompleted.setDisplayed(true); //元素的显示和隐藏    元素虽然消失了,但是同样还是会占用了元素的空间位置,不便布局

el.show("display"); 
el.hide("display");//没有了动画效果,但是不会占用元素的位置

0 0