Common extjs tools and functions

J * 1. codec Functions
* The encode and decode functions are used to encode and decode JSON data.
* The decoding method of Ext. encode () is Ext. Decode ().
*
* The encode function is used to encode objects, arrays, or other values and convert objects into JSON strings;
* Because HTTP can only send parameters in the string format, the objects in Javascript cannot be directly transmitted to the background, which requires encoding;
* Because HTTP specifications stipulate that HTTP requests can only send characters encoded by ISO-8859-1,
* So characters such as Chinese cannot use ISO-8859-1 encoding, but also need to be converted to the ISO-8859-1 encoding format in order to transmit through HTTP;
*
* The final parameter obtained after two encodings is bound to the URL and then passed to the backend server for processing:
* URL: "http://url.com? JSON = "+ Encodeuricomponent (ext. encode (OBJ ))
* Decode () parses a JSON object as a string
*The format of the parsed string cannot be arbitrary. It must conform to the JSON-required string format. .
Eg: function successfn (response, options ){
VaR OBJ = ext. Decode (response. responsetext );// Parse JSON data into JavaScript objects and use the Ext. Decode function.
Alert (obj. username );
}
Function failurefn (response, options ){
Alert ('request failed ');
}
Ext. Ajax. Request ({
URL: 'form. jsp' ,
Success: successfn,
Failure: failure,
Params: {dsname: 'insert '}
});

Obtain the data returned by the server through the responsetext or responsexml attributes of the object.
*
* 2. Ext. Each function: When you need to perform the same operation on each element in the array
* Eg:
* Var array = [1, 2, 4];
* Var sum = 0;
* Ext. Each (array, function (item ){
* Sum + = item;
*});
* Alert (SUM );
* 3. Ext. The Select () function of domquerydomquery will accept the custom query expression,
* Return all tags in HTML that meet the conditions.
* 4. Tag prompt
* Directly set the prompt information for the element in HTML.
<Input type = "button" value = "tag prompt information"
Ext: qtitle = "title of the prompt"
Ext: QTip = "<B> <I> content of the prompt </I> </B> <p> content of the next line </P>"/>

These configurations are prefixed with ext,
Qtitle indicates the title of the prompt,
QTip indicates the prompt content,
These configurations are parsed to ext during initialization and displayed as needed.

* Initialize with the Ext. quicktips. INIT () function.
* Registration prompt
*
* Global Configuration:
* The simplest way is to use the Ext. Apply () function to reset the default attribute of quicktips. , As shown below:
* Ext. Apply (ext. quicktips ,{
* Maxwidth: 200,
* Minwidth: 100,
* Showdelay: 50,
* Dismissdelay: 1000,
* Hidedelay: 500,
* Trackmouse: false,
* Animate: True
*});
* The meanings of these settings are as follows:
* Maxwidth and minwidth are used to set the maximum width and minimum width of the prompt box, which may lead to automatic line feed of the prompt content.
* Showdelay indicates how long it will take to hover the mouse over and display the prompt information. The default value is 0.5 seconds. The time here is in ms.
* Dismissdelay indicates the time when the prompt information is displayed. The default value is 5 seconds. If you want the prompt box to not disappear, you can set dismissdelay to 0 directly.
* Hidedelay indicates the time required for the message to disappear from the beginning to completely. The default value is 0.2 seconds.
* If the trackmouse attribute is true, the system prompts that the window will move with the mouse after it pops up.
* The autohide value is generally true. It gradually fades out the prompt box based on the values of dismissdelay and hidedelay.
* This seems to be a shortcut to never disappear the prompt box, but after using it, you will know that the result of autohide: false is that even if the mouse leaves the DOM range, the prompt will not disappear.
* This prompt will always be displayed on the page and cannot be removed.
* Animate indicates whether to use animation effects.
*
*Individual Configuration:
* Two methods are available: using register () and writing directly to HTML ;
* 1. When using the Register () function, the parameters used are the same as the global configuration.
Ext. quicktips. Register ({
Taget: 'ql ',
Title: 'First type ',
Text: 'prompt information from external registration to Dom ',
Maxwidth: 200,
Minwidth: 100,
Showdelay: 50,
Dismissdelay: 1000,
Hidddelay: 500,
Trackmouse: false,
Autohide: false,
Animate: True
});

EXT component with built-in prompt Function You only need to set the corresponding properties for these components after quicktips, you can directly set the corresponding prompt information for them.
Component name Configuration
Ext. Tree. treenode QTip
Ext. Button tooltip
*
* 6. Save status: Ext. State
* The Ext. state. Manager initialization function must be in allCode.
* Ext. state. Manager. setprovider (New Ext. state. cookieprovider ({}); // keep the cookie status
*
* 7. Ext. Util. taskrunner executes the cyclic task,
* It provides methods such as start (), stop (), and stopall () to control the start and stop of function functions,
* Or stop all functional functions that have been executed at one time.
* Ext. onready (function (){
* Var text = '';
* Var task = {
* Run: function (){
* Text + = new date (). tolocalestring () + "<br/> ";
* Ext. Get ('result'). Update (text );
*},
* Interval: 3000
*};
* Var taskrunner = new Ext. util. taskrunner ();
* Taskrunner. Start (task );
*);
*
*
* 8. Use Ext. keymap to bind keys to objects
*
* Ext. onready (function (){
* Var keymap = new Ext. keymap ('textarea ',{
* Key: Ext. eventobject. Left,
* FN: function (e ){
* Keymap. El. setwidth (keymap. El. getwidth ()-10 );
*}
*});
* Ext. Get ("dis"). On ('click', function (){
* Keymap. Disable ();
* Ext. Get ('result'). Update (keymap. isenabled ());
*});
* Ext. Get ('en'). On ('click', function (){
* Keymap. Enable ();
* Ext. Get ('result'). Update (keymap. isenabled ());
*});
*});
*
*
*
*/

Step 1 Write the following code:

<Div id = "root1">
<SPAN class = "span1"> span 1 </span>
<SPAN class = "span2"> span 2 </span>
<SPAN class = "span1"> span 3 </span>
<SPAN class = "span2"> span 4 </span>
<SPAN class = "span1"> span 5 </span>
</Div>
<Div id = "root2">
<SPAN class = "span0"> span 0 </span>
</Div>

Step 2:

Ext. onready (function (){
Ext. state. Manager. setprovider (New Ext. state. cookieprovider ({}));
Ext. quicktips. INIT ();

VaR target = ext. Get ('root2 ');
Ext. quicktips. Register ({
Target: target,
Title: 'span tag prompt ',
Text: 'prompt information registered from the external to the DOM'
});

/* Var array = [1, 2, 4];
VaR sum = 0;
Ext. Each (array, function (item ){
Sum + = item;
});
Alert ("sum:" + sum );

Ext. Each (array, function (item, index, allarray ){

Alert ("index:" + index );
Alert ("Length:" + allarray. Length );

});*/

// Use domquery to obtain all span tags on the page
VaR array = ext. domquery. Select ('span ');
Ext. Each (array, function (ELEM ){
ELEM. style. backgroundcolor = 'red ';
});

// Obtain all span labels in the DIV label with ID = "root1"

VaR array = ext. domquery. Select ('div # root1> span ');
Ext. Each (array, function (ELEM ){
ELEM. style. backgroundcolor = 'yellow ';
});

})