Zp的Ext學習筆記（一）——坑爹的MVC（html中Extjs配置、proxy代理的先後臺交互、json解析、後臺處理傳入json亂碼）

　　難（閒）得（的）有（蛋）空（疼），記錄下我學習Extjs的心得（吐）體會（槽），接觸Extjs快三週了，先說下我認爲的學習其的方法，就是在項目中用，在實踐中學，不想其餘知識技術，若是咱們僅僅盯着資料是很難弄明白的，由於你永遠不知道下一個前臺你該用哪一個類，哪些參數有用，哪些函數該怎麼寫，Extjs就是這樣的女人，你永遠摸不透他，可是你有難以忽視對她的喜好，由於她真的是太美了。。。就是這種感受，讓咱們在Extjs的裙下不斷找虐。。。

　　好的，在表達了對Extjs欲仙欲死的眷念後，我想記錄下我開發ExtjsMVC的簡單案例。我只是個入行才3個月的非軟件專業小白，前3個月都在作j2ee的東西，在ssh2框架下如魚得水的時候，主管就拋給我一個艱鉅的有點變態美的任務，成爲前端大師，對！沒錯！大師！在前一個項目基本完成後，給了我探索Extjs的任務。在看了Extjs5的介紹後，老大就定下了ExtjsMVC的基本框架，讓後就拋給了我，我去，我但是連MVC都纔剛百度的小白啊，沒錯，我就去探（求）索（死）了。若是說用Extjs庫去寫一個功能的頁面的話，我想會單純的多，可是我如今用的是MVC框架，那種抽象的概念較難接受。後來咱們仍是用了Extjs4。老大的框架如左，網上參考的框架如右：

 

　　簡單說下，基本相同且關鍵的地方在app文件夾。啓動一個項目會經過index.html裏引入的app.js，建立一個application，app的頁面就放在view下，而後此app的控制器就放在controller下，app中須要用的數據中心在store下，每條數據的結構在model下。新手能夠按照我上句理解運行流程。

　　在弄清了流程與構架，我就按流程一步步來講。

 

一、王國的地基：index.html

index.html的配置很簡單，可是會出現一些難以發現的問題。貼上兩段配置（圖）：

　　如上設置，第一段爲咱們框架的設置，第二段爲網上參考。引入/locale/ext-lang-zh_CN.js則可設置中文國際化。在探索過程當中，看到之前的版本可能要引入ext.js 與 ext-all.js，若有問題，試着將其兩個js引入順序調換下便可。

 

二、我來爲你指路 app.js

Ext.application({
    requires: 'Ext.container.Viewport',
    name: 'AM',

    appFolder: 'app',

    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    xtype: 'panel',
                    title: 'Users',
                    html : 'List of users will go here'
                }
            ]
        });
    }
});

　　如上代碼爲參考的網上代碼，launch函數中設置咱們要顯示的主頁面、以及能夠設置想引入的數據中心。

 

三、我是磚，我是瓦，我是王國的形象 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: 'ed@sencha.com'},
                {name: 'Tommy', email: 'tommy@sencha.com'}
            ]
        };

        this.columns = [
            {header: 'Name',  dataIndex: 'name',  flex: 1},
            {header: 'Email', dataIndex: 'email', flex: 1}
        ];

        this.callParent(arguments);
    }
});

　　該段代碼就是view下自定的List.js，由該js直接控制頁面顯示。

 

四、我是掌控國家的王 controller

Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',

    views: [
        'user.List'
    ],

    init: ...

    onPanelRendered: ...
});

　　如上，該段代碼就是放在controller文件夾下的Users.js。加入事件監聽，控制事件反應。

　　

五、王國的子民和一我的 store model

Ext.define('AM.store.Users', {
    extend: 'Ext.data.Store',
    model: 'AM.model.User',
    autoLoad: true,

    proxy: {
        type: 'ajax',
        url: 'data/users.json',
        reader: {
            type: 'json',
            root: 'users',
            successProperty: 'success'
        }
    }
});

　　該段代碼爲store下自定的User.js，由它來做爲數據中心，具體後面說。

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

　　該段代碼爲單個模型，具體就可理解爲store所傳json的鍵有哪些，在這裏定義。

 

一、二、三、四、5都是廢話，我就貼出來給你們個印象，具體如何搭建實現功能，參考：http://www.qeefee.com/article/000323

 

　　上面說的是否是很亂。。。我沒法詳細的寫出每一步的操做，我就在此指出我搭建的本分心得：

　　首先，視圖的肯定不僅是在控制器中，能夠在多處以變量的形式肯定。同時，控制器也是如此，能夠寫在app.js中也可寫在controller、store中。

　　而後，就是如何與ssh後臺相連，例子具體爲，store中：

proxy: {
        type: 'ajax',
        api: {
            read: '../work/readData.action',
            update: '../work/updateData.action'
        },
        reader: {
               type: 'json',
            root: 'users',
            //successProperty: 'success',
            //totalProperty: 'totalProperty'
        }
}

　　api中爲各類狀況下鏈接的action，reader中爲讀取的方式，root設置data數據的主鍵。

　　java中讀json：

public void updateData() throws Exception {
    ServletInputStream stream = request.getInputStream();
    BufferedReader br = new BufferedReader(new InputStreamReader(stream));
    String json = br.readLine();// json 字符串在此
}

　　java中寫json：

        String rjson = null;
    rjson = "{success: true,totalProperty: 11,users: ["
        + "{id: 11, name: '劉德花',    email:'ed@sencha.com'}]}";
        
    this.getServletResponse().getWriter().write(rjson);

　　在具體實現中我發現前臺傳後臺的json存在中文亂碼，其實就是unicode碼，我這總結出一個方法來轉換爲正常字符串，可能有更好方法，望交流：

// 前臺傳回json中文會變成unicode碼，須要將特定字段
    public String convert(String utfString) {
        StringBuilder sb = new StringBuilder();
        int i = -1;
        int pos = 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()));
        }
        return sb.toString();
    }

　　同時說下我怎麼解析json，我用的是GSON包，谷歌作的，很方便：

import com.google.gson.Gson;　　

Gson gson = new Gson();
TempDate tempDate = gson.fromJson(jj, TempDate.class);

　　其中TempDate爲我建好的類，其中的變量名只要和json中的鍵對應，gson就能給其賦值。具體想了解請詳查Gson。

 

　　第一次寫技術博客，很亂，還都是吐槽，但仍是但願能幫助到別人，加油吧。有空會在該頁下補充一些能夠參考的入門資料。