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认证 大家在登录网站的时候,大部分时候是通过一个表单提交登录信息. 但是有时候 ...
随机推荐
- jquery validationEngine 使用ajax验证不通过也提交表单
转自 http://mylfd.iteye.com/blog/2007227 validationEngine给我们为前端的表单验证减少了很大的工作量.大部分情况我们使用validationEngin ...
- ubuntu-10.04的测试环境 安装测试 Coreseek开源中文检索引擎-Sphinx中文版
主要参考文档:http://www.coreseek.cn/products-install/install_on_bsd_linux/ 一. 32位版本: coreseek安装需要预装的软件: ap ...
- linux下卸载安装程序及其配置的方法
首先要知道软件包的名字 dpkg --list 如果知道关键字的话可以用下面这种方法 dpkg --list|grep -i ‘packagename’ 找到所要删除的软件包之后 sudo apt-g ...
- 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 ...
- 第七届河南省赛10402: C.机器人(扩展欧几里德)
10402: C.机器人 Time Limit: 2 Sec Memory Limit: 128 MB Submit: 53 Solved: 19 [Submit][Status][Web Boa ...
- jQuery validate api(转)
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
- Android四大组件之Activity详解
一.Activity的概要说明 我看过Activity的源码,Activity类注释大概是这样解释的:几乎所有的Activity都是与用户交互用的,我想用了一个几乎的意思应该是排除一些纯展示界面吧,因 ...
- python生成器之斐波切纳数列
面试的时候遇到过这样的一个题目: 斐波切纳数列1,2,3,5,8,13,21.........根据这样的规律,编程求出400万以内最大的斐波切纳数,并求出是第几个斐波切纳数. 方法一: 方法二:这个方 ...
- BZOJ 3931: [CQOI2015]网络吞吐量( 最短路 + 最大流 )
最短路 + 最大流 , 没什么好说的... 因为long long WA 了两次.... ------------------------------------------------------- ...
- Hadoop学习笔记(1)概述
写在学习笔记之前的话: 寒假已经开始好几天了,似乎按现在的时间算,明天就要过年了.在家的这几天,该忙的也都差不多了,其实也都是瞎忙.接下来的几点,哪里也不去了,静静的呆在家里学点东西.所以学习一下Ha ...