ExtJs study notes Hello World!_extjs-JS Tutorial-php.cn

I recently learned ajax and came into contact with the powerful framework of Extjs. I want to use my study notes to finally enable everyone to get started using Ext in projects. First, I will write some basic articles for getting started with Ext. It is important to lay a good foundation.

After understanding the basics, you may use Ext ajax to develop a simple small project. I will explain the project development process step by step. I hope it can bring benefits to everyone! Because I am also learning this framework, please give me any suggestions on the article, which may help me learn more.

Seeing this picture, you may think it is some software, or Flash, Flex, silverlight, etc., but this is implemented by javascript Css.

Looking at this style and effect, if you add it to your own project, the user’s visual and operational experience should be very pleasant. There are more special effects so I won’t take screenshots one by one.
Now let’s talk about this component. ExtJs is a good Ajax framework, written in javascript. You can see the effect above. We can apply ExtJs to any web development language. Its client effect 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 the interaction between Ext and the server will be written later.
We need to obtain this framework before applying it. You can download it from the official website at http://www.php.cn/, which is open source. After downloading and decompressing, you will get the following directory.

Adapter: Responsible for mapping the third-party underlying libraries provided (including those provided by Ext) to the underlying libraries supported by Ext.
build: all compressed Ext source code (categorized storage)
docs: API help documentation
examples: some examples of effects made by Extjs
resources: Ext UI resource file directory, css, pictures are all there This
source: All source codes of uncompressed Ext
ext-all.js: All source codes of compressed Ext, key files, more than 500K
ext-all-debug.js: All source codes of uncompressed Ext (for debugging)
ext-core.js: core components, including all classes under source/core
ext-core-debug.js: uncompressed core components

Next will be a For testing in purely static html pages, if you want to use ExtJs, you first need to import 3 script files and a style sheet

这里要说明一下，在Extjs文件加载完毕后，会执行Ext.onReady中指定的函数，我们可以用简单的代码做一个测试。

Two writing methods can achieve the same effect
Note that Ext.onReady(start) does not need to add ().
Ext.MessageBox.alert("ok"," Extjs framework has been 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 operation effect is as follows

An alert dialog box can be easily implemented using Extjs. prompt('',''); also has relative application 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 a little troublesome, Ext.MessageBox.prompt('Title', 'Description:', executed after completion function); The executed function requires two parameters, button and text. button is used to determine whether the user has selected the Cancel or OK option. OK means the value is 'ok'. text is the input text.

I only give two small examples for explanation, and the usages such as confim are similar.
There is also a Window box that is more commonly used and easier to understand.

This beautiful frame can be dragged and clicked to close.
Usage is as follows:

tags), none of which has an ID. If you want to easily obtain each paragraph immediately through one operation and perform their actions collectively, you can do this:
// Highlight each paragraph
Ext.select('p').highlight();
The convenience of Element.select in this example is obvious. It returns a composite element, each element accessible through the Element interface. The advantage of this is that you don't need to loop and access each element separately.
DomQuery's selection parameters can be a long array, including W3C CSS3 Dom selectors, basic XPatch, HTML attributes and more. Please refer to the DomQuery API documentation for details on this powerful library.
Responding to events Up to this example, the code we have written is placed in onReady, that is, it will always be executed immediately after the page is loaded, and the function is relatively simple - in this way, you will know how to respond to an action or Events to perform what you want to do, the approach is to first assign a function, and then define an event handler event handler to respond. We start with this simple example, open ExtStart.js and edit the following code:
Ext.onReady(function() {
Ext.get('myButton').on('click', function() {
alert("You clicked the button");
});
});
The code will still be executed after loading the page, but the important difference is that the code containing alert() The function is defined, but it will not be executed immediately. It is assigned to the click event of the button. To explain in plain text, it is: get a reference to the element with the ID 'myDottom', monitor any click on this element, and assign a function to prepare for any click on the element.
Generally speaking, Element.select can also do the same thing, that is, it can be used to obtain a set of elements. The next example demonstrates that after a certain paragraph in the page is clicked, a pop-up window will appear:
Ext.onReady(function() {
Ext.select('p').on('click', function() {
alert("You clicked a paragraph;");
});
});
In these two examples, the event processing function is a few simple sentences. There is no name for the function. This type of function is called an "anonymous function", which is a function without a name. You can also assign a named event handler, which is useful for code reuse or multiple events. The next example is equivalent to the previous one:
Ext.onReady(function() {
var paragraphClicked = function() {
alert("You clicked a paragraph;");
}
Ext.select('p').on('click', paragraphClicked);
});
So far, we already know how to perform an action. But when an event is triggered, how do we know which specific element this event handler is acting on when executing? To clarify this is very simple, the Element.on method is passed into the function of the even handler (we will discuss the first parameter here, but you should browse the API documentation to learn more details about the even handler). In our previous example, the function ignored these parameters, but there are a few changes here - we provide a deeper control over the function. It must be noted first that this is actually an Ext event object, a cross-browser and more controllable event object. For example, you can use the following statement to get the DOM node where this event response is located:
Ext.onReady(function() {
var paragraphClicked = function(e) {
Ext.get(e.target) .highlight();
}
Ext.select('p').on('click', paragraphClicked);
});
Note that the obtained e.target is a DOM node, so We first convert it into an EXT Elemnet element, and then execute the event we want to complete. In this example, we see that the paragraph is highlighted.
Okay, today I will simply write a few to let everyone know about them. It's late at night, it's time to go to bed, and I will continue to write after learning. This thing is so useful.
Demo download address http://www.php.cn/