Extjs learning notes BASICS (1)-Getting Started helloword

Document directory

• Element: ext Core
• Get multiple DOM nodes
• RESPONSE event

Recently I learned about Ajax and came into use with extjs, a powerful framework. I want to use my study notes to get started with ext in the project. First, I will write some basic articles for getting started with Ext. It is very important to lay a good foundation. After learning about the basics, you may use ext + ajax to develop a simple small project. The project development process will be explained in 1.1 drops, hoping to bring you some benefits! Because I am also studying this framework, please give me some suggestions for this article, which may help me learn more.

If you see this picture, you may think it is a software, or flash, flex, Silverlight, etc., but this is implemented by JavaScript + CSS.

If you look at the style and effect in your project, the user's visual and operational experience should be very refreshing. There are more special effects.
Let's start with this component. extjs is a good Ajax framework written in JavaScript. We can see the effect above. We can apply extjs to any web development language. The client is very powerful. At the same time, ext also provides a mechanism for interacting with the server, which is very convenient to use. The article on ext interacting with the server will be written later.
Before the application we need to get this framework, you can go to the http://extjs.com/products/extjs/download.php official website to download, open source. After downloading and decompressing the package, you will get the following directory.

Adapter: maps the third-party underlying libraries (including the underlying libraries provided by ext) to the underlying libraries supported by Ext.
Build: All ext source code after compression (classified storage)
Docs: API help documentation
Examples: some examples of extjs results
Resources: ext UI resource file directory where CSS and images are stored
Source: No compressed ext source code
Ext-all.js: Compressed ext all source code, key files ah, more than 500 k
Ext-all-debug.js: no compression ext all source code (for debugging)
Ext-core.js: core components, including all classes under source/Core
Ext-core-debug.js: Core Components Without Compression

Next, we will perform a test on a pure static html page. To apply extjs, we need to first import three script files and one style sheet. <LINK rel = "stylesheet" type = "text/CSS" href = "extjs/resources/CSS/ext-all.css"/>
<SCRIPT src = "extjs/ext-base.js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = "extjs/ext-all.js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = "extjs/ext-lang-zh_CN.js" type = "text/JavaScript"> </SCRIPT>

Here we want to explain,After the extjs file is loaded, the function specified in Ext. onready is executed., We can use simple code for a test. <Script language = "javascarept">
Function start (){
Ext. MessageBox. Alert ("OK", "extjs framework loaded! ");
}
Ext. onready (start );
</SCRIPT>
<Script language = "javascarept">
Ext. onready (
Function {
Ext. MessageBox. Alert ("OK", "extjs framework loaded! ");
}
);
</SCRIPT>

The two methods can achieve the same effect.
Note:Ext. onready (start) does not need to be added ().
Ext. MessageBox. Alert ("OK", "extjs framework loaded! "); Is used to output a dialog box.
Ext. MessageBox. Alert ('title', 'Pop-up content'); it can also be written as Ext. msg. Alert ('','');
The running effect is as follows:

An alert dialog box can be easily implemented using extjs. Prompt ('',''); there are also relative application methods in extjs. Function prompt (){
Ext. MessageBox. Prompt (
"Input ",
"Input a number :",
Function (button, text ){
If (Button = "OK ")
Ext. MessageBox. Alert ("Number", "the number is" + text );
Else
Ext. MessageBox. Alert ("sorry", "the number is null .");
}
);
}

This syntax is slightly troublesome. Ext. MessageBox. Prompt ('title', 'note: ', the function to be executed after completion). The executed function requires two parameters: button and text. The button is used to determine whether the user has selected the cancel or OK option. If it is OK, the value is 'OK '. Text is the input text.

Only two small examples are provided for illustration, and confim and other usage are similar.
There is also a common and easy-to-understand window box.

You can drag this beautiful box and click X to close it.
The usage is as follows: Function window (){
VaR win = new Ext. Window ({Title: "hello", width: 300, height: 200, HTML: 'This is the body .'});
Win. Show ();
}

Create an Ext. Window object and call the show method to display the object.
Ext. window can be used to input many parameters in the constructor. Only the content displayed in the title, width, height, and body areas is used here.
New Ext. Window ({Title: "", width: 300, height: 200, HTML: 'This is the body .'});
Title: "" set the title
Width: 300 width
Height: 200
HTML: 'xxxx' can place any HTML code
The following is an excerpt from the document:
Element: ext Core

For most JavaScript operations, you must first obtain the reference of an element on the page so that you can do something substantive. The traditional JavaScript method obtains DOM nodes by ID:

var myDiv = document.getElementById('myDiv');

This is no problem, but returning an object (DOM node) is not very practical and convenient to use. To do something with that node, you have to write a lot of code manually. In addition, the difference between different types of browsers must be handled.

Enter Ext. Element
Object. The element is indeed the heart of Ext, which is involved in accessing elements and completing other actions. Element
The API is the foundation of the entire ext library. If you don't have much time and want to know one or two classes in ext, element must be the first choice!

Obtain the response code of an ext element by the ID. For example, the following code indicates that extstart.htm on the first page contains an object whose ID is "mydiv ".
Div, and then add the following statement to extstart. JS): The corresponding code to get an ext
Element by ID looks like this (the starter page extstart.html contains
A Div with the ID "mydiv," So go ahead and add this code
Extstart. JS ):

Ext.onReady(function() {

var myDiv = Ext.get('myDiv');

});

Let's look back at the Element Object and find something interesting?

• Element contains common Dom methods and attributes, providing a fast, unified, cross-browser interface (if you use element. dom, you can directly access the underlying Dom node .);
• The element. Get () method provides a built-in cache, which greatly improves the efficiency of multiple accesses to the same object;
• Built-in common Dom node actions and cross-browser location, size, animation, drag and drop (Add/Remove CSS classes, Add/Remove event handlers, locate, change the size, animation, drag and drop ).

This means that you can use a small amount of code to do a variety of things. Here is just a simple example (the complete list is in the element API document ).

In extstart. JS, add:

Mydiv. Highlight ();// Highlight in yellow and then fade away

Mydiv. addclass ('red ');// Add a custom CSS class (defined in extstart.css)

Mydiv. Center ();// Center the element in the view

Mydiv. setopacity (. 25 );// Make the element translucent

Get multiple DOM nodes

Generally, it is difficult to obtain multiple DOM nodes by ID. It may be because no ID is set, or you do not know the ID, Or you directly reference too many elements using the ID method.
. In this case, you do not need to use ID as the basis for obtaining elements, and may use attributes or CSS.
Instead of classname. Based on the above reasons, ext introduces an exceptionally powerful Dom selector library called domquery.

Domquery
It is used as a separate library but is often used in Ext. You can obtain multiple elements in the context and call them through the element interface. Amazing
Yes, the element object itself has the element. selcect method to implement the query, that is, internally calls domquery to select the element. This simple example
In, extstart.htm contains several paragraphs (<p> tag), none of which have IDs, and you want to easily obtain each segment through an operation and execute them all
As follows:

// Highlight each segment

Ext. Select ('P'). Highlight ();

Convenience of element. Select is undoubtedly apparent in this example. It returns a composite element and can access each element through the element interface. The advantage of doing so is that you do not need to loop or access each element separately.

Domquery selection parameters can be a long array, including W3C css3 Dom selector, basic xpatch, HTML attributes, and more, see the domquery API documentation for details about this powerful library.

RESPONSE event

By this example, all the code we write is put in onready, that is, when the page is loaded, it will always be executed immediately, and the function is relatively simple-in this case, you will know how to respond to an action or event
To execute what you want to do, assign a function first and then define an event
Handler event processor to respond. Starting from this simple example, open extstart. js and edit the following code:

Ext. onready (Function(){

Ext. Get ('myclick'). On ('click ',Function(){

Alert ("You clicked ");

});

});

The code is still executed after the page is loaded. However, the important difference is that the function containing alert () is defined, but it is not executed immediately. It is a click task assigned to the button.
. In plain text, it is used to obtain the reference of the 'mydottom 'element, listen to any situations where this element is clicked, and assign a function to prepare
Click an element.

In general, element. Select can also do the same thing, that is, to obtain a group of elements. In the next example, a section in the page is displayed after it is clicked:

Ext. onready (Function(){

Ext. Select ('P'). On ('click ',Function(){

Alert ("You clicked a paragraph ;");

});

});

In these two examples, the function processed by the event is a few simple statements without the function name. This type of function is called the "anonymous function (Anonymous
Function) ", that is, a function without a name. You can also assign an event with a name.
Handler, which is useful for code reuse or multiple events. The next example is equivalent to the previous example:

Ext. onready (Function(){

VaRParagraphclicked =Function(){

Alert ("You clicked a paragraph ;");

}

Ext. Select ('P'). On ('click', paragraphclicked );

});

So far, we have known how to execute an action. But how do we know this event when an event is triggered?
Which specific element does handler play a role in execution? To clarify this, it is very simple to pass the element. On Method to the even
Handler function (we will discuss the first parameter here, but you should browse the API documentation to learn about even
Handler ). In our previous example, the function ignores these parameters, but there are a few changes here-we provide more in-depth functional control. Required
It must be noted that this is actually the ext event object (Event
Object), an object that is cross-browser and has more control over events. For example, you can use the following statement to obtain the DOM node where the event response is located:

Ext.onReady(function() {

var paragraphClicked = function(e) {

Ext.get(e.target).highlight();

}

Ext.select('p').on('click', paragraphClicked);

});

The exported e.tar get is a DOM node, so we first convert it into the ext elemnet element and then execute the event to be completed. In this example, we can see that the Section is highlighted.

Now, let's write a few simple articles today to let everyone know. It's time to go to bed later. This is so useful.
Source code: http://files.cnblogs.com/dirain/ExtjsDemo-1.rar