ExtJS learning -------- common events in Ext. Element and other important method learning (instance), extjs layout example

ExtJS learning -------- common events in Ext. Element and other important method learning (instance), extjs layout example

Common events:

Other important methods:

Example: (you can uncomment the corresponding code to test the instance result)

Ext. onReady (function () {Ext. create ('ext. panel. panel ', {title: 'My panel', width: '000000', height: 100%, renderTo: Ext. getBody (), html: '<div id = d1> <span id = sp> I am sp content </span> <div id = d2> I am d2 content </div>> <input id = indium value = 123/> <form id = f1> <input name = uname value = bhx/> <input name = pwd value = 123/> </form> '}); // The most common query method: // Ext. dom. element get fly getDomvar d1 = Ext. get ('d1 '); var sp = Ext. get ('SP '); // 1: add an event to the element // 1: addKepMap: Create a KeyMap object for the element // var indium = Ext. get ('power1'); // indium. addKeyMap ({// Ext. util. keyMap ===> how to add a keyboard event to the Class // key: Ext. eventObject. a, // Ext. the keyboard buttons related to EventObject can be found in this class // ctrl: true, // press the Ctrl key // fn: function () {// alert ('Press ctrl +, run !! '); //}, // Scope: this // The result of this instance only takes effect when the focus is in the input box and does not take effect elsewhere, because it is added to the P/}); // 2: addKeyListener: bind events to the KeyMap // parameter description: String/Number []/Object key, Function fn, [Object scope] // var indium = Ext. get ('power1'); // indium. addKeyListener ({// key: Ext. eventObject. x, // ctrl: false //}, // function () {// alert ('x executed .. '); //}, // this); // action position // 2: bind common events to the element // var indium = Ext. get ('power1'); // indium. on ('click', function () {// bind event // the specific event is in Ext. d Om. view // alert in Element ('executed... '); //}); // indium. un ('click'); // unbind // indium. focus (); // control gets focus blur loses focus // 3. Other important and common methods: var indium = Ext. get ('power1'); var sp = Ext. get ('SP '); // 1: center the element. center (); // The default value is the center of the browser. center ('d1 '); // d1 center // 2: clean: Clear blank text node // 3: createShim: create an iframe gasket for the element to ensure that the selected or other objects are visible when cross-origin. // 4: getLoader: returns the ElementLoader object // 11: load: directly call the load method of ElementLoader to load the content of the element. // var loader = indium. getLoader (); // El EmentLoader // loader. load ({// load the content in the remote server // url: 'base/dom_loader.jsp ', // renderer: function (loader, response) {/// convert the object into a string representation: Ext. encode // convert a string to a javascript Object: Ext. decode // var obj = Ext. decode (response. responseText); // summon to object // Ext. getDom ('power1 '). value = obj. name; // change the content in the input box to name //} in the retrieved Json object);/** the content in dom_loader.jsp is: * <% @ page language = "java" import = "java. util. * "pageEncoding =" UTF-8 "%> * {* Name: 'zhang san', * age: 10 *} * // 5: highlight special effects // sp. highlight (); // gradient highlight effect // 6: show, hide show Hidden elements // 6: fadeIn, fadeOout fade-in and fade-out are similar to show and hide // var d2 = Ext. get ('d2 '); // get the object setting style // d2.setStyle ('width', '100px'); // d2.setStyle ('height', '100px '); // d2.setStyle ('backgroundcolor', 'red'); // d2.show (); // display immediately // d2.hide (); // hide now // d2.show ({duration: 2000}); // gradually display in 2 seconds // d2.hide ({duration: 2000}); // disappears in 2 seconds // 7: Move the ghost Element Animation effects gradually disappear in a certain direction within a certain period of time // d2.ghost ('B', {duration: 2000 }); // r/B/l/t right bottom top left top/8: slideIn, slideOut slide up and down // d2.slideIn ('B', {duration: 2000 }); // d2.slideOut ('R', {duration: 2000}); // 9: getValue: returns the value of the element if it has a value attribute. getValue (); // obtain the value of the input box // 10: normalize: remove the Connection Symbol in the CSS attribute, for example, convert "font-size" to fontSize. // 11: mask: masks the current element and shields user operations. Unmask: remove the mask // Ext. getBody (). mask ('Please wait .. '); // window. setTimeout (function () {// Ext. getBody (). unmask (); //}, 2000); // Ext. defer (function () {// This frequently used // Ext. getBody (). unmask (); //}, 2000); // set the time/** defer Function * defer (Function fn, Number millis, [Object scope], [Array args], [Boolean/Number appendArgs]): Number * callthis function after the number of millseconds specified, * optionally in a specific scope * // 12: repaint: force the browser to re-paint the element // 13: serializeForm: 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 the innerHTML attribute of the element. // 15: unselectable: Disable text selection. unselectable (); // result: the content in the text input box cannot be selected });

I am getting started with extjs. I am now learning how to use Extjs4. I would like to ask how extjs receives and parses json data.

JSON can be understood as a serialized string of JavaScript objects. After reading the JSON content, you will find that the object literal volume written in the Code is basically the same, therefore, you can use the eval method to convert JSON to an object.
Ext is just a simple eval encapsulation method to adapt to different standard JSON
Source code:
Ext. util. JSON. decode = function (json ){
Return eval ('+ json + ')');
};
You can see it by alert.

// Example
Ext. onReady (function (){
Ext. Ajax. request ({
Url: 'getmsg. action? User = 1 ',
Method: 'get ',
Success: function (resp, options ){
// Standard JSON string '{"data": [{"msg": "abcd"}]}'
Var jsonObj = Ext. util. JSON. decode (resp. responseText );
// Display the modal prompt box
Ext. Msg. alert ('title', jsonObj. data [0]. msg, function (btn ){
// Ext's modal window is very important because it only shields operations, does not block threads, and js does not have threads.
// Callback of the button event in the prompt box
Alert (btn); // then run
});
Alert (1); // execute first
}
// Failure: function () {...} // optional
});
});

Ext's ApiDoc is very good at learning. Do not read some so-called Chinese versions. There are many machine translations, and many unproofread errors.

In addition, to learn ExtJS, We need to master the concept of closure. This is a very important feature of js. Ext uses this feature to simulate inheritance and encapsulation, and to some extent implements object-oriented programming. of course, you can also ignore the Ext Inheritance Mechanism and use prototype of js itself)

Extjs learning problems, really depressed recently want to learn extjs, download the ext-230 on the official website, always don't do well

First, the problem may be that the order of the ext package is wrong. We recommend that you write the package order according to the api documentation ,,,
I don't know much about others. I am also a beginner. If you are interested, you can communicate with me. In fact, for beginners, just look at the api and examples. ext4.0 charges fees, so if you don't need it very much, don't use 4.0 or less ,,