Introduction to the first day of YUI. Ext
I have reviewed my previous posts and shared some interesting topics:
Post1:
.................
A large number of our current applications rely on the script processing capabilities of browsers (mainly IE). It is really slow when running on some old machines, however, the current mainstream models have no problems. We have designed a complete set of Web development frameworks, which will become more and more stable with the tempering of applications. The poor use of JavaScript may cause IE to crash. we solve this problem by improving code reuse, because the Code with higher reusability tends to be more stable. Some people with low eyes tend to ignore JavaScript from the overall solution at first glance. However, we find that the presentation layer of JavaScript as a solution is very valuable, in addition, the presentation layer-logical layer separation is much more flexible than the use of MVC through several-layer DOM tree ing. Our basic idea is that the data transmitted between browsers and servers is determined by the browser. Our middleware reflects this idea well. The learning cost of MVC is also an important factor. I can say that I don't understand MVC without blushing, but we have solved the problems that customers need to solve.
.................
Post2:
.................
Over the past one year, we have discussed technologies and architectures such as XMLHTTP, cirpt, and RIA. In fact, we can come to the same conclusion. The feasibility of AJAX is unquestionable. It has already been the experience of some developers who are brave enough to practice it here (my experience also involves many experiences from people who use JS + XMLHTTP + XSLT, I have posted some gold on my face.) and recent great applications such as Google Map (experiencing the speed of Google Map, you will know why I say it is great) have proved that, it also confirms that innovation based on Web standards is a bright road. My colleague ly used this development model three years ago and introduced its advantages to me. Later, I repeatedly promoted the advantages of using JS + XMLHTTP for development. Therefore, I am not surprised at the emergence of AJAX, but I am sorry for the popularity of this development model. In the past, most developers in China only knew that they were blindly superstitious about J2EE, superstitious about. Net, and restricted themselves from blindly following the big factory, rather than willing to innovate on their own. The emergence of AJAX is an inspiration and a lesson for Chinese developers. Communism cannot wait. No matter M $, IBM or Sun, they will not give off the happy life of communism. Not the technology itself (for example, HTML, CSS, and JavaScript technologies that seem completely outdated to some people). In fact, people still cannot, even the best technology can't make good things for you. I am more optimistic about this, rather than private solutions such as XAML or Flash. Now that the combination of these technologies has a new name called AJAX, we will call it AJAX later.
.................
--- This is a piece of post by dlee talents on JAVAEYE in June 2004. Its significance at that time can be said to have been proved to be feasible today-I hereby provide an introduction for the text.
Brian Moeskau is the author of this article.
Tutorial: Ext Introduction
Whether you are a newbie to the Ext library or anyone who wants to know Ext, the content of this article is suitable for you. This article will briefly introduce several basic concepts of Ext, and how to quickly create a dynamic page and run it. Assuming that the reader has some JavaScript experience and has a basic understanding of HTML Dom. Otherwise, read the JavaScript resources for beginners.
Download Ext
You may have never downloaded the latest version of Ext http://extjs.com/downloads.
There are several different elastic options for your download needs. Generally, the most stable version is the choice of many people. After downloading and unpackage, the example folder is a great place to explore!
Start!
We will use Ext to complete some common JavaScript scenarios.
The Zip file consists of ExtStart.html, extstart.js, and extstart.css. Decompress these three files to the Ext installation directory (for example, Ext is in "C: \ code \ Ext \ v1.0, create the directory "tutorial" in "v1.0 ". Double-click extstart.htm, and then open the startup page in your browser. There should be a message telling you that the configuration is complete. If a Javascript error occurs, follow the instructions on the page.
In your commonly used IDE or text editor, open ExtStart. js to see:
Ext. onReady may be your first method. This method ensures that all elements on the page can be referenced by a Script after the current DOM is loaded ). You can delete alert () and add some practical code to try:
The Code is as follows:
Ext. onReady (function (){
Alert ("Congratulations! You have Ext configured correctly! ");
});
Element: Ext Core
Most JavaScript operations need to obtain a reference element on the page, so that you can do interesting things. 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 too powerful and easy to use. To use that node to do something, you will need to write a lot of Custom Code. In addition, for the differences between different types of browsers, it is really big to deal.
Enter the Ext. element Object. The element is indeed the heart of Ext, which is involved in accessing elements and completing some actions. The Element API is the basis of the entire Ext library. If you only want to know a class in Ext, Element must be the first choice!
Obtain an Ext elementby ID (for example, the first page extstart.htm contains a p, the ID name is "myDIv", and then add the following statement to ExtStart. js ):
Ext. onReady (function () {var myDiv = Ext. get ('mydiv ') ;}); then let's look back at the Element Object. What interesting things do we find?
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 has a built-in Cache, which greatly improves the efficiency of multiple accesses to the same object;
Built-in common DOM node actions, including cross-browser location, size, animation, drag and drop (add/remove CSS classes, add/remove event handlers, positioning, sizing, animation, drag/drop ).
This means that you can use the smallest code to do a variety of things. Here is just a simple example (the complete list is in elementAPI ).
In ExtStart. js, add:
The Code is as follows:
MyDiv. highlight (); // highlighted 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
