Extjs4 note (2) extjs support for basic JS syntax Extension

ArticleDirectory

• 1. dynamically reference external JS
• 2. Dynamic Loading class
• 1. The function is waiting for execution.
• 1. The function is executed repeatedly at a certain frequency.
• 1. Ext. keymap
• 2. Ext. keynav

Back to the series directory

This article mainly introduces extjs extension support for basic JS syntax, including dynamic loading and class encapsulation.

I. dynamic reference Loading

Extjs has a huge Type Library, and many classes may not be used on the current page. We can introduce the concept of dynamic loading to get it out of the box. TheseCodeMust be written outside Ext. onready.

1. dynamically reference external JS

[JS]

 
// You can use ext to load the configuration. loader. setconfig ({enabled: true}); // dynamically reference ".. all JS file classes under the/UX/"directory are mapped to the corresponding namespace Ext. loader. setpath ('ext. UX ','.. /UX /');
 

2. Dynamic Loading class

[JS]

// Load a single class Ext. require ('ext. window. window '); // load multiple Ext. require (['ext. grid. * ', 'ext. data. * ', 'ext. util. * ', 'ext. grid. pagingscroler']); // loads all classes except "Ext. data.. exclude ('ext. data. *'). require ('*');
 

Ii. encapsulation of Classes

JS itself is an object-oriented language, but its syntax-level support for classes is not perfect. extjs has made a series of packages for it, next let's take a look at the class definition, field, constructor, method, static field, method implementation method, and class inheritance usage.

[JS]

Ext. onready (function () {Ext. define ("My. test. animal ", {Height: 0, weight: 0}); Ext. define ("My. test. person ", {// common sub-segment name:" ", // attribute config: {age: 0, Father: {name:" ", age: 0 }}, // constructor: function (name, height) {This. self. count ++; If (name) This. name = Name; If (height) This. height = height;}, // inherit extend: "My. test. animal ", // instance method say: function () {alert (" Hello, I am: "+ this. name + ", I am" + this. Age + "years old, and my height is:" + this. height + ". My father is: "+ this. Father. Name +", he is "+ this. Father. Age +" years old. ") ;}, // Static sub-segment, Method Statics: {type:" high animal ", Count: 0, getcount: function () {return" current total "+ this. count + "persons" ;}}}); function test () {var P = ext. create ("My. test. person "," Li Si ", 178); p. setage (21); p. setfather ({age: 48, name: "Li Wu"}); p. say (); Ext. create ("My. test. person "); alert (my. test. person. getcount () ;}test ();});

III. Basic Data Types

Extjs supports numeric, String, date, Boolean, and other basic data types. The content is relatively simple. The following shows the basic declaration usage and type conversion.

[JS]

 
// Define a date data var date1 = new date ("2011-11-12"); var date = new date (2011, 11, 12, 12, 1, 12 ); // convert to string type alert (date. tolocaledatestring (); // convert it to a numeric alert (number (date); // boolean type, false var myfalse = new Boolean (false ); // true var mybool = new Boolean (true); // defines the value var num = new number (45.6); alert (Num );
 

Iv. Function execution time control

It mainly uses two aspects: 1. Let a function automatically execute after a period of time. 2. A function is executed repeatedly at a certain frequency.

1. The function is waiting for execution.

Implement a function. After the page is loaded, a prompt will pop up three seconds later.

[JS]

 
VaR func1 = function (name1, name2) {Ext. msg. Alert ("automatically executed in 3 seconds", "hello," + name1 + "," + name2 + "! ") ;}; Ext. Defer (func1, 3000, this, [" Zhang San "," Li Si "]);
 

1. The function is executed repeatedly at a certain frequency.

Let div1 update the current time every second, and stop the update automatically in 10 seconds:

[JS]

 
// Periodical execution of VaR I = 0; var task = {run: function () {Ext. fly ('div1 '). update (new date (). tolocaletimestring (); if (I> 10) Ext. TASKMANAGER. stop (task); I ++ ;}, interval: 1000} Ext. TASKMANAGER. start (task );
 

5. keyboard event Listening 1. Ext. keymap

You can use Ext. keymap to create a actiing between a keyboard and a user action (actions. The following is an example. The page HTML follows the Ext. Updater section.

[JS]

VaR F = function () {alert ("B is pressed");} var map = new Ext. keymap (ext. getdoc (), [{key: ext. eventobject. b, FN: F },{ key: "BC", FN: function () {alert ('B, C, one of which is pressed') ;}}, {key: "X", CTRL: True, shift: True, alt: True, FN: function () {alert ('control + Shift + ALT + X keys are pressed. ') ;}, stopevent: true}, {key: "A", CTRL: True, FN: function () {alert ('control + a all-selected event is blocked, custom Event execution! ') ;}, Stopevent: true}]);
 

We can see that, in IE testing, when we press Ctrl + A, the full selection function is blocked and supports our custom method.

2. Ext. keynav

Ext. keynav is mainly used to bind direction keys. Supported keys include enter, left, right, up, down, tab, ESC, Pageup, Pagedown, Del, home, end, now we can use it to move the mouse control layer:

[JS]

VaR div1 = ext. get ("div1"); var nav = new Ext. keynav (ext. getdoc (), {"Left": function (e) {div1.setxy ([div1.getx ()-1, div1.gety ()]);}, "right": function (E) {div1.setxy ([div1.getx () + 1, div1.gety ()]);}, "up": function (e) {div1.move ("up", 1 );}, "down": function (e) {div1.moveto (div1.getx (), div1.gety () + 1) ;}, "enter": function (e ){}});
 

By Lipan)
Source: [Lipan] (http://www.cnblogs.com/lipan)
Copyright: The copyright of this article is shared by the author and the blog. The detailed link of this article must be noted during reprinting; otherwise, the author will be held legally liable.