Sencha Ext JS 4 Development tutorial

Source: Internet
Author: User
Tags mac web server
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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.