Differences between get, getdom, getcmp, getbody, and getdoc in ext

Differences between get, getdom, getcmp, getbody, and getdoc in ext
EXT contains several methods starting with get. These methods can be used to obtain the DOM in the document, obtain the components in the current document, and obtain the ext element. Pay attention to the difference in usage.
◇ Get Method
The get method is used to obtain an ext element, that is, the type is Ext. object of element, ext. the element class is ext's Dom encapsulation, which represents the DOM elements. You can create an element object for each Dom, and you can use methods on the Element Object to perform operations specified on the Dom, for example, the hide method can hide elements and the initdd method can make the specified Dom have the drag-and-drop feature. The get method is short for Ext. element. Get.
The get method has only one parameter. this parameter is a hybrid parameter, which can be the ID of a DOM node, an element, or a DOM Node object. See the following sample code:

Java code
Ext. onready (function (){
VaR E = new Ext. element ("hello ");
Alert (Ext. Get ("hello "));
Alert (Ext. Get (document. getelementbyidx ("hello ")));
Alert (Ext. Get (e ));
});
The HTML page contains a div with the ID of hello. The Code is as follows:
<Div id = "hello"> tttt </div>
Ext. onready (function () {var E = new Ext. element ("hello"); alert (ext. get ("hello"); alert (ext. get (document. getelementbyidx ("hello"); alert (ext. get (E) ;}); the HTML page contains a div with the ID of hello. The Code is as follows: <Div id = "hello"> tttt </div>

Ext. get ("hello"), ext. get (document. getelementbyidx ("hello"), ext. get (E) and other three methods can get an ext element corresponding to the DOM node hello.
◇ Getcmp method-obtain the ext component
The getcmp method is used to obtain an ext component, that is, a component or its subclass object initialized on the page. The getcmp method is in short form of the Ext. componentmgr. Get method. The getcmp method has only one parameter, that is, the component ID. For example, the following code:

Java code
Ext. onready (function (){
VaR H = new Ext. Panel ({
ID: "h2 ",
Title :"",
Renderto: "hello ",
Width: 300,
Height: 200
});
Ext. getcmp ("h2"). settitle ("New title ");
});
Ext. onready (function () {var H = new Ext. panel ({ID: "h2", title: "", renderto: "hello", width: 300, height: 200}); Ext. getcmp ("h2 "). settitle ("New title ");});

In the code, we use Ext. getcmp ("h2"). To obtain the component whose ID is H2, and call its settitle method to set the title of the Panel.
◇ Getdom method-Get DOM nodes
The getdom method can get the DOM nodes in the document. This method contains a parameter, which can be the ID of the DOM node, the DOM Node object, or the ext element (element) corresponding to the DOM node. For example, the following code:

Java code
Ext. onready (function (){
VaR E = new Ext. element ("hello ");
Ext. getdom ("hello ");
Ext. getdom (E );
Ext. getdom (E. DOM );
});
HTML: <Div id = "hello"> tttt </div>
Ext. onready (function () {var E = new Ext. element ("hello"); Ext. getdom ("hello"); Ext. getdom (E); Ext. getdom (E. dom) ;}); html: <Div id = "hello"> tttt </div>

In the above Code, ext. getdom ("hello"), ext. getdom (E), ext. getdom (E. DOM.
◇ Getbody method-get the Object Body node Element)
This method is used to directly obtain the document and document. the extjs element corresponding to the DOM node "body" is essentially the document. the body object is encapsulated into an extjs Element Object and returned. This method does not contain any parameters. For example, the following code directly renders panel H to the body element of the document.

Java code
Ext. onready (function (){
VaR H = new Ext. Panel ({
Title: "test ",
Width: 300,
Height: 200
});
H. Render (ext. getbody ());
});
Ext. onready (function () {var H = new Ext. panel ({Title: "test", width: 300, height: 200}); H. render (ext. getbody ());});

◇ Getdoc method-obtain the ext element (element) corresponding to the document)
The getdoc method essentially encapsulates the current HTML document object into an extjs Element Object and returns it without any parameters.

◆ Application of the apply and applyif methods in ext
Both the apply and applyif methods are used to apply attributes of an object to another object, which is equivalent to copying attributes. The difference is that apply will overwrite the properties in the target object, while applyif only copies the properties in the target object but not in the source object.
The signature of the apply method is "apply (Object OBJ, object config, object defaults): object". This method contains three parameters. The first parameter is the target object to be copied, the second parameter is the copied source object, and the third parameter is optional, indicating that a default value is provided to the target object. You can simply copy the attributes of the third parameter (if any) and the second parameter to the first parameter object. See the following code:

JavaScript code
VaR b1 = {
P1: "p1 value ",
P2: "p2 value ",
F1: function () {alert (this. P2 )}
};
VaR b2 = new object ();
B2.p2 = "B2 value ";
Ext. Apply (B2, B1 );
B2.f1 ();
VaR b1 = {p1: "p1 value", P2: "p2 value", F1: function () {alert (this. p2) }}; var b2 = new object (); b2.p2 = "B2 value"; Ext. apply (B2, B1); b2.f1 ();

In the above Code, ext. the apply (B2, B1) Statement copies the attribute of B1 to the B2 object. Therefore, the message "p2 value" is displayed when you call the F1 method of B2. Although the B2 object already contains the P2 property value, the copied property value will be overwritten. You can specify the default value of the copy attribute in the third parameter when calling the apply method, for example, the following code:

JavaScript code
Ext. Apply (B2, B1, {P3: "P3 value "});
Alert (b2.p3 );
Ext. Apply (B2, B1, {P3: "P3 value"}); alert (b2.p3 );

This will make B2 contain a property of P3 with the value "P3 value ".
The applyif method has the same functions as apply, but does not copy the attributes existing in the target object and source object. For example, change the code that demonstrates the apply method to applyif, as shown below:

JavaScript code
Ext. applyif (B2, B1 );
B2.f1 ();
Ext. applyif (B2, B1); b2.f1 ();

The P2 attribute already exists in B2. therefore, this is referenced in b2.f1. in P2, we get "B2 value" instead of the "p2 value" defined in B1 ".

◆ Ext Keyboard Events

Java code
VaR form = new Ext. Form. formpanel ({
Basecls: 'x-plain ',
Layout: 'absolute ',
URL: 'save-form. php ',
Defaulttype: 'textfield ',

Keys :[{
Key: [13],
FN: function (){
Alert ('you pressed the Enter key! ');
}
}],

Items :[{
X: 0,
Y: 5,
Xtype: 'label ',
Text: 'Send :'
},{
X: 60,
Y: 0,
Name: 'to ',
Anchor: '000000'
}]
});
VaR form = new Ext. form. formpanel ({basecls: 'x-plain ', layout: 'absolute', URL: 'save-form. PHP ', defaulttype: 'textfield', keys: [{key: [13], FN: function () {alert ('you pressed the Enter key! ') ;}}], Items: [{X: 0, Y: 5, xtype: 'label', text: 'Send to:'}, {X: 60, y: 0, name: 'to', anchor: '000000'}]});

 

◆ Trigger button click event in ext

Java code
Ext. getcmp ('mybuttonid'). Focus ();
Ext. getcmp ('mybuttonid'). Focus ();

◆ Extjs synchronous request

Java code
VaR conn = ext. Lib. Ajax. getconnectionobject (). Conn;
Conn. Open ("get", listsecretariesurl, false );
Conn. Send (null );
// Obtain the response JSON string
VaR resptext = ext. Decode (conn. responsetext); // If the JSON specification is met, convert it to a JSON Array
◆ Extjs decode encode Method

Ext. Decode is equivalent to Ext. util. JSON. Decode (). It converts JSON-compliant strings into JS arrays or objects.

Ext. encode is equivalent to Ext. util. JSON. encode (). js arrays or objects are converted into JSON-compliant strings.