此文用来记录学习笔记

 
•我们已经学过了Element这个类,无疑是非常强大的,里面提供了丰富的方法供我们使用,但是Ext为了更加的方便我们去操作DOM元素,特提供了DomHelper这个辅助的工具类。下面我们就一起学习下DomHelper
•首先从API来看,这个类暴露出的public方法并不是特别多。仅仅13个方法而已。如果想生成dom节点,在这里不建议使用原生的方法去生成dom节点,原因是代码量比较大的时候性能比较低、其二是自己组装HTML字符串比较麻烦。在Ext里,DomHelper对象类似一个元素生成器,用于解决此类问题。一般的javascript框架底层都会有生成html代码的类似功能函数。
•DomHelper常用方法:
–createHtml或markup方法
–createDom方法
–append方法
–insertHTML方法
–overwrite方法
–createTemplate方法
–applyStyles方法
 
举好多栗子
Ext.onReady(function () {

    //准备工作
Ext.create('Ext.panel.Panel', {
title: 'DomHelper-元素生成器的使用',
width: '90%',
height: 400,
renderTo: Ext.getBody(),
html: '<div id=d1>我是d1</div>'
}); //DomHelper
//1: createHtml或markup方法
//配置项说明:
//tag 元素的名称
//children/cn表示子元素
//cls表示样式
//html:文本内容
var html = Ext.DomHelper.createHtml({
tag:'ol' ,
cn:[
{tag:'li',html:'item1'},
{tag:'li',html:'item2'}
]
});
console.info(html); var html = Ext.DomHelper.createHtml({
tag:'div' ,
children:[
{tag:'a' ,html:'bjsxt网站' , href:'www.bjsxt.cn'},
{tag:'input' , value:'点击' , type:'button' }
]
});
console.info(html); //2: createDom方法 (这个方法是生成原生的dom节点,不推荐使用)
var dom = Ext.DomHelper.createDom({
tag:'div' ,
html:'我是div'
});
console.info(dom);
alert(dom.nodeName); //3: append方法
Ext.DomHelper.append('d1',{
tag:'ul' ,
cn:[{tag:'li',html:'1111'},{tag:'li',html:'2222'}]
});
Ext.DomHelper.append('d1','<span>我是span内容</span>'); //4:insertHtml方法 //这个方法就是为了操作原生的node节点的
//参数说明:String where, HTMLElement/TextNode el, String html
Ext.DomHelper.insertHtml('beforeBegin',Ext.getDom('d1'),'<h1>我是标题!!</h1>') //5:overwrite方法
Ext.DomHelper.overwrite('d1',{tag:'span',html:'我是覆盖的span'});
Ext.DomHelper.overwrite('d1','aaaaa'); //6:createTemplate方法
var tp = Ext.DomHelper.createTemplate('<h1>{text}</h1><h2>{text2}</h2>'); //return Ext.Template
tp.overwrite('d1',{text:'我是被替换的内容!!',text2:'我也是替换的内容!!'}); //7:applyStyles方法
Ext.DomHelper.applyStyles('d1',{
width:'100px',
height:'100px',
backgroundColor:'green'
}); });

给各位推荐个文章网www.fishcmonkey.com,学习之余提高文学修养;

Ext JS学习第十四天 Ext基础之 Ext.DomHelper的更多相关文章

  1. Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  2. Ext JS学习第十天 Ext基础之动态加载JS文件(补充)

    此文用来记录学习笔记: •Ext4.x版本提供的一大亮点就是Ext.Loader这个类的动态加载机制!只要遵循路径规范,即可动态加载js文件,方便把自己扩展组件动态加载进来,并且减轻浏览器的压力. • ...

  3. Ext JS学习第十五天 Ext基础之 Ext.DomQuery

    此文同来记录学习笔记 •Ext.dom.Query 嗯,这个类一看就是到时做什么事儿的,不用我去过多的解释了.这个类一共提供了8个方法供开发人员去使用. •要说最常用的方法,无非就是Ext.query ...

  4. Ext JS学习第十天 Ext基础之 扩展原生的javascript对象(二)

    此文来记录学习笔记: 今天继续说Ext.Array,Ext.Function,Ext.Date,Ext.Error ------------------------------------------ ...

  5. Ext JS学习第十六天 事件机制event(一)

    此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件,相信你一定不陌生, 基本事件是什么?就类似于click.keypress.focus. ...

  6. 介绍Ext JS 4.2的新特性的《深入浅出Ext JS》上市

    以用户为中心的时代,应用的界面外观变得越来越重要.然而,很多程序员都缺乏美术功底,要开发出界面美观的应用实属不易.Ext JS的出现,为广大程序员解决了这一难题.它有丰富多彩的界面和强大的功能,是开发 ...

  7. python3.4学习笔记(十四) 网络爬虫实例代码,抓取新浪爱彩双色球开奖数据实例

    python3.4学习笔记(十四) 网络爬虫实例代码,抓取新浪爱彩双色球开奖数据实例 新浪爱彩双色球开奖数据URL:http://zst.aicai.com/ssq/openInfo/ 最终输出结果格 ...

  8. Linux学习之十四、管线命令

    Linux学习之十四.管线命令 地址:http://vbird.dic.ksu.edu.tw/linux_basic/0320bash_6.php

  9. 风炫安全WEB安全学习第二十四节课 利用XSS钓鱼攻击

    风炫安全WEB安全学习第二十四节课 利用XSS钓鱼攻击 XSS钓鱼攻击 HTTP Basic Authentication认证 大家在登录网站的时候,大部分时候是通过一个表单提交登录信息. 但是有时候 ...

随机推荐

  1. jquery validationEngine 使用ajax验证不通过也提交表单

    转自 http://mylfd.iteye.com/blog/2007227 validationEngine给我们为前端的表单验证减少了很大的工作量.大部分情况我们使用validationEngin ...

  2. ubuntu-10.04的测试环境 安装测试 Coreseek开源中文检索引擎-Sphinx中文版

    主要参考文档:http://www.coreseek.cn/products-install/install_on_bsd_linux/ 一. 32位版本: coreseek安装需要预装的软件: ap ...

  3. linux下卸载安装程序及其配置的方法

    首先要知道软件包的名字 dpkg --list 如果知道关键字的话可以用下面这种方法 dpkg --list|grep -i ‘packagename’ 找到所要删除的软件包之后 sudo apt-g ...

  4. jquery-plugin-biggerLink,highLight-层加亮_andy 阳光生活_百度空间

    How to get the xpath by clicking an html element How to get the xpath by clicking an html element Qu ...

  5. 第七届河南省赛10402: C.机器人(扩展欧几里德)

    10402: C.机器人 Time Limit: 2 Sec  Memory Limit: 128 MB Submit: 53  Solved: 19 [Submit][Status][Web Boa ...

  6. jQuery validate api(转)

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...

  7. Android四大组件之Activity详解

    一.Activity的概要说明 我看过Activity的源码,Activity类注释大概是这样解释的:几乎所有的Activity都是与用户交互用的,我想用了一个几乎的意思应该是排除一些纯展示界面吧,因 ...

  8. python生成器之斐波切纳数列

    面试的时候遇到过这样的一个题目: 斐波切纳数列1,2,3,5,8,13,21.........根据这样的规律,编程求出400万以内最大的斐波切纳数,并求出是第几个斐波切纳数. 方法一: 方法二:这个方 ...

  9. BZOJ 3931: [CQOI2015]网络吞吐量( 最短路 + 最大流 )

    最短路 + 最大流 , 没什么好说的... 因为long long WA 了两次.... ------------------------------------------------------- ...

  10. Hadoop学习笔记(1)概述

    写在学习笔记之前的话: 寒假已经开始好几天了,似乎按现在的时间算,明天就要过年了.在家的这几天,该忙的也都差不多了,其实也都是瞎忙.接下来的几点,哪里也不去了,静静的呆在家里学点东西.所以学习一下Ha ...