ExtJS learning -------- query method learning (instance) in Ext. Element, extjs layout instance

ExtJS learning -------- query method learning (instance) in Ext. Element, extjs layout instance

Example: (you can copy the code to demonstrate the experiment results)

Ext. onReady (function () {Ext. create ('ext. panel. panel ', {// create a 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>> '}); // The most common query method: // Ext. dom. element get fly getDomvar d1 = Ext. get ('d1 '); var sp = Ext. get ('SP '); // query system method: // 1: contains: determines whether the element contains another element alert (d1.contains (sp )); alert (d1.contains ('SP '); // 2: child: select the element that matches the selector from the direct sub-element of the element (only one element is returned, the second parameter of the two parameters is optional. If it is set to true, the native HTMLElement var metadata = d1.child ('span ') is obtained. // Ext. dom. elementalert (ch. dom. innerHTML); var ch2 = d1.child ('span ', true); // HTMLElementalert (ch. innerHTML); // 3: down: select the child element of the element that matches the selector. // findParentNode and up: find the parent element var ready = d1.down ('# d2') and alert (ch1.dom. innerHTML); // 4: first: select the first child element of the element // last: select the last child element of the element var f1 = d1.first ('div '); alert (f1.dom. innerHTML); // 5: findParent: Find the parent element of the element that matches the simple selector. // parent: return the parent element var parent = sp. findParent ('div '); alert (parent. innerHTML); // 6: is: determines whether the element matches the selection character alert (d1.is ('div '); // 7: next: select the next element of the same layer // prew: select the previous element var next = sp. next (); alert (next. dom. nodeName); // 8: Ext. query: gets the element (Ext. dom. element. query) var arr = Ext. query ('span ', 'd1'); // HTMLElement [] Ext. array. each (arr, function (item) {alert (item. innerHTML) ;}); // 9: Ext. select/Ext. dom. element. select: gets the element set based on the selection operator // returns all element sets: Ext. dom. compositeElementLite (HTMLElemennt)/Ext. dom. compositeElement (Ext. dom. element) // parameter description: three parameters, // 1: selector (do not use id selector) // 2: returned collection object (boolean false: Ext. dom. compositeElementLite true: Ext. dom. compositeElement) // 3: Specify the root node to start searching // var list1 = Ext when the parameter is false. select ('span ', false, 'd1'); // Ext. dom. compositeElementLiteExt. array. each (list1.elements, function (el) {alert (el. innerHTML) ;}); // var list2 = Ext. select ('span ', true, 'd1'); // Ext. dom. compositeElementExt. array. each (list2.elements, function (el) {alert (el. dom. innerHTML );});});

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 ,,