1. 程式人生 > 其它 >ExtJS中其它常用方法

ExtJS中其它常用方法

技術標籤: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 禁用文字選擇