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");
});
分享到:
相关推荐
记得最早刚接触网页操作DOM元素的时候是做毕业设计的时候,用JQuery操作的。毕业工作后是从事C++方面的编程,两年后,又重新解决了网页编程,不过这次不是用JQuery了,用的是ExtJS。就我经验来看,程序员是一个需要...
4.table ie处理问题,需要强制指定用dom操作 5.colSpan cellSpacing hideFocus (colspan cellspacing ie dom 设置 有问题 ,直接html 属性小写没问题) 修改代码时请注意,IE 表格操作很脆弱,只能直接DOM
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
资源名称:ExtJS开发实战内容简介:《extjs开发实战》从extjs中最基本的概念开始,例如dom操作、面向对象、ponent/container模型的生命周期、组件管理等,并介绍如何使用项目开发中最常使用的各种组件,例如 panel...
在使用Ext开发的应用程序中,组件Component是最高层次的抽象,是直接给用户使用的,Ext Element是Ext的底层API,主要是由Ext或自定义组件调用的,而DOM是W3C标准定义的原始API,Ext的Element通过操作DOM 来实现页面...
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
第一章 ExtJs大比拼JQuery:Dom文档操作 3 一、选择器 4 二、属性 8 四、筛选 10 五、文档处理 11 六、CSS 13 七、事件 14 第二章 ExtJs对js基本语法扩展支持 16 一、动态引用加载 16 二、对类的封装 17 三、基本...
在我的随笔Extjs Tree + JSON + Struts2中我介绍了如何异步加载一个Extjs的树,但是很多网友留言说不能成功操作。现在我自己做了一个所有源代码的包,供大家下载。 有几点事项请大家注意 1、blogjava的文件上载要求...
传入一个CSS选择符的参数,然后依据该CSS选择符从当前元素下面,形成期待匹配子节点的集合,也就是“选择”的操作,最后以一个Ext.CompositeElement类型的组合元素的形式返回。如果以Ext.select()调用表示从document...
底层API(core):底层API中提供了对DOM操作、查询的封装、事件处理、DOM查询器等基础的功能。其它控件都是建立在这些底层api的基础上,底层api位于源代码目录的core子目录中,包括DomHelper.js、Element.js等文件,...
extjs4.0常用的操作难题,不容易找到的资料,属性和方法,以及板面,开发经验分享
基于元素的开发部分讲解了在DOM元素基 础上扩展的Ext JS元素,包括元素操作、元素查找、元素样式、动画特效和拖曳实现。深入组件的开 发部分讲解Ext JS组件的原理及各大组件的应用,包括组件模型、容器模型、布局...
《Ext JS开发实战》讲解DOM操作、面向对象、Component及Container等基础知识;结合PHP框架与后台服务器,学习如何通过Ajax交换数据;针对页面布局、各类组件、菜单与工具栏等,通过示例说明各种设定;针对4.0版本,...
ExtJS的类库由以下几部分组成: 底层API(core):底层API中提供了对DOM操作、查询的封装、事件处理、DOM查询器等基础的功能。其它控件都是建立在这些底层api的基础上,底层api位于源代码目录的core子目录中,包括...
第6章 选择器与dom操作 / 215 6.1 ext js的选择器:ext.domquery / 215 6.1.1 选择器的作用 / 215 6.1.2 使用ext.query选择页面元素 / 215 6.1.3 基本选择符 / 223 6.1.4 属性选择符 / 229 6.1.5 css属性值...
jQuery Loading插件用于当DOM元素加载或变化期间,对其进行遮挡阻止用户操作并告知有些后台任务还在进行。实现“正在加载中…”的效果。整个插件只有1kb左右。效果跟extjs遮罩(锁屏)效果基本一样。
Ext Core是一款具有多项功能的轻型JavaScript库,基于MIT许...Core库对DOM操作、Ajax、事件、动画、模板、00机制等的任务都有相应的支持。Core库基于MIT方式发布,无论是一般的动态页面和简单的应用程序都可选择使用。