1. Foreword
ExtJS is the predecessor of Yui (Yahoo User Interface). Through continuous development and improvement, ExtJS has now successfully released the ExtJS 6 version, is one of the most complete and mature JavaScript base library, the use of ExtJS built Web applications with the same standard user interface and operation of desktop programs, And can be used across different browser platforms.
With the current market trends, users are now demanding more and more experience. The emergence of many excellent foreground javascript frameworks, such as prototype, JQuery, ExtJS, and so on, ExtJS is undoubtedly one of the best solutions. It can help developers quickly achieve good user interface development, plus ExtJS is open source, so the vitality of ExtJS is very strong, as web developers, we need to master this excellent technology to help us develop.
2.ExtJS Development Package
The first step to starting the Ext trip is to get the development kit, which we can download from the official website: http://www.sencha.com/products/extjs/download
Package Structure Description:
Builds directory for ExtJS compressed code
Documents with Docs directory as ExtJS
An official demo sample in the examples directory
Locale is a multilingual resource file, where Ext-lang-zh_cn.js is simplified Chinese
Overview is an overview of ExtJS features
Packages is a packaged file that ExtJS the functions of each part
Resource ExtJS to use the picture file and the style sheet file
SRC directory is uncompressed source code
Bootstrap.js is the ExtJS library's boot file, which automatically switches ext-all.js and ext-debug.js via parameters
The Ext-all.js file is the core library of ExtJS, and it must be introduced.
The Ext-all-debug.js file is a debug version of-all.extjs and may need to be used when debugging
spket-1.6.23 Plugin Download
3.EXT Framework Basics 3.1 Unified Component Model
Although Ext has almost perfect object inheritance model, but this is part of the underlying architecture, we are most exposed to various components and layouts in our daily development.
3.1.1 Ext.component
All of the visual components in ext inherit from Ext.component, a single inherited model that ensures that all components have the same common method and lifecycle, as well as the convenience of layout
Several features commonly used by components include initcomponent(),render(),Show () and hide(),destroy () regardless of which component, all are initialized, rendered, displayed, hidden to achieve the lifecycle
The base class of all EXT components, all the subclasses under the component may participate in the life cycle of the automation Ext component to create, render and destroy are provided by the container container class, the component can configure items to be created through the container, or you can create by dynamic method add 3.1.2 Ext.container
Ext.container inherits Ext.component, which provides two important parameters,layout and items, layout parameters specify what layout the current component uses, the items parameter (data type) Contains all the subcomponents in the current assembly. An important concept that has to be mentioned here is xtype, which simplifies the initialization of components in configuration and delay layouts, and we add several components to the layout, and the original approach is to create these components first and then add them to the layout container
Using the Xtype method will be more simple, we just need to focus on the corresponding configuration on the line,
Case:
New Ext.viewport ({
Layout: ' Border ',
items:[
{xtype: ' Panel ' region: ' North '},
{xtype: ' Panel ' region: ' South '},
{xtype: ' Panel ' region: ' West '},
{xtype: ' Panel ' region: ' East '},
{xtype: ' Panel ' region: ' Center '},
]
})
For those that do not have the xtype attribute set, ext defaults to use Ext.panel,
If you want to make a component that can be laid out for the subassemblies that you include, inherit Ext.container, which is a superclass of all the configurable components.
here is a list of all valid Xtypes
Xtype Class-------------------------------
Button Ext.button.Button
Buttongroup Ext.container.ButtonGroup
ColorPalette Ext.picker.Color
Component Ext.component
Container Ext.container.Container
Cycle Ext.button.Cycle
DataView Ext.view.View
DatePicker Ext.picker.Date
Editor Ext.editor
Editorgrid Ext.grid.plugin.Editing
Grid Ext.grid.Panel
Multislider Ext.slider.Multi
Panel Ext.panel.Panel
ProgressBar Ext.progressbar
Slider Ext.slider.Single
SplitButton Ext.button.Split
TabPanel Ext.tab.Panel
Treepanel Ext.tree.Panel
Viewport Ext.container.Viewport
Window Ext.window.Window
Toolbar Components-------------------------------
Pagingtoolbar Ext.toolbar.Paging
Toolbar Ext.toolbar.Toolbar
Tbfill Ext.toolbar.Fill
Tbitem Ext.toolbar.Item
Tbseparator Ext.toolbar.Separator
Tbspacer Ext.toolbar.Spacer
Tbtext Ext.toolbar.TextItem
Menu Components---------------------------------------
Menu Ext.menu.Menu
Menucheckitem Ext.menu.CheckItem
MenuItem Ext.menu.Item
Menuseparator Ext.menu.Separator
Menutextitem Ext.menu.Item
Form Components---------------------------------------
Form Ext.form.Panel
CheckBox Ext.form.field.Checkbox
Combo Ext.form.field.ComboBox
Datefield Ext.form.field.Date
Displayfield Ext.form.field.Display
Field Ext.form.field.Base
FieldSet Ext.form.FieldSet
Hidden Ext.form.field.Hidden
HTMLEditor Ext.form.field.HtmlEditor
Label Ext.form.Label
Numberfield Ext.form.field.Number
Radio Ext.form.field.Radio
Radiogroup Ext.form.RadioGroup
TextArea Ext.form.field.TextArea
TextField Ext.form.field.Text
Timefield Ext.form.field.Time
Trigger Ext.form.field.Trigger
Chart Components---------------------------------------
Chart Ext.chart.Chart
Barchart Ext.chart.series.Bar
Columnchart Ext.chart.series.Column
Linechart Ext.chart.series.Line
Piechart Ext.chart.series.Pie
3.2 Perfect event mechanism
in Ext, time is divided into two types, custom events and browser events, all controls that inherit the Ext.util.observable class can support events, then define events for these inherited observable objects, and then configure listeners for those events. When an event is triggered, ext will automatically call the corresponding listener, this is Ext's event model, code listing 3.2.1 Custom events
Person=function (name) {
This.name=name;
This.addevents ("Walk", "eat", "sleep");
}
Ext.extend (person,ext.util.observable,{
Info:function (event) {
Return this.name
}
})
The above code implements a class named person, or it can be used (ext.define definition) He has a Name property, the Addevents () function is initialized to define three events, Walk,eat,sleep, and then use Extend () The function allows person to inherit all the attributes of ext.util.Observable, plus the info () function, which allows him to return the information
var person =new person ();
Person.on ("Walk", function () {
Ext.Msg.alert (' event ', person.name+ "walking and Walking")
...
})
here on () is the short form of AddListener (), which adds an event listener to the object, the first parameter passing the event name, and the second parameter is the function when the event occurs events frequently used in 3.2.2 development
ItemClick: The Click event of the option is triggered when the option is clicked.
BeforeExpand: Triggered before the panel is expanded. The listener can return false to cancel the expansion operation.
Beforeload: This event is triggered before a new data object request is issued
........
Extensions:
the difference between handler and listener
ExtJS handler and listener are used to deal with some of the user's input, it is necessary to distinguish between how they are used.
1, handler is a special listener; A configuration item that is commonly used for buttons.
2, handler is a function, and listener is <event, function > pair; You can configure multiple events to facilitate the management of event; 3.3 Development Mode overall understanding of the MVC Framework
1, each application has an entity, is the Application object, and each application also uses a single entry structure, there is a shortcut function is ext.application ({config}), create a Application object instance, and run it. Application will load the controller class at the beginning of the creation
2,application in lunch, will create a viewport instance, this thing is like a skeleton, the above can assemble a variety of view, specifically, is a variety of layout forms and form control, can be said that the view interface of the carrier, A page can have only one viewport instance.
3,view is purely an interface component, or a collection of form controls (such as Form,grid and Windows). It is actually using the form control panel,grid or form, etc. to display the user interface, the table can use the Ext.grid.GridPanel GetView () function to get the current table using the view instance, When we want to initialize some parameters in the GridView to create the Ext.grid.GridPanel viewconfig parameters, the specific properties can view the API.
Through the store to load data and display to the interface, the interface control response is written in controller, view of the existence of controller is not known, there is no code dependencies.
4,controller's role is entirely a binder, which, at the beginning of loading, helps to load the Model,store,view class associated with it, and its real function is through a series of event-handling functions (such as clicking the Save button), The response method of each view interface component to user interaction behavior is determined, which can be described as a collection of event handler functions. This is mainly through a control member function for event binding, through another component called Componentquery, using a similar CSS Selector syntax to locate the component on the interface and bind the event handler for it.
5,model is the materialization of abstract data, a simple understanding is a row of records within a database.
6,store is an abstraction of the process of loading data over the network, where the store relies on model for data-sending requests (typically AJAX requests) to the back-end (typically in JSON format), The associated model object knows how to object the retrieved data.
Whether it's grid (table), Tree, form (form) can be formatted by the Model field, so you can convert the background field to the field that ext want, and sometimes need to use the Mapping property 3.4 Application initialization and page layout 3.4.1 Enable dynamic loading via Ext.loader
One of the highlights of the ext4.x version is the ext.loader dynamic loading mechanism for this class. As long as follow the path specification, you can dynamically load JS files, to facilitate the dynamic loading of their own extension components, and reduce the pressure of the browser
Through the loader object we can open the dynamic load dependent loading function, we generally through its Setconfig method to open dynamic loading, through the SetPath set load path, and then through the Ext.require method to load the related class library. The code is as follows.
/**
Turn on dynamically loaded dependency loading and set the path of the plug-in, and load the related class library
**/
Ext.Loader.setConfig ({enabled:true});//Turn on dynamic load dependent load, default to False not open
Ext.Loader.setPath (' Ext.ux ', '/scripts/ux ');//Set the path of the namespace "Ext.ux"
Ext.require ([' Ext.ux.CheckColumn ',//loading related class libraries and its direct dependencies
' Ext.ux.grid.FiltersFeature ',
' Ext.ux.RowExpander ',
' Ext.ux.grid.SPrint ']); 3.4.2 class creation and inheritance
ways to define classes: Define
For the ext4.x version, the define of the new definition class is used
