EXTJS4 Basic Concept Summary

ext.applicationrepresents an entry point for an application that ExtJS a rich client. A new concept has been proposed from Ext4.0: Ext MVC application Architecture.
This concept is designed to help developers organize an efficient, stable ext front end at the fastest speed. The file script that defines ext.application is generally named
App.js. Load this file into index.html. The App.js file works as follows:

1. Specifies that the EXT framework class loads the path strength
2. Defining a global namespace
3. Define auto-Create VIEW properties
4. List Controller

app.js in the HTML file, the first load out of the app/view/directory under the Viewport.js, by this file to load the other views of the reference, in the list of controllers, to specify clearly the Controller folder script file path strength, such as Somnus. Usercontroller. The sample code is as follows

<span style= "Font-family:courier new;font-size:14px;" >//ExtJS Program Entry Extroot = app.basepath+ "/jslib/ext-4.2.1";//Configure Dynamic load path Ext.Loader.setConfig ({enabled:true,paths: {') Ext.ux ': Extroot + '/ux ', ' somnus ': app.basepath+ '/app '}}); Ext.onready (function () {ext.application ({name: ' Somnus '),//Define a global namespace Somnusappfolder: ' app ', Autocreateviewport: True,controllers: [],launch:function () {}});}); </span>

Ext.define () built-in 3 parameters, including class name (ClassName), Object data logic and methods, and callback functions. The
Ext.define () and Ext.extend () methods are all used for custom classes, but it is no longer recommended to use extend () from 4.0 onwards.
Full style: Ext.define (String classname,object data,[function fn])
The second parameter here is an object that specifies a property for the newly created class that can specify any legitimate property.
For example:

1. Self: references the current class itself
2. Alias: Defining Class Aliases
3. Config: Used to specify configuration options for this class, ExtJS automatically adds setter methods and getter methods to the options specified by config
4. Extend: Used to specify the parent class for which the class inherits
5. STATICSL used to define static methods and properties for this class
6. Mixins: Used to list all classes to be mixed
7. Override: Define the class to overwrite
8. Requires: Classes that must be preloaded before the instantiation is listed
9. Singleton: If this property is true, then this class is a singleton
10. Uses: Used to list classes that must be used concurrently with the class

The combination attribute of ext-mixinsA combination is a new feature of EXTJS4 that can be used to implement multiple inheritance. This property loads the class file synchronously and instantiates the class
Basic usage:

Ext.define (' Myclass.a ', {showa:function () {console.log (' A ');}}); Ext.define (' myclass.b ', {showb:function () {console.log (' B ');}}); Ext.define (' myclass.c ', {mixins:[' myclass.a ', ' myclass.b ']showc:function () {console.log (' C ');}}); var c = ext.create (' myclass.c '); C.showa (); C.showb (); C.SHOWC ();

ext.create ()Used to create an object. The syntax format is: var aa =ext.create (String name,object args);
Parameter 1 specifies the class name of the object to be created, and parameter 2 is an object that is used to pass in the constructed parameter values (also known as configuration options) to the newly generated object.
You can specify options for the Config property to pass in parameter values). The reference code is as follows:

<span style= "Font-family:courier new;font-size:14px;" >ext.define (' Somnus. User ', {remark: ', Config:{username: ' AA ', password: ' 123456 '},constructor:function (CFG) {this.initconfig (CFG)}}); var user = Ext.create (' Somnus. User ', {username: ' BB ', Password: ' 123456 ' remark: ' xxxx '}, Console.log (User.remark); Console.log (User.getusername ()) ; Console.log (User.getpassword ());</span>

Ext.Class.aliasThe Alias property is used as an alias for this class. This means that it is the second name of the class. Its role is when you define this class
Use very frequently, and the class name is longer, instead of the way this object is created.
var a = ext.cteate (' AM.view.user.List ');
The way to create an object with alias is this: Ext.widget (' userlist ');

Ext.define (' Myapp.coolpanel ', {extend: ' Ext.panel.Panel ', alias:[' Widget.coolpanel '],title: ' Yeah '}); Ext.create (' Widget.coolpanel '); Ext.widget (' Coolpanel ');

Ext.abstractcompent-->xtypeThis property provides a short way to create objects, relative to the way they are created with the full name of the class. Using Xtype definitions
Component Component instances are very extensive in the Ext interface program design, most typically when you define a container container.
For example, the two ways to create a form text field are as follows:

items:[       ext.create (' Ext.form.filed.Text ', {       filedlabel: ' Foo1 '       }),       ext.create (' Ext.form.filed.Text ', {       filedlabel: ' Foo2 '       },       ext.create (' Ext.form.filed.Text ', {       Filedlabel: ') Foo3 '       })]//above was created to xtypeitems:[       {       xtype: ' TextField ',       filedlabel: ' foo1 '       },{       Xtype: ' TextField ',       filedlabel: ' Foo2 '       },{       xtype: ' TextField ',       filedlabel: ' Foo3 '       }]

EXTJS4 Basic Concept Summary