The first day of learning the basics of YUI.Ext_YUI.Ext related

Introduction

I looked through the old posts and shared some worth recalling:

Post1:


...... ........
A large number of our current applications rely on the script processing capabilities of browsers (mainly IE). It will indeed be slightly slow when running on some old machines, but the current mainstream models There is no problem handling it anymore. We have designed a complete set of Web development frameworks, which will become more and more stable as the applications are refined. Improper use of JavaScript can easily cause IE to crash. We solve this problem by improving code reuse, because code with higher reuse is often more stable. Some people who are short-sighted often ignore JavaScript from the overall solution at first glance, but we find that JavaScript is very valuable as the presentation layer of the solution, and the presentation layer is solved through the mapping of several layers of DOM trees - Logical layer separation is much more flexible than using MVC. Our basic idea is that only data should be transmitted between the browser and the server, and how to display (present) it is decided by the browser itself. Our middleware embodies this idea very well. The learning cost of MVC is also an important consideration. I can say without shame that I don't understand MVC, but we do solve problems that our customers need us to solve.
........................

Post2:

............ .

After more than a year of discussions on XMLHTTP, JavaScript, RIA and other technologies and architectures, we can actually reach the exact same conclusion in the end. The feasibility of AJAX is unquestionable, and has been proven by the experience of some of our developers who are brave enough to practice it (my experience, and the experience of many people who use JS XMLHTTP XSLT, put some gold on their faces, haha), As well as the recent great applications such as Google Map (experience the speed of Google Map, you will know why I say great), it has also been confirmed that innovation based on Web standards is a bright road. My colleague ly adopted this development model three years ago and introduced its benefits to me. I later repeatedly promoted the benefits of using JS XMLHTTP for development here. Therefore, I am not surprised at all by the emergence of AJAX, but I feel a bit regretful that this development model has only become popular now. In the past, most domestic developers only blindly believed in J2EE and .Net, limiting themselves to cynical blind obedience to big manufacturers, rather than being willing to innovate on their own. The emergence of AJAX is a revelation and a lesson for domestic developers. Communism cannot wait, and neither M$, IBM, nor Sun will give away the happy life of communism. It’s not that the technology itself is incompetent (such as HTML/CSS/JavaScript, which seems to be completely outdated to some people), it’s actually the people who are incompetent. No matter how good the technology is, you can’t make good things. Relatively speaking, I am more optimistic about this aspect rather than proprietary solutions such as XAML or Flash. Now that the combination of these technologies has a new name AJAX, we will call these technologies AJAX from now on.

........................

---This is a snippet of a post by dlee master on JAVAEYE in 2004, its significance at that time Today it can be said that it has been proven feasible---I hereby provide an introduction to the text.

The author below is Brian Moeskau, translated by Frank. The original source is here


Tutorial: Introduction to Ext
Whether you are new to the Ext library or someone who wants to understand Ext , the content of this article is suitable for you. This article will briefly introduce several basic concepts of Ext and how to quickly make a dynamic page and run it. It is assumed that the reader already has some JavaScript experience and a basic understanding of HTML Dom. Otherwise, start by reading the JavaScript for Beginners resources.

Download Ext
Maybe you have not downloaded it before, then you should download the latest version of Ext from here http://extjs.com/downloads.

There are several different flexible options for your downloading needs. Usually, the most stable version is the choice of more people. After downloading and unpacking, the example folder is a good place for exploration!

Start!
We will use Ext to complete some common JavaScript situations.

The Zip file includes three files: ExtStart.html, ExtStart.js and ExtStart.css. Unpack these three files into the Ext installation directory (for example, if Ext is in "C:codeExtv1.0", then you should create a new directory "tutorial" in "v1.0".Double-click ExtStart.htm, then your browser will open the startup page. There should be a message telling you that the configuration is complete. If it is a Javascript error, please follow the instructions on the page.

In your usual IDE or text editor, open ExtStart.js and take a look:

Ext.onReady may be the first method you come into contact with. This method refers to ensuring that all elements in the page can be referenced by Script after the current DOM is loaded. You can delete the alert() line and try adding some practical code:

Element: Ext Core
Most JavaScript operations need to get an element (reference) on the page so that you can do interesting things. The traditional JavaScript method is to get the Dom node through the ID:

var myDiv = document.getElementById('myDiv'); This is no problem, but it only returns an object (DOM node), which is not easy to use. Not too powerful and easy to use. In order to do something with that node, you're going to have to write a lot of custom code; plus, the differences between different types of browsers are really overwhelming for you to deal with.

Enter the Ext.element object. Elements are indeed the heart of Ext - whether you are accessing elements or completing some actions, you have to touch it. Element's API is the basis of the entire Ext library. If you don't have much time and just want to understand one class in Ext, Element must be your first choice!

Obtain an Ext Element from the ID as follows (the homepage ExtStart.htm contains a div with the ID name "myDIv", then add the following statements to ExtStart.js):

Ext.onReady (function() {var myDiv = Ext.get('myDiv');}); Looking back at the Element object, what interesting stuff did you 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 nodes.);
Element.get() method has built-in cache processing (Cache), which has great advantages in efficiency when accessing the same object multiple times;
Built-in commonly used DOM node actions, and cross-browser positioning, size, and animation , drag and drop, etc. (add/remove CSS classes, add/remove event handlers, positioning, sizing, animation, drag/drop).
This means you can do a variety of things with minimal code, here is just a simple example (the full list is in elementAPI).

Continue in ExtStart.js and add the following to the location where we just obtained myDiv: