extjs 关于dom操作的几个库
经过几天的学习研究,发现ext与jquery的设计思路完全是来自两个方向。
jquery是内聚,把所有东西都放在$的下面,而ext是采用分模块的设计思路,每个功能封装一个库。这样就形成了各自的实用风格,jquery由于所有的功能都挂在$下面,所以这种扁平而精炼的功能布局让人能很快上手;但是ext就不一样的,由于各个模块间还有相互调用的关系,所以内部关系是错中复杂。按原理来说ext的各模块是可以单独使用的,但是这个真的实施起来是相当费劲的。所以我觉得jquery更像一个好秘书,你说一句话她就能帮你完成dom的那一摊子事,ext就更像一个老婆,你只能爱她一个,什么事都要围着她转,其他的框架只能给你做小秘,其核心地位绝对不能撼动,否则她会让你死的很难看。
以上是总体的思路,有了这个思路理解和使用具体的功能就会顺心多了。
Ext.Element 、Ext.DomHelper、Ext.DomQuery三个支柱性库。
Ext.Element:
Ext.Element.get()快捷方式Ext.get(),只能以dom的id作为参数去获取Ext.Element对象(Ext.get返回的结果是Ext.Element对象的实例, .dom才是原生的dom)。在Ext中所有组件都是有Id的,这个Id可以是手动指定,也可以是Ext的Id生成机制自动生成。
Ext.DomHelper:
主要是操作dom。
Ext.DomHelper.append()是一个很常用的方法,值得一提的是由于Ext采用了对象缓存机制,在MVC模式下在不同的tab切换的时候如果重新渲染dom,使用Ext.DomHelper.append()添加的元素不会丢失,但是使用原生或者其他框架(比如jq)就会丢失。这就是我说她像一个的老婆原因之一。看几个用法:
一、直接字符串
Ext.DomHelper.append(元素id,'<a href="#">你好</a>');
二、对象
Ext.DomHelper.append(元素id,{tag:ul,children:[{tag:li,html:'一个ul列表的第一项'},{...}]});
Ext.DomHelper.insertHtml()另一个很常用的方法
Ext.DomHelper.insertHtml(位置参数,dom,'<a href="#">你好</a>');
位置参数:beforeBegin、afterBegin、beforeEnd、afterEnd
Ext.DomHelper.overwrite(dom的id,'<a href="#">你好</a>');相当于原生的 .innerHtml="";所以是重写容器中的内容。
var tpl = Ext.DomHelper.createTemplate("<li>{content}</li>");
tpl.overwrite(domID,{content:'内容'});
引用文件有问题,会报错
还有另一种用法:
var tpl = new Ext.DomHelper.createTemplate({tag:"li",html:"{content}"});,同样的报错...哪位大神路过望指点
如果是列表,那就要借助for循环append了。
Ext.DomQuery 查找dom元素的利器
Ext.query('div')、Ext.query('[id="domId"]')、Ext.query('div:first-child').支持绝大部分的CSS3选择器
Ext.query() 是Ext.DomQuery.select()的快捷方式, 返回标准dom。
转载于:https://www.cnblogs.com/longze/p/3297627.html
extjs 关于dom操作的几个库相关推荐
- ihtml2document能不能根据id获取dom_回到基础:什么是DOM及DOM操作?
译者:前端小智 来源:valentinog 为了保证的可读性,本文采用意译而非直译. 文本主要介绍文档对象模型(DOM),了解什么是DOM操作,以及如何使用砶 DOM API 与 JS 中的 Web ...
- 什么是DOM及DOM操作?
什么是 DOM ? DOM(文档对象模型)是针对于xml但是扩展用于HTML的应用程序编程接口,定义了访问和操作HTML的文档的标准. W3C文档对象模型是中立于平台和语言之间的接口,它允许程序和脚本 ...
- MV* 框架 与 DOM操作为主 JS库 的案例对比
最近分别使用 Zepto 和 Avalon框架写了个 SPA项目,贴出来讨论下 JS DOM操作为主 JS库 与 MV* 框架的对比 案例(MV* 框架 与 DOM操作 JS库 实例对比) 购物车页面 ...
- jQuery库的简单使用:jQuery中的 DOM 操作,增删改查,复制,替换,包裹,属性和样式操作
jQuery中的 DOM 操作 查 查找属性节点: 通过 jQuery 选择器完成. 操作属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值 ...
- 为什么DOM操作很慢
转自:http://kb.cnblogs.com/page/534571/ 一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来 ...
- pyV8不支持dom操作,关于PyV8的支持DOM的疑问
pyV8不支持dom操作,关于PyV8的支持DOM的疑问 PYV8只支持纯js语句.不过官方提供了w3c.py以及brower.py,可以基于此来完成,但这个用起来还是比较麻烦. 在爬取网站时,需要提 ...
- 关于 DOM 操作的几个类型
DOM是Document Object Model的缩写,意思是文档对象模型,是由W3C制定的一套访问和操作XML(eXtensible Markup Language)文档的标准,即API.比如DO ...
- java与jquery的选择器区别_java day44【JQuery 基础:概念,快速入门,JQuery对象和JS对象区别与转换,选择器,DOM操作,案例】...
第一章JQuery 基础 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScrip ...
- DOM操作 append prependTo after before
通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况:如果我们通过AJAX获取到数 ...
最新文章
- 交互设计实用指南系列 – 我们眼中的交互设计
- 人脸识别算法_格灵深瞳在人脸识别算法测试(FRVT)中斩获全球第一
- centos 没有可用的网络设备
- 基于flink+clickhouse构建亿级电商全端用户画像平台训练营
- Processing 闪烁的圆 动画效果
- 霍金这次想帮AI说点好话,后来没忍住……
- linux cut 命令详解
- 数字逻辑练习题(七) 用74LS138译码器和门电路实现逻辑函数
- 系统U盘还原成普通U盘
- Qt之小学徒学习记录分享
- 使用 admin 管理后台
- LTO助推磁带大容量存储技术超越磁盘HDD
- Springboot常使用配置属性
- focusky导出html修改,Focusky输出HTML MP4 EXE APP ZIP动画演示文件
- 中国科学院院士徐宗本:人工智能的基石是数学
- knockoutjs中的visible绑定
- Win7 IE11、Flash插件、.NET Framework组件 安装教程
- 充电电流用软件测试准吗,充电设备 篇一:一次不严谨的测试,但估计iPhone用户看了都会买...
- 世界最牛实验室,堪称诺贝尔奖孵化器!到底是个怎样神奇的存在?!
- android摇骰子源代码,Android实现微信摇骰子游戏
热门文章
- ubuntu 18.10增加和设置Swap交换分区
- centos7下安装libiconv失败
- 在SQL Server中通过PowerUpSQL获得Windows自动登录密码
- 如何理解5G空口(NR)?
- ElasticSearch-5.3.1集群环境搭建,安装ElasticSearch-head插件,安装错误解决
- Debian For ARM Webmin Server
- C# 中XML序列化与反序列化学习笔记
- 【转载】面向对象建模与数据库建模两种分析设计方法的比较
- ROS学习笔记7(理解ROS服务和参数)
- pip工具可以打包python源代码吗_将python源文件打包成exe文件