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'
//	});
});