ExtJS中其它常用方法
阿新 • • 發佈:2021-01-01
技術標籤: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 禁用文字選擇