ExtJS 操作Dom

 

1.获取dom 

 

通过id获取： 

var el = Ext.get("chart"); 

Ext.fly("div");

 

var el=Ext.get('test'); 

el.dom.innerHTML='Test';  

 

2.添加样式

Ext.fly('test').addClass('elCss');

Ext.fly('test').setStyle({ 

 

       color: 'red', 

 

       background: 'yellow', 

 

       font-weight: 'bold' 

 

       })    //还可以获得属性 

 

 

var e = Ext.select("div[title=t1]");

 

//属性

//返回第一个匹配元素的title属性

alert(e.first().getAttribute("title"));

//设置第一个匹配元素的title属性

e.first().set({ "title": "newTitle" });

 

//CSS类

//给第一个匹配元素添加c2样式

e.addCls("c2");

//移除

e.removeCls("c1");

//轮回

e.toggleCls("c2");

//检查c2样式是否存在

e.hasCls("c2");

 

//Html

//获取Html

e.first().dom.innerHTML;

//更新Html

e.first().update("<b>更新后的Html</b>");

 

//值

e = Ext.get("text1");

e.getValue();

e.set({ value: 150 });

 

3.Ext选择器

 

Ext.query('div', Ext.getDom('test'));      

Ext.query("span"); 

Ext.query("span", "foo"); 

Ext.query(".foo");

Ext.query("*"); 

Ext.query("*[class^=b]"); 

Ext.query("*[class$=r]"); 

Ext.query("*[class*=a]"); 

Ext.query("*{color=red}");

Ext.query("*{color=red} *{color=pink}"); 

Ext.query("span:first-child"); 

Ext.query("a:last-child") 

Ext.query("span:nth-child(2)") 

Ext.query("div:has(a)") 

 

4.Ext筛选

 

var e = Ext.select(".c1");

 

//过滤

//获取匹配的第二个元素

e.item(1);

//再次筛选，属性title=t1的div,集合中不满足条件的元素自动移去

e.filter("div[title=t1]");

e = Ext.select(".c1");

//父节点Id=div1时返回true

e.first().parent().is("#div1");

 

//查找

//获取集合中第一个，最后一个：

e.first();

e.last();

//单个元素的前一个，匹配选择器的后一个:

e.item(1).next("div[title=t2]");

e.item(1).prev();

var e2 = Ext.get("div1");

//获取子节点的第一个，最后一个：

e2.first();

e2.last();

 

 

 

5.文本处理

 

var e = Ext.select("div .c1");

//插入

//分别在相对于文档e的四个位置插入html：

e.first().insertHtml("afterBegin", "<b>新内容</b>");

e.first().insertHtml("beforeEnd", "<b>新内容</b>");

e.first().insertHtml("beforeBegin", "<b>新内容</b>");

e.first().insertHtml("afterEnd", "<b>新内容</b>");

 

//包裹

e.wrap({

    tag: 'p'

});

 

//用text1替换集合第五个元素

e.replaceElement(4, "text1", true);

 

//替换用当前元素去替换掉div2标签

e.first().replace("div2", true);

 

//删除

e.first().remove();

 

//移除集合中第三个元素

e.removeElement(2, true);

 

 

6.Css

 

 

var e = Ext.get("div1");

//设置样式

e.setStyle("width", "550px");

e.applyStyles({

    height: "500px",

    color: "red",

    position: "absolute"

});

//设置高度，带动画效果

e.setHeight(100, true);

//设置定位

e.setLeft("50px");

e.setTop("10px");

e.setLeftTop("100px", "50px");

//设置尺寸

e.setSize("100px", "200px");

 

//设置xy坐标

e.setXY([10, 10]);

 

//获取宽度

e.getWidth();

 

//获取坐标

e.getXY();

 

 

7.事件处理

 

 

var e = Ext.get("div1");

//事件绑定

//给元素绑定click事件：

var clickhandler = function () {

    Ext.Msg.alert("消息", "click事件被触发！");

};

e.on("click", clickhandler);

//解除绑定click事件

e.un("click", clickhandler);

 

//事件切换

e.hover(function () {

    e.setStyle("background-color", "Red");

}, function () {

    e.setStyle("background-color", "Aqua");

});