ExtJS learning topic (1) How to apply ExtJS (with examples)_extjs

To use ExtJS, you must first obtain the ExtJS library file. The ExtJS library file can be downloaded from the ExtJS official website at www.extjs.com/products/gxt/download.php. Unzip the downloaded ZIP compressed file to [D:ExtCode 】 directory, you can get the following content.

Adapter: Responsible for mapping the third-party underlying libraries provided (including the underlying libraries that come with Ext) to the underlying libraries supported by Ext.
Build: All the compressed ext source code (stored in categories).
docs: API help documentation.
exmaples: Provide small examples made using ExtJs technology.
Resources: Ext UI resource file directory, such as CSS and image files are stored here.
Source: All source codes of uncompressed Ext (stored in categories) comply with the Lesser GNU (LGPL) open source agreement.
Ext-all.js: Compressed all source code of Ext.
ext-all-debug.js: All source code of uncompressed Ext (for debugging).
ext-core.js: Compressed core components of Ext, including all classes under sources/core.
　ext-core-debug.js: The core component of uncompressed Ext, including all classes under sources/core.

After getting the ExtJS library file, you can apply extjs to the page. To apply extjs, you need to introduce the extjs style and extjs library files into the page. The style file is resources/css/ext-all.css. The extjs js library file mainly contains two, adapter/ext/ext-base.js and ext- all.js, where ext-base.js represents the framework base library, and ext-all.js is the core library of extjs. adapter means adapter, which means there can be multiple adapters. Therefore, you can replace adapter/ext/ext-base.js with adapter/jquery/ext-jquery-adapter.js, or adapter/prototype/ext-prototype-adapter .js etc.

Therefore, pages that use the ExtJS framework generally include the following sentences:

After the ExtJS library file and page content are loaded, ExtJS will execute the function specified in Ext.onReady, so it can be used. Under normal circumstances, each user's ExtJS application starts from Ext.onReady, and uses ExtJS application The code of the program is roughly as follows:

　fn can also be written in the form of an anonymous function, so the above code can be changed to the following form:

How about it? After reading the above content, are you eager to give it a try? Don’t worry, let’s write the simplest ExtJS application and enter the following code in the hello.html file:

Look at the page effect:

Further, we can display a window on the page, the code is as follows:

When browsing hello.html, a window will be displayed on the screen, as shown in the figure:

Copy code

The code is as follows:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ExtJSAppTest.Default" %>







<script> <br>Ext.onReady(function () { <br>//弹出警告对话框. <br>//Ext.MessageBox.alert("hello", "Hello ,Hyey.wl Come to ExtJS World!"); <br>//弹出Window窗体. <br>var win = new Ext.Window({ title: "Hello", width: 300, height: 200, html: '<h1>Hello Easy ExtJS Open Source Window</h1>' }); <br>win.show(); <br>}); <br></script>

这只是一个简单的实例，要想做出复杂的功能还需要学习很多知识，在下一篇文章中将介绍ExtJS类库和组件介绍，希望大家继续关注我的博客！