Adapter: maps the third-party underlying libraries (including the underlying libraries provided by ext) to the underlying libraries supported by Ext.
Build: All the compressed ext Source Code (which is classified and stored ).
Docs: API help documentation.
Exmaples: provides small instances made using extjs technology.
Resources: ext UI resource file directory, where CSS and image files are stored.
Source: all source code without compression ext (which is classified for storage) complies with the lesser GNU (lgpl) Open Source protocol.
Ext-all.js: Compressed ext all source code.
Ext-all-debug.js: Uncompressed ext all source code (for debugging ).
Ext-core.js: the core components of the compressed Ext, including all classes under sources/core.
Ext-core-debug.js: Core Components Without compressing Ext, including all classes under sources/core.
After obtaining the extjs library file, you can apply extjs to the page. The Application of extjs needs to introduce extjs style and extjs library file in the page, the style file is resources/CSS/ext-all.css, 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, ext-all.js is the core library of extjs. Adapter represents the adapter, that is, there can be a variety of adapters, so you can change adapter/EXT/ext-base.js to adapter/jquery/ext-jquery-adapter.js, or adapter/prototype/EXT-prototype-adapter. js and so on.
Therefore, pages that use the extjs framework generally include the following:
After the extjs library file and page content are loaded, extjs will execute Ext. the functions specified in onready can be used. Generally, each user's extjs application is from ext. started with onready, using extjs applicationsProgramOfCodeIt is roughly as follows:
FN can also be written as an anonymous function, so the above Code can be changed to the following form:
After reading the above content, can't you wait to try it? Don't worry, let's write the simplest extjs application. Enter the following code in the hello.html file:
Take a look at the page effect:
Further, we can display a window on the page. The Code is as follows:
To view hello.html, you can display a window on the screen ,:
Copy code The Code is as follows: <% @ page Language = "C #" autoeventwireup = "true" codebehind = "default. aspx. cs" inherits = "extjsapptest. Default" %>
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> extjs world </title>
<LINK rel = "stylesheet" type = "text/CSS" href = "extjs/resources/CSS/ext-all.css"/>
<SCRIPT type = "text/JavaScript" src = "extjs/adapter/EXT/ext-base.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "extjs/ext-all.js"> </SCRIPT>
<SCRIPT>
Ext. onready (function (){
// The warning dialog box is displayed.
// Ext. MessageBox. Alert ("hello", "Hello, hyey. WL come to extjs world! ");
// The Window form is displayed.
VaR win = new Ext. window ({Title: "hello", width: 300, height: 200, HTML: 'Win. Show ();
});
</SCRIPT>
</Head>
<Body>
<Form ID = "form1" runat = "server">
<Div>
</Div>
</Form>
</Body>
</Html>
This is just a simple example. to make complex functions, you still need to learn a lot. In the next articleArticleI will introduce the extjs class library and component introduction. I hope you will continue to follow my blog!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
