Ext js 4: helloworld

Original article: http://www.sencha.com/blog/helloworld-with-ext-js-4/

This tutorial will help you learn how to use sencha ext JS 4. Complete source code and 3 HD videos are attached at the end of the article.

Before getting started

In this tutorial, You need to configure the development environment for sencha, including a browser, Web server, and text editing tool (or code IDE ). I am using the Chrome browser, Mac Web server, and Komodo editor. Install these tools in sencha's getting started documentation.

Application Development-helloworld

Generally, the hello World Program is the fastest way to do a demo (such as text) without errors on the screen or on the release (or compilation. In this article, we will add some things, such as the sencha component (viewport) and sencha class path (SRC), custom super class, custom subclass, and a mixed class example (similar to multi-inheritance ).

Project Effect

The following is the effect of the application example after running. One is the effect of the desktop browser and the other is the effect of IOS (through the apple IOS simulator. Sencha also provides sencha touch for mobile development, but today's focus is on the desktop framework-ext Js.

Debugging: Obviously, chrome comes with the developer tool (menu: View-> developer tool) at the bottom of the Chrome Window, and ext JS works well.

Project file structure

Although there is an optional recommended file structure in the sencha getting started document, this example uses the following structure:

Entry Point

Three external files are loaded in index.html:

Style File
In this example, the default style of ext JS is used, and no style is added or deleted.
Library files
There are several ext JS files to choose from. You can use only one of them after balancing the application characteristics.
The description of each file is as follows:

 

 
  
Ext-all-debug-w-comments.js: The annotated debugging version of the entire framework. This is the largest file. The browser needs to spend more time loading and displaying.
 
  
Ext-all-debug.js: The file function is the same as the above, but there is no comment. Files are large, but they are suitable for use in the development and debugging phase.
 
  
Ext-all.js: The Synthesis and compression versions of the entire framework. This file is not suitable for debugging and is only used for system release.
 
  
Ext-debug.js: This file only contains the basic architecture of ext Js. With this file, you can use ext js to remotely load as needed, providing the best debugging experience. However, we need to weigh the performance.
 
  
Ext. js: The compression version of The ext-debug.js.

 
Application Files


The app. js file is the starting point for custom code. The custom code can also be placed in the SRC folder and assets folder. There are some amazing things in custom code.
Components
The sencha component library is not discussed in depth in the example, although it has many nice-looking components. These components are easy to use, such as grid, chart, label, window, tree, layout management, drawing, drag-and-drop, toolbar, to you, drop-down list box, data view, form, MVC, etc. The example uses the simplest viewport component (basically a 100% * 100% canvas where a panel or something else can be placed ).

testSomeUI: function() {    Ext.create('Ext.container.Viewport', {        name : "viewPort2",        layout: 'fit',        items: [            {                title: 'My Viewport',                html : 'Hello World!'            }        ]    });},
Class path
Sencha has a good way to classify code and package classes. The root directory of the package is the source folder (or the classpath used by Adobe Flex ). Classes/packages are helpful for combination and debugging (breakpoints and errors will clearly show the error ).
First, define one or more class paths:

Ext.Loader.setConfig({    enabled : true,    paths   : {        com : "src/com"    }});
Then load or use the class in the main app:
// SUPER CLASSvar myBeer = Ext.create('com.rmc.projects.helloworld.Beer', 'Budweiser');      console.log ("myBeer.brandName: " + myBeer.brandName );console.log (myBeer.drink()); // CHILD CLASSvar 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();
In the read article, this processing is called "dynamic loading" class. From the flex perspective, it is very powerful, just like using Flex. Class can be loaded as needed and run in the program. Javascript itself does not support OOP development, and all HTML5 frameworks require developers to use some framework conventions that mimic oop. In this regard, sencha ext JS is doing quite well.
The following is the superclass code:

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;    } });
The Child class is derived from 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    // --------------------------------------  });
The following is the mixed class code used for subclass:
Ext.define('com.rmc.projects.helloworld.MixinCheers', {     // --------------------------------------    // Properties    // --------------------------------------     // --------------------------------------    // Constructor    // --------------------------------------     // --------------------------------------    // Methods    // --------------------------------------    cheers: function() {        console.log ("Cheers!");    },  });
Ext js mvc Template
If you like the above "Hello World" example, there are better things below. An ext js mvc template is created using the kernel created by the as3/flex project in "robotlegs MVC templates.
Creating (or evolving) a template for this simple MVC application example is a flash of light. In this way, it can be used as the starting point of all MVC projects. MVC is a popular method for separating models (data), books (for interfaces), and controllers (what to do when you click the user interface ). The application has a simple yield interface, including the "LOAD" and "clear" buttons. The Load button () in the view notifies the Controller to load data from the model to the view. The clear operation works similarly (figure 2 ). This is a basic application that demonstrates the key concepts of sencha ext Js.

Figure 1

Figure 2
Summary
I am very happy to see ext Js of sencha. It is added to the Javascript framework in a great way, the style system is very flexible and powerful, and the component view is very good.
Resources


 

 
  
Installation & setup on Vimeo
 
  
Hello world on Vimeo
 
  
Extjsmvctemplate on Vimeo
 
  
Source

 

  Author:
 Samuel Asher rivello
 
Samuel Asher rivello is the principal of rivello multimedia Consulting (RMC), which offers services including software architecture, consulting, development and training. sam has 12 years experience with the Flash Platform. he is an Adobe Flex champion whose skills and experience transfer well to HTML5 based frameworks such as sencha.