Extjs4.1 Ext. util toolkit details

Source: Internet
Author: User
Tags addall

1. Ext. util. CSS

Overview: effective control of style sheets, multiple deletion, modification, and exchange

Main Methods:

1. createstylesheet creates a CSS style label in the head.

2. getrule obtains a cssrule object based on the class name.

3. swapstylesheet introduces a CSS style file and specifies the ID

4. removestylesheet uses the specified ID to delete a style.

5. Update: Modify the attribute values in the style sheet.

CodeImplementation and comments:

// 1. createstylesheet (stringcsstext, string ID): Create a CSS style label in the head.

Ext. util. CSS. createstylesheet (". c {color: Red}", "Red ");

Ext. Get ("d1"). addclsonover ("C ");

// 2. getrule (string/arrayselector, Boolean refreshcache) obtains a cssrule object based on the class name. The object can obtain the specified attributes.

Varcssobj = ext. util. CSS. getrule (". c", true );

Alert (cssobj. style. Color );

// 3. swapstylesheet (stringid, string URL) introduces a CSS style file, specifies the ID, and exchanges the style table. This will bring the number order of the style table to the front. Mostly used for skin Switching

Vari = 1;

Ext. Get ("B1"). On ("click", function (){

If (I % 2 = 0 ){

Ext. util. CSS. swapstylesheet ("one", "lession10/one.css ");

Ext. Get ("D2"). addclsonover ("col ");

I ++;

} Else {

Ext. util. CSS. swapstylesheet ("two", "lession10/two.css ");

Ext. Get ("D2"). addclsonover ("col ");

I ++;

}

});

// 4. removestylesheet (stringid) deletes a style with the specified ID.

Ext. Get ("B2"). On ("click", function (){

Ext. util. CSS. removestylesheet ("red ");

});

// 5. updaterule (string/arrayselector, string property, string value): Boolean parameter: Class Name, attribute name, Value

Ext. Get ("B3"). On ("click", function (){

Ext. util. CSS. updaterule (". c", "color", "#990055 ");

});

Ii. Ext. util. clickrepeater

Overview: a single machine is used once. If the focus is not lost. The system will automatically send a request to wait for the dashboard and Network busy.

Directly instantiate this class. The first parameter is the component element object, and the second parameter is the configuration object.

Interval between the first single-host delay instance

Interval interval of each event after the first repeated event call

Stopdefault: Stop the default standalone event on this El.

Handler action

// The control element is standalone within the specified time (if the element does not lose focus)

// The first click will trigger the event immediately. If other elements are not clicked, the second operation will be automatically executed 3 seconds later.

// In the future, the corresponding execution interval will be 4 secondsProgram

Varc1 = new Ext. util. clickrepeater (ext. Get ("B4 "),{

Delay: 3000, // The interval between the first Standalone

Interval: 4000, // interval of each event after the first repeated event call

Stopdefault: True, // stop the default standalone event on this El

Handler: function (){

Alert ("standalone me ");

}

});

Iii. Ext. util. delayedtask

Overview: call a function after the specified time

Create an object and specify a function as a parameter

Main method: the execution time of the delay parameter, indicating the time after which the function of the object is triggered

Cancel remove the last function that is waiting

Code:

// Instantiate the object and input an executable function as the parameter

Varc1 = new Ext. util. delayedtask (function (){

Alert ("-------");

});

Ext. Get ("B5"). On ("click", function (){

C1.delay (2000); // call after 2 seconds. You can also input the second parameter, which is the execution function.

C1.cancel (); // remove the last waiting event

});

Iv. Ext. util. Format

Format the value, date, and so on.

Main Methods:

1. When the number of ellipsis exceeds the specified value, it is represented...

2. capitalize converts the first letter to uppercase, which is usually used to obtain its set and get methods.

3. format the output date. The first input date object and the second input format

4. substr string Truncation

5. lowercase converts all uppercase letters to lowercase letters.

6. Number indicates that the value is input in a certain format, because the values in different countries indicate different

7. nl2br parses the line feed \ n in JS into a <br> label

Code implementation:

Varstr = "marcio_zhang@163.com ";

// 1. The first parameter of ellipsis () is a string, and the second parameter is represented by... when the number of BITs exceeds this value.

Alert (Ext. util. format. ellipsis (STR, 10 ));

// 2. capitalize () converts the first letter to uppercase, which is usually used to obtain its set and get methods.

Alert (Ext. util. format. capitalize (STR ));

// 3. Date () format the output date, the first input date object, and the second input format

Alert (Ext. util. format. Date (newdate (), "Y-m-d "));

// 4. substr string Truncation

Alert (Ext. util. format. substr (STR, 0,5 ));

// 5. lowercase converts all uppercase letters to lowercase letters

Alert (Ext. util. format. lowercase ("marico "));

// 6. Number indicates that the value is input in a certain format, because the values of different countries indicate different

Alert (Ext. util. format. Number (123123.123123, "0,000.00 "));

// 7. nl2br parses the line feed \ n in JS into a <br> label

Alert (Ext. util. format. nl2br ("marico \ nzhang "));

V. Ext. util. mixedcollection object collection class

Overview: You can add corresponding key-value pairs, which is equivalent to a map set in Java. It is suitable for caching and static constants for convenient management.

Main Methods:

1. Add (string key, object O) of the Collection class to add an object to the Collection class. You can also specify the corresponding key value in the first parameter.

2. addall (Object/arrayobjs) method. Add an array or a collection class

3. Remove all objects from the clear method.

4. Clone clone is equal to the copy object

5. Check whether the set has the corresponding object contains (objecto) containskey (string key) and return a Boolean value.

6. Each (functionfn, [object scope]): void traverses this collection class

7. Obtain a single object from the collection

Get (string/numberkey): the object obtains the specified object based on the key.

First () Get the first object in the Collection class

8. When the ADD, clear, remove, and replace methods are executed for collection-related events, the trigger event can be specified, and the on method can be used to specify

Event. The first parameter is the coordinate of the object, the second parameter is the function, and the third parameter is

Key value of this object

Code implementation:

// 1. Add (string key, object O) of the Collection class to add an object to the Collection class. You can also specify the corresponding key value in the first parameter.

Varitem1 = new Ext. util. mixedcollection ();

Vara = {Name: 'A '};

Varb = {Name: 'B '};

Item1.add ("01", );

Item1.add ("02", B );

// Alert (Item1 );

// 2. addall (Object/arrayobjs) method. Add an array or a collection class

Vararr = [a, B]

Varitem2 = new Ext. util. mixedcollection ();

Item2.addall (ARR );

// Alert (item2 );

// 3. Remove all objects in the clear method

Item2.clear ();

// Alert (item2 );

// 4. Clone the clone object to be copied

Varitem3 = item1.clone ();

// Alert (item3 );

/*

* 5. determine whether an object exists in the set.

* Contains (Object O): returns a Boolean value.

* Containskey (string key): Boolean

**/

// Alert (item3.contains ());

// Alert (item3.containskey ("01 "));

// 6. Each (functionfn, [object scope]): void traverses this collection class

Item1.each (function (item ){

// Alert (item. Name );

});

// 7. Obtain a single object from the collection

// Get (string/numberkey): the object obtains the specified object based on the key.

// Obtain the first object in the Collection class.

// Alert (item1.get ("01"). Name );

// Alert (item1.get (1). Name );

// Alert (item1.first (). Name );

// 8. Collection related events

// Add, clear, remove, replace

Item1.on ("add", function (index, O, key ){

Alert ("The Item1 set has a new member:" + key );

});

Item1.add ("03", {name: "C "});

6. Ext. util. tashrunner

Overview: the main operation is the thread, which can be used to run and stop the thread. Multiple Threads do not affect each other, similar to the multithreading mechanism in Java.

1. instantiate an object of the Ext. util. taskrunner class.

2. Specify attributes in the object of a thread:

Run specifies the function, which indicates the function executed after the thread is enabled.

Interval indicates the number of times to run the specified function at intervals.

3. Call the start method to enable the object of a thread passed in by the thread.

4. Call the stop method to stop the thread and pass in the object of the thread to be stopped.

Varrunner = new Ext. util. taskrunner ();

Vartask = {

Run: function (){

Ext. getdom ("input"). value = ext. util. format. Date (newdate (), "Y-m-d-s ");

},

Interval: 1000

};

Runner. Start (task );

Ext. Get ("B6"). On ("click", function (){

Runner. Stop (task );

});

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.