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下。新手可以按照我上句理解运行流程。

　　在弄清了流程与构架，我就按流程一步步来说。

1、王国的地基：index.html

index.html的配置很简单，但是会出现一些难以发现的问题。贴上两段配置（图）：





　　如上设置，第一段为我们框架的设置，第二段为网上参考。引入/locale/ext-lang-zh_CN.js则可设置中文国际化。在探索过程中，看到以前的版本可能要引入ext.js 与 ext-all.js，如有问题，试着将其两个js引入顺序调换下即可。

2、我来为你指路 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函数中设置我们要显示的主页面、以及可以设置想引入的数据中心。

3、我是砖，我是瓦，我是王国的形象 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直接控制页面显示。

4、我是掌控国家的王 controller

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

views: [
'user.List'
],

init: ...

onPanelRendered: ...
});

　　如上，该段代码就是放在controller文件夹下的Users.js。加入事件监听，控制事件反应。

　　

5、王国的子民和一个人 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的键有哪些，在这里定义。

1、2、3、4、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。

　　第一次写技术博客，很乱，还都是吐槽，但还是希望能帮助到别人，加油吧。有空会在该页下补充一些可以参考的入门资料。