ExtJS中其它常用方法

操作dom系的方法

• appendTo 将当前元素追加到指定的元素中
• appendChild 在当前元素中追加元素
• createChild 在元素中插入由DomHelper对象创建的元素

 	span.createChild({
 		tag:'ol', // order list   ul : unorder list
 		children:[
 			{tag:'li', html:'item1'},
 			{tag:'li', html:'item2'}
 		]
 	});

• insertAfter 将元素插入到指定元素后
• insertBefore 将元素插入到指定元素之前
• insertSibling 在当前元素前或后插入(创建)元素(同层)
• insertHtml 在当前元素内插入HTML代码
• remove 移除当前元素
• replace 使用当前元素替换指定元素
• replaceWith 使用创建的元素替换当前元素
• wrap 创建一个元素，并将当前元素包裹起来

操作样式的方法

• addCls 增加CSS样式到元素，重复的样式会自动过滤
• applyStyles 设置元素的style属性

span.applyStyles('backgroundColor:yellow');// 利用字符串设置样式
span.applyStyles({backgroundColor:'blue'});// 利用对象设置样式
span.applyStyles(function setBkColor(){
   return 'backgroundColor:green';
}); //	利用函数设置样式

• setStyle 为元素设置样式

span.setStyle('fontSize', '50px');
span.setStyle('backgroundColor', 'grey');

• getStyle 返回元素的当前样式和计算样式

alert(span.getStyle('fontSize'));
alert(Ext.encode(span.getStyle(['fontSize', 'backgroundColor'])));

• addClsOnClick 添加样式，当点击元素的时候
• addClsOnOver 添加样式，当鼠标移动到元素上的时候

d2.addClsOnClick('red');
d2.addClsOnOver('red');

• getMargin 返回具有top/bottom/left/right属性的对象，即对象的margin值

alert(Ext.encode(d2.getMargin()));
alert(d2.getMargin('l'));

• removeCls 删除元素的样式

d2.removeCls('yellow');

• 尺寸大小操作方法

d2.setHeight(10);// 设置元素高度
d2.setWidth(15);// 设置元素宽度
d2.setSize(16);// 设置元素大小

• clip 存储元素当前的overflow设置，并裁剪溢出
• unlip 在clip被调用前将裁剪值还原为原始值
• getDocumentWidth 返回文档宽度
• getDocumentHeight 返回文档高度
• getFrameWidth 返回合计了padding和border的宽度
• getHeight 返回offsetHeight值
• getWidth 返回offsetWidth值
• getPadding 返回padding的宽度
• getSize 返回元素的大小

为元素添加事件

• addKeyMap 为元素创建一个KeyMap对象

var inp = Ext.get('inp');
// KeyMap对象
inp.addKeyMap({
    key: Ext.EventObject.A, // or Ext.EventObject.ENTER
    ctrl: true,
    fn: function(){
    	alert('执行！！');
    },
    scope: this
});

• addKeyListener 为keyMap绑定事件

var inp = Ext.get('inp');
inp.addKeyListener({
			key : Ext.EventObject.X,
			ctrl : false
		}, 
		function() {
			alert("X执行");
		},
		this);

• on 为元素绑定事件

	inp.on('click', function(){
		alert('点击');
	});

• un 解绑元素已绑定的事件

inp.un('click');

• focus 获得焦点

inp.focus();

• blur 失去焦点

inp.blur();

• center 居中

inp.center();
inp.center('d1');

• clean 清空空白的文本节点
• createShim 为元素创建一个iframe堑片，保证选择或其它对象跨域时可见
• getLoader 返回ElementLoader对象

var loader = inp.getLoader();
loader.load({
	//	会发送GET请求：http://localhost:8080/web-java-extjs/extjsdemo/base/base06_dom_loader.jsp?_dc=1608040270675
	url:'base06_dom_loader.jsp',
	//	渲染执行的方法
	renderer:function(loader, response){
		//	把对象转换成字符串表示 Ext.encode
		//	把字符串转换为javascript对象： Ext.decode
		var obj = Ext.decode(response.responseText);//	获取响应
		Ext.getDom('inp').value = obj.name;//	赋值
	}
});
// load 直接调用ElementLoader的load方法为元素加载内容

• hide/show 隐藏/显示元素

d2.setStyle('width', '100px');
d2.setStyle('height', '100px');
d2.setStyle('backgroundColor', 'red');
d2.hide();
d2.show();
d2.hide({duration:2000});

• getValue 如果元素有Value属性，则返回其值
• normalize 将CSS属性中的连接符号去掉，如将“font-size"转为fontSzie
• mask 遮罩当前元素，屏蔽用户操作
• unmask 移除遮罩

Ext.getBody().mask('请稍等...');
window.setTimeout(function(){
	Ext.getBody().unmask();
}, 2000);
//	2s后移除遮罩
Ext.defer(function(){
	Ext.getBody().unmask();
}, 2000);

• serializeForm 序列化为URL编码的字符串

alert(Ext.dom.Element.serializeForm('f1'));

• update 更新元素的innerHTML属性
• unselectable 禁用文本选择

动态窗体的创建

 	//	定义一个模板窗体类
 	Ext.define('MyWindow',{
 		//	利用继承
 		extend:'Ext.window.Window',
 		title:'通用窗体类',
 		height:300,
 		width:400,
 		constrain:true,
 		modal:true,
 		html:'窗体内容',
 		renderTo:Ext.getBody()
 	});
 	
 	//	使用时可以直接使用模板窗体类进行定义
 	var w1 = Ext.create('MyWindow',{
 		title:'第一个窗体'
 	});
 	
 	var w2 = Ext.create('MyWindow',{
 		title:'第二个窗体'
 	});
 	
 	var w3 = Ext.create('MyWindow',{
 		title:'第三个窗体'
 	});
 	
 	w2.show();

动态加载js文件

 	/**
 	 *	动态加载js文件 
 	 *  第一步：在自己的文件路径下，定义自己的js文件，对应自己的组件；
 	 *  第二步：在extjsdemo/ui下定义自己的扩展组件
 	 * 	第三步：启用Ext动态加载机制，并设置要加载的路径 Ext.Loader.setConfig 
 	 * 	第四步：创建类的实例并使用
 	 */
 	Ext.Loader.setConfig({
 		enabled:true,
 		paths:{
 			giser:'/extjsdemo/ui/'
 		}
 	});
 	
 	Ext.create('MyWindow').show();