ExtJS4.2.1

ExtJS4.2.1

1. Introduction 1.1 Description

ExtJS is a front-end Ajax framework that is primarily used to create RIA-rich clients, which are not related to background technology, using JavaScript, CSS, and HTML techniques.

Commonly used in enterprise internal management systems, administrative systems and other SAP types of applications.

1.2 Features

1) provides a very large number of rich, powerful components.

2) for the development of the component, the development of the DOM is different from that of jquery.

3) Cross-browser support: IE, Chrome, Firefox, Safari, Opera.

4) The frame is bulky and suitable for writing intranet projects. (The ext-all.js size of the ExtJS4.2.1 is 1.46M)

1.3 Use Agreement

ExtJS offers 2 types of use agreements: GPL3.0 (free) and commercial agreements (paid).

1.4 MVC Pattern

ExtJS is a framework for an MVC pattern (with the MVVM pattern added in ExtJS 5).

MVC, called Model-view-controller, a model-view-controller, is an architectural pattern used to write software. It divides the software system into three basic parts: model, view, and controller. This mode makes the program structure more intuitive by simplifying the complexity.

ExtJS 4 features defined for each section:

model : The data that is used to encapsulate the business logic of the application and how the data is processed. A collection of data fields that can be linked to other models through an association and linked to a data stream through a proxy.

View : represents the data to the user. Any type of component that outputs information to a browser, such as a form, Grid, Chart.

Controller : is the logical part of an MVC application. It handles the event and responds. The "event" includes the user's behavior and changes on the data Model. The Ext.app.Controller is the base class for the controller.

Citation Source: Http://www.extjs-tutorial.com/extjs/extjs-4-mvc-architecture

2. Resource 2.1 Resource Address

This is described in ExtJS 4.2.1 as a version.

official GPL version download:http://cdn.sencha.com/ext/gpl/ext-4.2.1-gpl.zip

Official API:HTTP://DOCS.SENCHA.COM/EXTJS/4.2.1/#!/API

Official Example:http://docs.sencha.com/extjs/4.2.1/#!/example

Chinese API (4.1.0 version):http://extjs-doc-cn.github.io/ext4api/

4.2.1 CDN:http://www.bootcdn.cn/extjs/4.2.1/

2.2 Resource Directory Description

Http://cdn.sencha.com/ext/gpl/ext-4.2.1-gpl.zip after decompression:

2.2.1 Directory

builds : ExtJS compressed code, compressed code volume is smaller, loading faster.

docs : ExtJS's documentation directory, index.html can view ExtJS APIs, Guides, Examples.

Examples : Demo directory, index.html can see the demo list.

locale : Multilingual resource Directory, where Ext-lang-zh_cn.js is Simplified Chinese (this file omits the Radiogroup required hint).

pkgs : ExtJS Part of the functionality of the package file. such as: Subject.

plugins : The plugin directory required by ExtJS. such as: Flash.

Resources: ExtJS The styles and pictures used. Includes 4 themes: Classic (Classics: default for this theme), Access (steady/Black), gray (Gray), Neptune (Neptune).

src : Source code for each component.

Welcome : Access page directory.

2.2.2 File

bootstrap.js : Boot file that automatically loads Ext-all.js or ext-all-dev.js files according to the current operating environment.

ext.js : Compressed JS code, basic framework, dynamic load extension class.

ext-all.js : Compressed JS code, including ExtJS entire frame.

ext-all-debug.js : Uncompressed JS code, including ExtJS entire frame.

ext-debug.js : Uncompressed JS code, basic framework, dynamic load extension class.

ext-all-rtl-debug.js : Uncompressed JS code, including ExtJS the entire frame and supports reading from right to left.

ext-all-rtl-sandbox-debug.js : Uncompressed JS code, including ExtJS entire framework, support for right-to-left reading, and support for sandboxed use of other versions of ExtJS.

ext-all-rtl-sandbox.js : Compressed JS code, including ExtJS entire framework, support right-to-left reading, and support for sandboxed use of other versions of ExtJS.

ext-all-rtl.js : Compressed JS code, including ExtJS the entire frame and support reading from right to left.

ext-all-sandbox-debug.js : Uncompressed JS code, including ExtJS the entire framework and supporting the use of other versions of ExtJS in a sandboxed manner.

ext-all-sandbox.js : The JS code has been compressed, including ExtJS the entire framework and supporting the use of other versions of ExtJS in a sandboxed manner.

2.3 docs/index.html

The Docs/index.html page allows you to view ExtJS APIs, Guides, Videos, Examples.

API : introduces all APIs of ExtJS framework, including: components, tools, ExtJS core, etc.

Guides : Introduction of ExtJS's overview, concepts, components, guidelines, and other aspects of knowledge.

Videos : introduce ExtJS all aspects through video.

Examples : ExtJS each component of the demo.

API and examples data have been met for daily development needs, if you want to ExtJS framework in-depth understanding can see guides aspects of the information.

3. Operation diagram

Run diagram showing 4 themes

Classic: This theme by default, Access (steady/Black), gray (Gray), Neptune (Neptune).

3.1 Classic Theme

3.2 Access sedate/black theme

3.3 Gray Grey Theme

3.4 Neptune Neptune Theme

================================== Series Article ==========================================

This article: 7.1 ExtJS Introduction

Web Development Road Series articles

1.HTML

1.1 HTML page source code layout Introduction

1.2 HTML Base Control Introduction

The difference between 1.3 iframe and frameset

1.4 The difference between name, ID, class

1.5 table, form label introduction, and get and post submission methods

1.6 HTML KBD Keyboard elements

2.CSS Cascading Style Sheets

2.1 CSS selectors and how to refer to each style

2.2 CSS HTML element layout and Display Properties

2.3 CSS Float Float Property

2.4 CSS Position Positioning properties

3.JavaScript Introduction

3.1 JavaScript var keyword, the state of the variable, exception handling, naming specification and other introduction

3.2 JavaScript function functions type

3.3 JavaScript Array Object

3.4 JavaScript Date Object

3.5 JavaScript Math and number objects

3.6 JavaScript String Object

3.7 JavaScript Object Objects

3.8 JavaScript Custom Objects

3.9 JavaScript Object Properties Introduction

3.10 JavaScript Development Specification

4.BOM

4.1 HTML BOM Browser Object

4.2 HTML Gets the height width of the screen, browser, page

5.DOM

5.1 HTML DOM Introduction

5.2 HTML DOM Object

5.3 An introduction to the HTML event (i) event

5.4 HTML Event (ii) registration and logoff of events

5.5 HTML Event (iii) event flow and event delegation

5.6 HTML Event (quad) analog event operation

6.html5

6.1 HTML5 Introduction

6.2 HTML5 Semantic Element (i) page structure

6.3 HTML5 semantic Element (ii) text content

6.4 HTML5 INPUT Element new features

6.5 HTML5 Progress and meter controls

6.6 HTML5 Sessionstorage Session Store

6.7 HTML5 Localstorage Local Storage

7.ExtJS 4.2

7.1 ExtJS Introduction

It's just a record of what I learned and encountered when I was learning and using Web front-end content.

Reference documents:

1) http://www.w3school.com.cn/

2) "JavaScript authoritative Guide (sixth edition)"

Category: ExtJS 4.2

ExtJS4.2.1