Ext JS学习第十四天 Ext基础之 Ext.DomHelper
此文用来记录学习笔记
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的更多相关文章
- Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
code&monkey Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...
- Ext JS学习第十天 Ext基础之动态加载JS文件(补充)
此文用来记录学习笔记: •Ext4.x版本提供的一大亮点就是Ext.Loader这个类的动态加载机制!只要遵循路径规范,即可动态加载js文件,方便把自己扩展组件动态加载进来,并且减轻浏览器的压力. • ...
- Ext JS学习第十五天 Ext基础之 Ext.DomQuery
此文同来记录学习笔记 •Ext.dom.Query 嗯,这个类一看就是到时做什么事儿的,不用我去过多的解释了.这个类一共提供了8个方法供开发人员去使用. •要说最常用的方法,无非就是Ext.query ...
- Ext JS学习第十天 Ext基础之 扩展原生的javascript对象(二)
此文来记录学习笔记: 今天继续说Ext.Array,Ext.Function,Ext.Date,Ext.Error ------------------------------------------ ...
- Ext JS学习第十六天 事件机制event(一)
此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件,相信你一定不陌生, 基本事件是什么?就类似于click.keypress.focus. ...
- 介绍Ext JS 4.2的新特性的《深入浅出Ext JS》上市
以用户为中心的时代,应用的界面外观变得越来越重要.然而,很多程序员都缺乏美术功底,要开发出界面美观的应用实属不易.Ext JS的出现,为广大程序员解决了这一难题.它有丰富多彩的界面和强大的功能,是开发 ...
- python3.4学习笔记(十四) 网络爬虫实例代码,抓取新浪爱彩双色球开奖数据实例
python3.4学习笔记(十四) 网络爬虫实例代码,抓取新浪爱彩双色球开奖数据实例 新浪爱彩双色球开奖数据URL:http://zst.aicai.com/ssq/openInfo/ 最终输出结果格 ...
- Linux学习之十四、管线命令
Linux学习之十四.管线命令 地址:http://vbird.dic.ksu.edu.tw/linux_basic/0320bash_6.php
- 风炫安全WEB安全学习第二十四节课 利用XSS钓鱼攻击
风炫安全WEB安全学习第二十四节课 利用XSS钓鱼攻击 XSS钓鱼攻击 HTTP Basic Authentication认证 大家在登录网站的时候,大部分时候是通过一个表单提交登录信息. 但是有时候 ...
随机推荐
- Hive Map 端OOM 异常
怪异现象:数据量不大,且不是Reduce端OOM,是Map端OOM Map Task运行的时候数据流中包含了非法字符例如:EOF.NOP等东西,导致BufferedReader读取和StreamDec ...
- js写的简单轮播图
这个轮播图代码是从网上找来的,专门找了个写法简单的,只是作为一个小练习,大概原理如下: 1.首先是图片切换2.自动播放3.调用自动播放4.移动到容器上边停止播放,离开自动播放5.移动到导航上停止播放, ...
- eclipse 搭建Robotium环境--apk 环境搭建
1.配置好android sdk ,java环境 2.重新签名apk文件 在用户目录下,会有一个.android的目录,把re-sign.jar放在该目录下.执行命令 java -jar re-sig ...
- 转: Promises与Javascript异步编程
在如今都追求用户体验的时代,Ajax应用真的是无所不在.加上这些年浏览器技术.HTML5以及CSS3等的发展,越来越多的富Web应用出现:在给与我们良好体验的同时,Web开发人员在背后需要处理越来越多 ...
- Android Studio 代码混淆
新建一个项目,Android Studio默认关闭代码混淆开关,在build.gradle文件中,如下图所示的minifyEnabled 开关,因此如果需要混淆代码,需将false改为true,然后在 ...
- HDU1046:Gridland
Problem Description For years, computer scientists have been trying to find efficient solutions to d ...
- CSS换行1
1.你定死表格的宽度,即给表格一个宽度值(是数值,不是百分比) 2.强制不换行 div{//white-space:不换行;normal 默认;nowrap强制在同一行内显示所有文本,直到文本结束 ...
- if...else if...else
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace prog ...
- MVC过滤器进行统一登录验证
统一登录验证: 1.定义实体类Person:利用特性标签验证输入合法性设计登录页面 1 2 3 4 5 6 7 8 9 public class Person { [DisplayName(& ...
- ShineTime 是一个效果非常精致的缩略图相册
ShineTime 是一个效果非常精致的缩略图相册,鼠标悬停到缩略图的时候有很炫的闪光效果,基于 CSS3 实现,另外缩略图也会有立体移动的效果.特别适用于个人摄影作品,公司产品展示等用途,快来来围观 ...