Extjs4 step by step (1) -- start ext

Preface

It has been a long time for front-end development, from writing Basic js to JQ, from simple UI plug-ins such as easyui and JQ-UI to writing plug-ins by yourself. Currently, extjs is used as the frontend for the project, so the latest version 4.0.7 is used. Although I have been familiar with extjs before, I still feel a lot of weakness during a period of development, especially when the extjs4.x version is greatly changed, A lot of things can no longer be searched by Baidu alone (it is useless to find them ). There are few things about extjs4.x on the Internet, or they are limited to official demos. At the instigation of colleagues and friends, the younger brother is unwilling to record what he has learned and used in the development process and share it with everyone. At the same time, I hope that my blog will attract Daniel and help me solve some headaches.

Statement: some of the materials in this article are source and online searches. If a reprinted statement is found, I will indicate that, if not, the source cannot be obtained. I do not accept any form of cross-province.

International Convention first obtains the Development Kit

Click Download For ext JS 4.0.7 on the http://www.sencha.com/products/extjs/download/page to download the ext development kit.

After the download, decompress the package and there are too many things in disorder 78. The general explanation is as follows:

• The builds directory is the code compressed by extjs, which is smaller and faster to load.
• Docs is an essential tool for extjs documentation, including ext APIs.
• Example is an official example. The learning begins with studying the code.
• Locale is a multi-country Language Pack and ext-lang-zh_CN.js is simplified Chinese. (If you think the development kit is bloated in the project, you can delete all except ZH-CN)
• Overview is the function description of extjs.
• Pkgs is a package file for functions of extjs.
• Resource is the image and Style Sheet Used in extjs.
• The src directory is an uncompressed source code directory.
• Bootstrap. JS is the guiding file of the extjs Library, through which parameters can be automatically switched to ext-all.js and ext-all-debug.js.
• Ext-all.js files are the core library of extjs and must be introduced.
• The ext-all-debug.js file is the debug version of The ext-all.js.

New Features

Since a new version is used, the meaning of the new version must be used. What new convenience does extjs4.x provide for us?

 

1. Dynamic Loading and Class Definition

Extjs4.0 introduces the Ext. Define method, which can be defined and inherited by the string name of the class. This avoids errors because the class does not exist. The class manager automatically checks the dependency between classes. Example:

Ext.define('MyDataModel',{        extend: 'Ext.data.Model',        fields:[                {name: 'id', type: 'string'},                {name: 'name',  type: 'string'},                {name: 'email',  type: 'string'},                {name: 'phone',  type: 'string'}               ]});

The code above declares a class named 'mydatamod', which inherits Ext. Data. model. How to call it? Let's look at the following code:

var myStore = Ext.create('Ext.data.Store', {    model: 'MyDataModel',    proxy: {        type: 'ajax',        url : 'data.xml',        reader: {            type: 'json',            root: 'data'        }    }});

Mystore can be understood as a data storage. The above code can be understood as "retrieving JSON data from the data. xml path, and the data root node is 'data '".

As you can see, the model is like defining an empty table. Store fills the empty table with data. The specific usage will be discussed in the grid chapter.

 

2. Powerful charts and graphs

You can see a lot of demos in the example/charts path. Commonly used bar charts, pie charts, waveform charts, and even 3D images. A simple screenshot:

By the way, if you cannot see or report errors in some images or other demos, use IIS to create a virtual directory and put all the demos in the virtual directory.

 

Different helloworld

Well, I really don't want to write about helloworld, but after all kinds of criticism and education, I expressed my deep reflection. helloworld is the soul of programmers and praises helloworld.

Reference JS first:

<link rel="stylesheet" type="text/css" href="../ext-4.0.7/resources/css/ext-all.css" /><script type="text/javascript" src="../ext-4.0.7/bootstrap.js"></script><script type="text/javascript" src="../ext-4.0.7/locale/ext-lang-zh_CN.js"></script>

Bootstrap. js will reference the ext-all.js file on its own. Next, paste the JS Code:

<script type="text/javascript">         Ext.onReady(function(){                   Ext.MessageBox.alert("Hello World","Hello World!")         });</script>

:

Are there different things? No. Declare a JSON object:

VaR Config = {Title: 'helloworld', MSG: 'It's a bit different from helloworld '};

Then replace the preceding alert () method with the following:

Ext.MessageBox.show(config);

Applaud those who saw the results after the operation.

A clever person may have thought that JSON is a common means of data transmission, while extjs supports JSON configuration, so the front-end only needs to put a few simple codes, you can use the background code in Ajax mode to control the output content of the front-end page. The power of this application will be gradually reflected later.

Is there an error?

Finally, I will teach you some debugging methods. The most sharp front-end debugging is Firefox's firebug, which is a required tool.

As we all know, JS debugging is a disgusting thing. It is often caused by missing a symbol and wrong letters that make it impossible to run, and the error message makes it impossible to locate the cause of the error, especially with JQ, ext and other libraries, debugging is even more tearful. The following is an error reported by IE after I intentionally wrote an error:

I have no buttons on the page, and I cannot understand what the error is.

Open it with firebug and select "console ":

The error is clear and the location is clear.

Yes, I messed up a CCC on the page, depending on the ext-all-debug.js to output the error to the control panel, I easily found the error. Think back to your crazy mood when looking for errors in thousands of lines of code, it means that the friends that you can find with the naked eye must be the "experts who come to find failures.

By the way, the firebug console can also customize some debugging code:

Console. Log ("output in console ");

After running the command, you will find the output content on the console:

In the past, I believe many of my friends used alert () to bring up messages for debugging. When loop output needs to track changes in each loop, do you always have to give your left-hand thumbs up and press a space? Poor keyboard, It's a programmer's friend.

 

Summary

I have a limited number of articles and I have no overall picture of the content. I just wrote some tips from the perspective of programmers. Starting from the next chapter, we will introduce the use of each ext component in the project and the combined application with the background (mainly the background of the MVC Framework ). Correct the error.

 

PS: Let's talk about Uncle Tom's deep understanding of the JS series. You are an idol ~