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