[Study Notes] Welcome to extjs

[Study Notes] Welcome to extjs

Address:

Author: sushengmiyan

Http://docs.sencha.com/extjs/5.0.0/getting_started/welcome_to_extjs.html

This Guide provides a simple ext js introduction. We will start from the discussion to build a simple hello world example. We will go on to explain the code structure in extjs. This Guide will also include links to other resources that can be used. Therefore, you should try to read more to improve your understanding of ext.

 

Helloworld

--------------

To experience ext js 5 is very simple, we first create a folder, put the ext5 package into (: http://download.csdn.net/detail/sushengmiyan/7701943), and then create a simple html file, create the following directory structure,

The content of index.html is as follows:

 

<Script type = text/javascript src = ext-5.0.0/build/ext-all.js> </script> <script type = text/javascript src = ext-5.0.0/build/packages/ext-theme-neptune/ build/ext-theme-neptune.js> </script> <script type = text/javascript src = app. js> </script>
For example, jQuery or AngularJS contains html declaration tags, but ext js is not like this. You only need to write in our internal class auxiliary system and js. You can see an example of the following structure:

 

 

Ext.create('Ext.Panel', {     renderTo     : Ext.getBody(),     width        : 200,     height       : 150,     bodyPadding  : 5,     title        : 'Hello World',     html         : 'Hello World...' });

Now, the description code is embedded in your app.js file, and you can create and paste app. js content in the same directory as index.html.

 

If you refresh the page, you may not be able to see the running result because the framework is not fully loaded yet. This is why we need to add the launch () function to the application. This function is called when the page preparation is complete.

Now, replace app. js with the following content:

 

Ext.application({name: ExtJSTest,launch: function(){      Ext.create('Ext.Panel', {        renderTo     : Ext.getBody(),        width        : 200,        height       : 150,        bodyPadding  : 5,        title        : 'Hello World',        html         : 'Hello World...'    });  }});

An error is prompted when running IE8, but the following result is displayed in chrom:

 

This example shows how simple ext js 5 is. From here, the sky is your limit. You can explore many functions of ext js 5. By studying our examples, they provide a great introduction to the Framework toolbox capabilities.

Ext-all.js

----------

In index.html, ext-all.jsand ext-them-neptune.css are completely included. This is suitable for our exercises, but it is not suitable when you want to release applications using only the framework. You can simplify your framework based on your engineering needs.

You can refer to the getting started guide to learn more about extjs5 and sencha cmd in this regard.

Continue to read about the core of extjs5.

 

What is extjs?

---------------

Ext JS 5 is a JavaScript application framework that provides you with a complete set of tools for creating cross-platform applications. Ext JS 5 supports all modern browsers, the latest version of IE8, and Chrome.

Ext JS is object-oriented and class library-based, which means that its design allows your applications to range from a single developer to a multi-team enterprise. Let's break down some terms that you are not familiar.

Object-Oriented Programming

Object-Oriented Programming (OOP) is a modular way to set reusable code to make fragments. This also makes the code easier to maintain than the common "inline" script encoding with many other JavaScript libraries.
Instead of making a huge project, the plan can be divided into connection parts, and eventually, it will make things easier to maintain and scale.
Read