ZP ext Study Notes (i)-------------The MVC (ExtJS configuration in HTML, front and back interaction of proxy proxies, JSON parsing, background processing of incoming JSON garbled)

Difficult (free) to have (eggs) empty (pain), record My Learning ExtJS (spit) Experience (the Groove), contact ExtJS Fast three weeks, first said I think the method of learning, is in the project, in practice, not to other knowledge technology, if we just stare at the information is difficult to understand, Because you never know the next front desk you should use which class, which parameters are useful, which functions to write, ExtJS is such a woman, you can never touch him, but you have to ignore her love, because she is really beautiful ... It is this feeling, let us under the skirt of ExtJS constantly find abuse ...

OK, after expressing the fondly of ExtJS to die, I want to record the simple case that I develop EXTJSMVC. I'm just a 3 months in the field of non-software professional small white, the first 3 months are doing the things of the Java EE, in the framework of the SSH2, when the director threw me a bit of a difficult little perverted beauty of the task, to become the front-end master, right! That's right! Master! After the basic completion of the previous project, I was given the task of exploring ExtJS. After watching the introduction of EXTJS5, the eldest brother set the basic framework of the EXTJSMVC, let me, I go, I am even MVC is just Baidu's small white ah, yes, I went to explore (to) the Rope (dead). If you use the ExtJS library to write a functional page, I think it will be more simple, but I now use the MVC framework, the abstract concept is more difficult to accept. Then we used the EXTJS4. The frame of the eldest is as left, the frame of the net reference as right:

Simply put, basically the same and critical place in the app folder. Start a project through the index.html introduced in the App.js, create a Application,app page is placed under the view, and then the app's controller is placed under controllers, the app needs to use the data center in the store, each data structure under model. Beginners can follow my previous sentence to understand the running process.

In figuring out the process and the architecture, I'll follow the process step by step.

1, the foundation of the kingdom: index.html

The configuration of the index.html is simple, but there are some hard-to-find problems. Two segment configuration (figure):

As above set, the first paragraph is the setting of our frame, the second paragraph is the online reference. The introduction of/locale/ext-lang-zh_cn.js can set Chinese internationalization. In the exploration process, see the previous version may have to introduce ext.js and ext-all.js, if there is a problem, try to put its two JS introduced in the order of the replacement.

2, I come to show you the way app.js

ext.application ({    ' Ext.container.Viewport ',    ' AM ',    ' app ',     function () {        ext.create (' Ext.container.Viewport ', {            ' fit ',            items: [                {                     ' Panel ',                    ' users ',                    ' List of users would go here '}            ]        })    ;

As the code is referenced online, the launch function sets the main page we want to display, and can set the data center that you want to introduce.

3, I am a brick, I am tile, I am the image of the Kingdom view

Ext.define (' AM.view.user.List ', {extend:' Ext.grid.Panel ', alias:' Widget.userlist ', Title:' All Users ', InitComponent:function() {         This. store ={fields: [' Name ', ' email '], data: [{name:' Ed ', email: ' [email protected] '}, {name:' Tommy ', email: ' [email protected] '}            ]        };  This. Columns =[{header:' Name ', Dataindex: ' Name ', flex:1}, {header:' Email ', dataindex: ' Email ', flex:1}        ];  This. Callparent (arguments); }});

The code is the view under the custom List.js, by the JS directly control the page display.

4, I am the master controller of the country

Ext.define (' AM.controller.Users ', {    ' Ext.app.Controller ', views    : [        ' user. List '    ],    init: ...    onpanelrendered: ...});

As above, this code is placed in the Controller folder under the Users.js. Participate in event monitoring to control event response.

　　

5. The people of the kingdom and a man store model

Ext.define (' AM.store.Users ', {    ' Ext.data.Store    ', ' AM.model.User ',      True,    proxy: {        ' ajax ',        ' Data/users.json ',        reader: {            ' JSON ',            ' users ',            ' success '}}    );

The code is a custom user.js in store, which is used as the data center, specifically later.

Ext.define (' AM.model.User ', {    ' Ext.data.Model ', fields    : [' name ', ' email ']});

The code is a single model, which can be understood as the key for the JSON that is passed to the store, as defined here.

1, 2, 3, 4, 5 are nonsense, I put out to give everyone an impression, concrete how to build the implementation function, reference: http://www.qeefee.com/article/000323

The above is not very messy ... I cannot write down the details of each step, and I will point out the following:

First, the view is determined not only in the controller, but also in the form of multiple variables. At the same time, the controller is the same, can be written in the App.js also can be written in the controller, store.

Then, is how to connect with ssh backstage, the example is, in store:

Proxy: {        ' ajax ',        API: {            '.. /work/readdata.action ',            '. /work/updatedata.action '        },        reader: {                           ' json ', ' users '            , ' Success ',            ' Totalproperty '        }}

In the API, for the action,reader of the connection in various cases, root sets the primary key for the data.

Read JSON in Java:

 Public void throws Exception {    = request.getinputstream ();     New BufferedReader (new  InputStreamReader (stream));     = Br.readline (); // JSON string in this }

Write JSON in Java:

        NULL ;     = "{success:true,totalproperty:11,users: ["        + "{id:11, Name: ' Fang ',    email: ' [email protected] '}]}";             this. Getservletresponse (). Getwriter (). write (Rjson);

In the concrete implementation of the background JSON I found that there is a Chinese garbled, in fact, Unicode code, I summed up a method to convert to normal string, there may be a better way to hope to communicate:

//The foreground return JSON Chinese will become Unicode code, need to be specific fields     Publicstring Convert (String utfstring) {StringBuilder sb=NewStringBuilder (); inti =-1; intpos = 0; if(Stringutil.isnotempty (utfstring)) { while((i = Utfstring.indexof ("\\u", pos))! =-1) {sb.append (utfstring.substring (POS, i)); if(i + 5 <utfstring.length ()) {POS= i + 6; Sb.append ((Char) Integer.parseint (utfstring.substring (i+ 2, i + 6), 16));        }} sb.append (Utfstring.substring (POS, Utfstring.length ())); }        returnsb.tostring (); }

At the same time, how do I parse json, I use Gson package, Google do, very convenient:

Import Com.google.gson.Gson;

New Gson ();
= Gson.fromjson (JJ, Tempdate.  Class);

where tempdate for me to build a class, where the variable name as long as the JSON and the key corresponding to the Gson can be assigned to the value. specifically want to know please check Gson.

The first time to write technical blog, very messy, but also are spit groove, but still hope to help others, refueling it. You will be able to supplement some of the introductory materials below this page.

ZP's Ext learning Note (i)--the MVC (ExtJS configuration in HTML, front and back interaction of proxy proxies, JSON parsing, background processing of incoming JSON garbled)