ExtJS学习----------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);//将结果打印到控制台
	//返回结果:可以查看控制台中,html的值为:<ol><li>item1</li><li>item2</li></ol>

	//可以自己设定标签中的各种属性,结果生成了传统的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'
//	});
});
时间: 2024-10-03 07:56:47

ExtJS学习----------Ext.DomHelper类学习(实例)的相关文章

php优秀框架codeigniter学习系列——CI_Input类学习

这篇文章主要介绍CI核心框架工具类CI_Input. 根据CI文档自己的定义,该类用来: 提前处理全局变量,以保证安全; 提供一些帮助函数用来处理输入数据. 以下选取类中的重点方法进行说明. __construct() 在构造函数,根据定义,用来决定是否开启全局的XSS处理和是否允许$_GET数组. 调用函数$this->_sanitize_globals();来清理,$_GET,$_POST,$COOKIE,$_SERVER['PHP_SELF']中的数据.主要用来检测键名和键值是否存在非法字

ExtjS学习--------Ext.define定义类

Ext类Class的配置项:(注:Extjs的 的中文版帮助文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 ExtJS配置文件和示例的下载地址:http://download.csdn.net/detail/z1137730824/7754771) 语法: define( String className, Object data, Function createdFn ) 实例: Ext.onReady(function()

Ext JS 6学习文档–第1章–ExtJS入门指南

Ext JS 入门指南 前言 本来我是打算自己写一个系列的 ExtJS 6 学习笔记的,因为 ExtJS 6 目前的中文学习资料还很少.google 搜索资料时找到了一本国外牛人写的关于 ExtJS 6 的电子书 [Ext JS 6 By Example].这份资料在 PACKT 上卖 35.99 刀的,当然了万能的 google 还是帮我下载到了 PDF 文档.大概看了一下,讲的很详细,例子也比较简单,容易理解,现我准备利用工作之余翻译这份文档,为自己学习加深理解,也希望能帮助更多的人学习.

ExtJS学习------Ext.define的继承extend,用javascript实现类似Ext的继承

(1)Ext.define的继承extend 具体实例: Ext.onReady(function(){ //Sup Class 父类 Ext.define('Person',{ config:{ name:'bjsxt' } , constructor:function(config){ var me = this ; me.initConfig(config); } }); //Sub Class 子类 Ext.define('Boy',{ //使用Ext的继承 extend:'Person

Ext JS学习第六天 Ext自定义类(一)

此文来记录学习笔记 •我们在之前的学习,已经对ExtJS有了一个初步的认识,那么如果要学好ExtJS,对于javascript是必须的,也就是说,对于理解ExtJS底层基础架构的理解也是必须的.那么我们现在就开始学习ExtJS的基础架构. –如何创建一个Ext的类.创建类的复杂流程 •定义类的方法:define •对于Ext4.X版本来说,采用了新定义类的define方法,而不是延续旧版本的extend方法,那么对于定义一个新的类.我们来了解下define的使用. •Ext.define(cla

Ext JS学习第十四天 Ext基础之 Ext.DomHelper

此文用来记录学习笔记 •我们已经学过了Element这个类,无疑是非常强大的,里面提供了丰富的方法供我们使用,但是Ext为了更加的方便我们去操作DOM元素,特提供了DomHelper这个辅助的工具类.下面我们就一起学习下DomHelper •首先从API来看,这个类暴露出的public方法并不是特别多.仅仅13个方法而已.如果想生成dom节点,在这里不建议使用原生的方法去生成dom节点,原因是代码量比较大的时候性能比较低.其二是自己组装HTML字符串比较麻烦.在Ext里,DomHelper对象类

ExtJS学习-------Ext.define的别名和备用名,两种定义静态方法的方法,混入属性和其他属性

(1)Ext.define起别名和备用名 Ext.onReady(function(){ Ext.define('User',{ config:{ name:'张三', age:23 }, //使用别名 alias:'alias_user', //使用备用名 alternateClassName:'alternateClassName_user', constructor:function(config){//构造器 var me=this; me.initConfig(config); } }

[ExtJS学习笔记]第八节 Extjs的Ext.toolbar.Toolbar工具条组件及其应用

本文地址:http://blog.csdn.net/sushengmiyan/article/details/38515499 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- Ext JS API: http://docs.sencha.

ExtJS学习-----------Ext.Object,ExtJS对javascript中的Object的扩展

关于ExtJS对javascript中的Object的扩展,可以参考其帮助文档,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 下面对其中的方法进行介绍: (1)chain,把当前传入的对象当成新创建对象的原型. chain( Object object ) 使用给定对象作为原生链返回一个新对象. Parameters object : Object 创建新对象的原生链. 实例: var obj={ name:'张三', ag