ExtJS Learning--------Common events in ext.element and other important methods of learning (examples)

Common events:

Other important methods:

Specific example: (instance results can be tested by canceling the corresponding code)

Ext.onready (function () {ext.create (' Ext.panel.Panel ', {title: ' My panel ', Width: ' 100% ', height:400, renderTo:Ext.getBody (), HTML: ' <div id=d1><span id=sp> I'm SP content </span><div id=d2> I'm D2 content </div></div> <input id=inp value=123/><form id=f1><input name=uname value=bhx/><input name=pwd value=123/> </form> ');//query system The most common method://ext.dom.element get fly Getdomvar D1 = ext.get (' D1 '); var sp = ext.get (' SP ');//One: add something to the element  Piece//1:addkepmap: Create an KeyMap object for the element//var INP = ext.get (' InP ');//inp.addkeymap ({//ext.util.keymap ====>class How to add a keyboard event//key:ext.eventobject.a,//ext.eventobject related keyboard keys can find//ctrl:true in this class,//press CTRL key//FN:FUNCT Ion () {//alert (' press CTRL + A, execute!! '); /},//scope:this//range This instance results only if the focus is in the input box and does not work elsewhere because it is added to the INP//});//2:addkeylistener: Bind Event//Parameter description for 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 performed.. '); /},//this);//action azimuth//Two: Element binding common event//var INP = Ext.get (' InP ');//inp.on (' Click ', function () {//Bind event//      Specific events in Ext.dom.Element view//alert (' performed ... ');/});//inp.un (' click ');         Unbind//inp.focus ();          Control gets focus Blur lost focus//Three: Other important and common methods: var INP = ext.get (' InP '), var sp = ext.get (' SP ');//1:center: Centers the Element//inp.center ();    The default is the browser intermediate//inp.center (' D1 '); D1 Middle//2:clean: Clean up blank text node//3:createshim: Create an IFRAME gasket for the element to ensure that the selection or other objects are visible across the domain//4:getloader: return Elementloader object//11: Load: The load method that directly calls Elementloader loads the content for the element//var loader = Inp.getloader (); Elementloader//loader.load ({//load content from remote server//url: ' base/dom_loader.jsp ',//renderer:function (loader, response) {// Converts an object to a string representation: Ext.encode////Converts a string into a JavaScript object: Ext.decode//var obj = Ext.decode (response.responsetext);// Summoned into Object//ext.getdom (' InP '). Value = Obj.name;//Change the contents of the input box to name//}//} in the obtained JSON object;/** where the contents of dom_loader.jsp are: * <%@  Page language= "java" import= "java.util.*" pageencoding= "UTF-8"%> * {* Name: ' Zhang San ', * Age:10 *} *///5:highlight Highlight effects//sp.highlight ();    Gradient highlighting effects//6:show, hide show hidden elements//6:fadein, fadeoout fades like show and hide//var D2 = ext.get (' D2 '); Gets the object settings style//d2.setstyle (' width ', ' 100px ');//d2.setstyle (' Height ', ' 100px ');//d2.setstyle (' BackgroundColor ', ' Red ' );//d2.show ();//immediately display//d2.hide ();//immediately hide//d2.show ({duration:2000});//2 seconds to gradually display//d2.hide ({duration:2000});// Fade out in 2 seconds//7:ghost element move effect in a certain direction to move gradually disappear//d2.ghost (' B ', {duration:2000}); r/b/l/t right lower left upper//8:slidein, Slideout swipe up down//d2.slidein (' B ', {duration:2000});//d2.slideout (' R ', {duration:2000});//   9:getvalue: If the element has a Value property, return its value//alert (Inp.getvalue ()); Gets the value of the input box//10:normalize: Removes the connection symbol from the CSS property, such as "Font-size" to fontsize. 11:mask: Masks The current element and masks user actions. unmask: Remove Mask//ext.getbody (). Mask (' Please wait a moment. '); Window.settimeout (function () {////ext.getbody (). unmask ();////},2000);//ext.defer (function () {//This common// Ext.getbody (). unmask ()//},2000);//Set time/** defer function Introduction * 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: Forces the browser to re-paint elements//13:serializeform: Serialized as URL-encoded string//alert (' Ext.dom.Element.serializeForm ' F1 '));//Return Result: Return string: Uname=bhx&pwd=123//<form id=f1><input name=uname value=bhx/><input name=pwd     value=123/></form>//14:update: Update element's innerHTML property//15:unselectable: Disables text selection//inp.unselectable (); Result: The contents of the text input box cannot be selected});

ExtJS Learning--------Common events in ext.element and other important methods of learning (examples)