經常使用事件：

其它重要方法：

詳細實例：（實例結果能夠將相應的代碼取消凝視進行測試）

Ext.onReady(function(){Ext.create('Ext.panel.Panel',{title:'我的面板' , width:'100%' , height:400 ,renderTo:Ext.getBody(),html:'<div id=d1><span id=sp>我是sp的內容</span><div id=d2>我是d2的內容</div></div><input id=inp value=123 /><form id=f1><input name=uname value=bhx /><input name=pwd value=123 /></form>'});//查詢系最經常使用的方法://Ext.dom.Element get fly getDomvar d1 = Ext.get('d1');var sp = Ext.get('sp');//一：為元素加入事件//1 : addKepMap：為元素創建一個KeyMap對象 // var inp = Ext.get('inp'); // inp.addKeyMap({ //Ext.util.KeyMap ====>Class 怎樣加入一個鍵盤事件 // key:Ext.EventObject.A , //Ext.EventObject 相關的鍵盤按鍵能夠在該類中查找 // ctrl:true , //按下Ctrl鍵 // fn:function(){ // alert('按ctrl+A ，運行!!'); // } , // scope:this //范圍 該實例結果僅僅有當焦點在輸入框中才起作用。在其它地方不起作用。由于是給inp加入的 // });//2 : addKeyListener：為KeyMap綁定事件//參數說明： String/Number/Number[]/Object key, Function fn, [Object scope] // var inp = Ext.get('inp'); // inp.addKeyListener({ // key:Ext.EventObject.X , // ctrl:false // }, // function(){ // alert('x運行了..'); // }, // this); //作用方位//二：元素綁定經常使用事件 // var inp　= Ext.get('inp'); // inp.on('click',function(){ //綁定事件 //詳細事件在Ext.dom.Element中查看 // alert('運行了...'); // }); // inp.un('click'); //取消綁定 // inp.focus(); //控件獲取焦點 blur失去焦點//三:其它重要且經常使用的方法：var inp = Ext.get('inp');var sp = Ext.get('sp');//1: center：使元素居中//inp.center(); //默覺得瀏覽器中間//inp.center('d1'); //d1中間//2: clean：清理空白的文本節點//3: createShim：為元素創建一個iframe墊片保證選擇或其它對象跨域時可見//4: getLoader：返回ElementLoader對象//11: load：直接調用ElementLoader的load方法為元素載入內容 // var loader = inp.getLoader(); //ElementLoader // loader.load({ //載入遠程server中的內容 // url:'base/dom_loader.jsp' , // renderer:function(loader ,response){ // //把對象轉換成字符串表示形式：Ext.encode // //把一個字符串轉換成javascript對象： Ext.decode // var obj = Ext.decode(response.responseText);//傳喚成對象 // Ext.getDom('inp').value = obj.name ;//將輸入框中的內容改為獲取的Json對象中的name // } // });/** 當中dom_loader.jsp中的內容為：* <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>* {* name:'張三', * age:10* }*///5: highlight 高亮顯示特效//sp.highlight(); //漸變高亮特效//6: show 、hide顯示隱藏元素 //6：fadeIn、fadeOout淡入淡出 與show和hide相似// var d2 = Ext.get('d2'); //獲取對象設置樣式// d2.setStyle('width','100px');// d2.setStyle('height','100px');// d2.setStyle('backgroundColor','red');//d2.show(); //馬上顯示// d2.hide(); //馬上隱藏//d2.show({duration: 2000});//2秒鐘內逐漸顯示// d2.hide({duration: 2000});//2秒鐘內逐漸消失//7: ghost 元素移動特效 在一定時間內向某個方向移動逐漸消失// d2.ghost('b', { duration: 2000 }); // r/b/l/t 右 下左 上//8: slideIn、slideOut向上向下滑動//d2.slideIn('b',{duration: 2000});//d2.slideOut('r',{duration: 2000});//9: getValue：假設元素有value屬性，返回其值//alert(inp.getValue()); //獲取輸入框的value值//10: normalize：將CSS屬性中的連接符號去掉，比如將“font-size”轉為fontSize這樣。

//11 :mask：遮罩當前元素。屏蔽用戶操作。 unmask：移除遮罩 // Ext.getBody().mask('請稍等..'); // // window.setTimeout(function(){ // // Ext.getBody().unmask(); // // },2000); // Ext.defer(function(){ //這個經常使用 // Ext.getBody().unmask(); // },2000);//設定時間 /** defer函數介紹 * defer( Function fn, Number millis, [Object scope], [Array args], [Boolean/Number appendArgs] ) : Number * Calls this function after the number of millseconds specified, * optionally in a specific scope */ //12: repaint：強迫瀏覽器又一次繪畫元素 //13: serializeForm：序列化為URL編碼的字符串 //alert(Ext.dom.Element.serializeForm('f1')); //返回結果： 返回字符串：uname=bhx&pwd=123 //<form id=f1><input name=uname value=bhx /><input name=pwd value=123 /></form> //14: update：更新元素的innerHTML屬性 //15: unselectable：禁用文本選擇 //inp.unselectable(); //結果：文本輸入框中的內容不能被選中 });

轉載于:https://www.cnblogs.com/mfrbuaa/p/5112921.html

總結

以上是生活随笔為你收集整理的ExtJS学习--------Ext.Element中的经常使用事件和其它重要的方法学习（实例）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。