This article from: http://blog.csdn.net/cjh6311882/article/details/8287283
Understanding extjs is a front-end Ajax framework that uses JavaScript, CSS, HTML, and other technologies to create user interfaces and is irrelevant to background technologies.
Extjs comes from Yui and its development philosophy comes from traditional desktop software development.
1. Download extjs, decompress it, and obtain the directory structure.
Builds: Compressed by extjsCode, Smaller size, faster loading
Docs: extjs documentation
Examples: Official example
Locale: resource files in multiple languages
Overview: Brief description of extjs Functions
Pkgs: A package file for functions of extjs
Resource: image files and style files used by extjs.
SRC: Uncompressed code directory
Bootstrap. JS: the guiding file of the extjs Library
Ext-all.js: Core libraries that must be introduced
Ext-all-debug.js: Debug edition for ext-all.js
2. Also starting from Hello World (extjs 4.0)
<HTML>
<Head>
<Title> helloworld </title>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<LINK rel = "stylesheet" type = "text/CSS" href = "./ext-4.0/resources/CSS/ext-all.css"/>
<SCRIPT type = "text/JavaScript" src = "./ext-4.0/Bootstrap. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "./ext-4.0/locale/ext-lang-zh_CN.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
Ext. onready (function (){
Ext. MessageBox. Alert ('helloworld', 'Hello world! Hello world! Hello world! Hello world! ');
});
</SCRIPT>
</Head>
<Body> </body>
</Html>
3. Implement the toolbar and menu bar
<SCRIPT type = "text/JavaScript">
Ext. onready (function (){
VaR toolbar = new Ext. toolbar. toolbar ({
Renderto: 'toolbar ',
Width: 300
});
VaR childrenmenu = new Ext. Menu. menu ({
Ignoreparentclicks: True,
Items :[
{Text: 'openone '},
{Text: 'Open two '}
]
});
VaR filemenu = new Ext. Menu. menu ({
Shadow: 'framework ',
Allowothermenus: True,
Items :[
New Ext. Menu. Item ({
Text: 'new'
}),
{Text: 'Open', menu: childrenmenu },
{Text: 'close '}
]
});
Toolbar. Add (
{
Text: 'new ',
Menu: filemenu
},
{
Text: 'Open'
},
{
Text: 'save'
},
'-> ',
'<A href = "#"> link </a> ',
'Text'
);
});
</SCRIPT>
</Head>
<Body>
<Div id = 'toolbar'> </div>
</Body>
4. The most common forms
1) Ext. Form. Basic Forms provide functions such as field management, data verification, form submission, and data loading.
2) understand that the Ext. Form. Panel form panel is the container of form items. The Anchor layout is used by default.
Ext. Form. panel differs from traditional form submission methods, form verification, and form component support:
(1) The original form submission method is synchronous, and the Panel uses asynchronous
(2) Support for Form Verification extjs support for JavaScript Verification
(3) Support for form components Panel supports advanced components encapsulated by ext
Example 1:
<SCRIPT type = "text/JavaScript">
Ext. onready (function (){
Ext. quicktips. INIT ();
VaR form = new Ext. Form. Panel ({
Title: 'myform ',
Height: 120,
Width: 200,
Frame: True,
Renderto: 'form ',
Defaults :{
Labelwidth: 50,
Width: 150,
Labelalign: 'left ',
Allowblank: false,
Blanktext: 'will not null ',
Msgtarget: 'qtip'
},
Items :[{
Xtype: 'textfield ',
Fieldlabel: 'name'
},
{
Xtype: 'numberfield ',
Fieldlabel: 'age'
}]
});
});
</SCRIPT>
</Head>
<Body>
<Div id = 'form'> </div>
</Body>
5. Panel and Layout
1) Ext. Panel. Panel consists of the bottom toolbar, top toolbar, panel header, bottom panel, and Panel body.
The most important function and function of the Panel is to display content from different sources. extjs provides four different display methods:
1) using the autoload configuration item to load remote pages for the Panel is to remotely load HTML files.
2) use the contentel configuration item to load the HTML code on the current page for the local resources on the panel
3) Use HTML configuration items to customize the panel content and write your own HTML code
4) use the items configuration item to add components to the Panel
2) the standard layout mainly includes the following 11 types:
Auto (Automatic Layout) checkboxgroup (checkbox group layout) fit (Adaptive Layout) Column (column layout)
Accordion (fold layout) table (table layout) Card (card layout) border (border layout)
Anchor (Anchor) box (Box layout) absolute (absolute position layout)
(1) Auto auto layout is used by default, and child elements are laid out using the original HTML document stream.
(2) fit Adaptive Layout fills the unique sub-elements with containers
(3) accordion folding layout only one sub-panel is open, and the rest are shrunk.
(4) card layout multiple sub-panels. Only one sub-panel is in the open state, and other calls must be called to display the sub-panels.
(5) anchor.
(6) absolute positioning of absolute can be performed based on the position of the panel and X/Y coordinates.
(7) checkboxgroup check box group Layout
(8) column layout multi-Column Layout
(9) You can create complex table la s for table la S.
(10) The border layout of the border divides the entire container into five parts: Southeast and northwest.
(11) Box box Layout
In Ext, all la s start with Ext. container.
3) Use viewport
Viewport represents the display area of the entire browser window. Using document. body as the rendering object, it automatically adjusts its size according to the browser window size. Only one viewport instance can appear on each page.
6. Ext events and Classes
There are two types: Custom events and browser events.
Custom events: all controls inherited from the Ext. util. observable class support events. You can define events for these objects and configure listeners for these events. When an event is triggered, ext automatically calls the corresponding listener.
Browser events: events such as mouse clicking and moving in the traditional sense.
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
