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.
PreparationsYou 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 WorldWhen 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 resultAs 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)
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>
I used the default CSS found in some basic tutorials without any edits.
ExtJS library filesThere are also some other options with unique advantages.
As follows:
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:
ComponentsI 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! '
}
]
});
},
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! ");
},
});
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
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.
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
