Document directory
- Preparations
- Hello World
- Portal
09:10:30 Source: OSCHINA Author:
This tutorial tells you how to start developing programs based on Sencha Ext JS 4 and provides complete tutorial source code and three high-definition video explanations.
This tutorial tells you how to start developing programs based on Sencha Ext JS 4 and provides complete tutorial source code and three high-definition video explanations.
Preparations
You do not need to install the development environment for Sencha separately. You only need a Web browser, a Web server, and a text editor. I am using a Mac machine and a Chrome browser. Using the Mac Web server and the Komodo editor, you can get instructions on how to install the environment from the Sencha Getting Started link.
Hello World
When learning a new language or technology, we usually write a Hello World Program to quickly understand the language development work. In this example, we add something on the basis of Hello world. We add a Viewport component, Sencha classpathing, a custom superclass and so on, and a mixin class instance.
Project output result
As shown in the following figure, Sencha also provides Sencha Touch, which is used to build applications on smart phones, but today we mainly talk about Ext JS for the desktop version.
Debugging: In the chrome window, you can see the output of Sencha Ext JS through Chrome's built-in Developer Tools (Built-In View-> Developer's Tools:
In Chrome on Mac
In iOS (Via Emulator)
Portal
You can see that index.html loads three external files.
<Html>
<Head>
<Title> Hello World </title>
<! -- STYLES -->
<Link rel = "stylesheet" type = "text/css" href = "./libs/resources/css/ext-all.css">
<! -- LIBS -->
<Script type = "text/javascript" src = "./libs/ext-all-debug.js"> </script>
<! -- APP -->
<Script type = "text/javascript" src = "./app. js"> </script>
</Head>
<Body> </body>
</Html>
Style
I used the default CSS found in some basic tutorials without any edits.
ExtJS library files
There are also some other options with unique advantages.
As follows:
- Ext-all-debug-w-comments.js-debug version of the entire framework, containing comments, which is large and occupies more processor Resources
- Ext-all-debug.js-the same as the above file, but missing comments, is large but easier to debug.
- Ext-all.js-contains the entire framework with minimal processing, debugging not supported, no annotations, please use this file in the product environment.
- Ext-debug.js-this file provides the best debugging experience, but is also the slowest.
- Ext. js-version of ext-debug.js after compression processing
App
App. js files are the entry to your custom code. You can place your custom code in the src and assets folders. In my custom code, I showed some interesting things:
Components
I have not studied the Sencha Component Library in depth, but there are many nice-looking components, including: Accessibility, Grids, Charts, Tabs, Windows, Trees, Layout, Managers, Drawing, drag and Drop, Toolbars, Menus, ComboBox, DataView, Forms, MVC, etc. Here is a simple example of ViewPort:
TestSomeUI: function (){
Ext. create ('ext. container. viewport ',{
Name: "viewPort2 ",
Layout: 'fit ',
Items :[
{
Title: 'My viewport ',
Html: 'Hello World! '
}
]
});
},
Classpathing
Sencha provides a good way to separate code into separate classes and store classes in packages. The root of all packages is the source code root path. Classes/packages can help you organize and debug (you can clearly display the problem at the breakpoint location)
First, I specified one or more classpaths:
Ext. Loader. setConfig ({
Enabled: true,
Paths :{
Com: "src/com"
}
});
Load and use a class in the main app:
// SUPER CLASS
Var myBeer = Ext. create ('com. rmc. projects. helloworld. beer', 'budweiser ');
Console. log ("myBeer. brandName:" + myBeer. brandName );
Console. log (myBeer. drink ());
// CHILD CLASS
Var myLightBeer = Ext. create ('com. rmc. projects. helloworld. LightBeer ', 'budlight ');
Console. log ("myLightBeer. brandName:" + myLightBeer. brandName );
Console. log (myLightBeer. drink ());
// MIXIN
// Because of 'mixincheers. js' we can call 'cheers ()'
MyLightBeer. cheers ();
I have read the document and know that this is called the "dynamic loading" class, which can be loaded as needed. Because JavaScript native does not support object-oriented development, it works well in Sencha:
Here is a superclass:
Ext. define ('com. rmc. projects. helloworld. beer ',{
//--------------------------------------
// Properties
//--------------------------------------
BrandName: 'unknown ',
Calories: 0,
//--------------------------------------
// Constructor
//--------------------------------------
Constructor: function (brandName ){
// SUPER
// EVENTS
// VARIABLES
// PROPERTIES
This. calories = 200;
If (brandName ){
This. brandName = brandName;
}
// METHODS
// RETURN
Return this;
},
//--------------------------------------
// Methods
//--------------------------------------
Drink: function (){
Return "The beer '" + this. brandName + "'Was drank. Calories:" + this. calories;
}
});
Then there is a class that extends the superclass:
Ext. define ('com. rmc. projects. helloworld. LightBeer ',{
//--------------------------------------
// Properties
//--------------------------------------
Extend: "com. rmc. projects. helloworld. Beer ",
Mixins :{
Ch: 'com. rmc. projects. helloworld. mixincheers'
},
//--------------------------------------
// Constructor
//--------------------------------------
Constructor: function (brandName ){
// SUPER
This. superclass. constructor. apply (this, [brandName]);
// EVENTS
// VARIABLES
// PROPERTIES
This. calories = 100;
// METHODS
// RETURN
Return this;
},
//--------------------------------------
// Methods
//--------------------------------------
});
Here is a mixin class, which is used in the subclass:
Ext. define ('com. rmc. projects. helloworld. mixincheers ',{
//--------------------------------------
// Properties
//--------------------------------------
//--------------------------------------
// Constructor
//--------------------------------------
//--------------------------------------
// Methods
//--------------------------------------
Cheers: function (){
Console. log ("Cheers! ");
},
});
Ext js mvc Template
If you like the Hello world example above, there are some more advanced things here. I was inspired by Robotlegs MVC Templates (this is my project for AS3/Flex). Today we use the same idea to create an Ext JS MVC template.
The purpose of the template is to create a simple, empty MVC application, which can be used as a benchmark for your new Ext JS project. MVC is a widely used design mode for web development. The application here provides a simple UI that contains the load and clear buttons. The load button loads data from the model and displays the data in the view, this is a simple example, but it is sufficient to demonstrate some key concepts in Sencha Ext JS.
Figure 1
Figure 2
Conclusion
I'm glad to have something like Sencha Ext JS. This framework adds more powerful functions to JavaScript, and its style system is also very flexible and reliable, and the components look great.