很惭愧之前博文中的内容就是我对ExtJS所了解的一切
马上写代码完成前端的工作其实需要花挺多时间，不现实，需要做如下的工作：
1----通过ModelStoreProxy去访问数据库；
2----模仿奎克系统，通过Json实现Ext与SpringMVC的数据通讯；（不跨域）
前者属于Ext官网官样文章，实现了你就成了；
后者我看看代码，觉得它使用extjs的request，然后用js代码的callback方法分析返回值，我觉得，不是那么的规范；
反正上述两条路必须都要调试清晰，才能保证后续的工作顺利进行。
写代码，肯定要试试看，也就是调试。前端代码的调试，怎么调啊？如果开着Eclipse调试js代码，得把人急死。算了，还是不要用eclipse了，直接用chrome浏览器。
怎么办啊？
看代码吧
上图所示的代码中，使用了Ext.Ajax.request()方法，url是之前我们在底层SpringMVC中web文件夹中写的@Controller所能够应对的方法中所标记的url。
SpringMVC的类已经写好了，这是个测试方法，不管用任何方式，只要访问dologin.html这个地址，返回值是json字符串。说实话，我也不是很清楚这一段。
总而言之，如果你用浏览器，记住了，必须是用浏览器，因为只有用浏览器去访问这个url才可能被SpringMVC拦截下来并交给那个特定的Controller去处理，这个Handler就直接去mysql数据库把user表中的所有数据取出来并转化为json字符串。
那让我们来试试，能不能做到：
很幸运，js响应了网页上对OK按钮的click动作，按钮触发了再上一幅图的js代码，间接调用了Ext.Ajax.request(）方法，向dologin.html发送request，浏览器一看，我靠返回值就是这个超屌的json字符串。
既然数据都返回来了，我们来解析一下这个json数据吧。
2----网站入口
入口文件app.js
Ext.application({
name: 'RUKU',
extend: 'RUKU.Application',
requires: [
'RUKU.view.main.Main',
'RUKU.view.main.First'
],
//指定的 顶级组件
mainView:'RUKU.view.main.First'
});RUKU.view.main.First代码，此页面是顶级组件：最普通的Ext.container.Container，用于输入用户名密码
/**
*
*/
Ext.define('RUKU.view.main.First', {
extend: 'Ext.container.Container',
xtype: 'app-first',
width: '800',
layout:{
type : 'vbox',
align : 'center',
pack : 'center'
},
requires: [
'Ext.plugin.Viewport',
'Ext.window.MessageBox',
'Ext.app.ViewController',
'RUKU.view.main.List',
'RUKU.view.main.FirstController',
'RUKU.view.main.Main'
],
style:{
backgroundColor:'#B4EEB4'
},
controller: 'first',
items:[
{
xtype:'image',
src:'pic/index.png'
},{
xtype : 'form',
reference : 'first_form',
layout:{
type:'hbox'
},
items : [
{
xtype : 'textfield',
name : 'pernr',
height : 30,
hideLabel : true,
allowBlank : false,
cls : 'auth-textbox',
emptyText : '用户名称',
},
{
xtype : 'textfield',
reference : 't_password',
name : 'keystr',
height : 30,
hideLabel : true,
emptyText : '用户密码',
inputType : 'password',
allowBlank : false,
},{
xtype : 'button',
name : 'logButton',
height : 30,
iconAlign : 'right',
iconCls : 'x-fa fa-sign-in',
text : '登 录 ',
listeners : {
//click : 'onLoginButton'
click : 'onTest'
}
}
]
}
]
});
登录界面的controller文件：
Ext.define('RUKU.view.main.FirstController', {
extend : 'Ext.app.ViewController',
alias : 'controller.first',
init:function(){
RUKU.PANEL = this;
},
onTest : function(){
this.onLoginButton();
},
onLoginButton : function(){
var me = this;
var first_form = this.lookupReference('first_form').getForm();
if (!first_form.isValid()) return;
var userinfo = first_form.getValues();
EU.RS({
url : 'dologin.html',
scope : this,
params : userinfo,
callback : function(result){
//alert("RS callback content: "+result);
if(result == 'n'){
//不存在
Ext.Msg.alert("提示","胸卡号不存在");
}else if(result == 'f'){
//密码错误
Ext.Msg.alert("提示","密码错误");
}else if(result == null||result == undefined||result == ''){
//无角色
Ext.Msg.alert("提示","无角色");
}else if(result == 'am'||result == 'tc'||result == 'ck'||result == 'qc'){
//由于scope设置的缘故，用下面方法临时替代
//alert(Ext.ClassManager.getName(Ext.ComponentQuery.query('app-first')[0].controller));
Ext.ComponentQuery.query('app-first')[0].controller.logindeal(userinfo['pernr'],result);
}
}
});
},
logindeal : function(pernr,role){
localStorage.setItem("pernr",pernr);
localStorage.setItem("role",role);
EU.redirectTo("showpage");
},
routes:{
'showpage' : 'onShowPage'
},
onShowPage : function(){
var vRole = localStorage.getItem("role");
if(vRole == "tc"||vRole == "ck"||vRole == "am"||vRole == "qc"){
//有角色的情况下（tc ck am qc 四种之一），将app.js的顶级组件销毁，然后重新设置mainView（顶级组件）
Ext.ComponentQuery.query('app-first')[0].destroy();
RUKU.getApplication().setMainView("RUKU.view.main.Main");
}else{
//没有角色，私自使用route进入系统
Ext.ComponentQuery.query('app-first')[0].removeAll(true);
Ext.Msg.alert("提示","登录失效，请重新登录");
}
}
});controller文件中，对于正常、顺利登录系统的用户，切换顶级组件
从Ext.container.Container变成Ext.tab.Panel
下面是一个典型的海王星主题的tab容器：
Ext.define('RUKU.view.main.Main', {
extend: 'Ext.tab.Panel',
xtype: 'app-main',
requires: [
'Ext.plugin.Viewport',
'Ext.window.MessageBox',
'Ext.app.Application',
'RUKU.view.main.MainController',
'RUKU.view.main.MainModel',
'RUKU.view.main.List'
],
controller: 'main',
viewModel: 'main',
ui: 'navigation',
tabBarHeaderPosition: 1,
titleRotation: 0,
tabRotation: 0,
header: {
layout: {
align: 'stretchmax'
},
title: {
bind: {
text: '{name}'
},
flex: 0
},
iconCls: 'fa-th-list'
},
tabBar: {
flex: 1,
layout: {
align: 'stretch',
overflowHandler: 'none'
}
},
//横向；竖向；
responsiveConfig: {
tall: {
headerPosition: 'top'
},
wide: {
headerPosition: 'left'
}
},
//初始值
defaults: {
bodyPadding: 20,
tabConfig: {
plugins: 'responsive',
responsiveConfig: {
wide: {
iconAlign: 'left',
textAlign: 'left'
},
tall: {
iconAlign: 'top',
textAlign: 'center',
width: 120
}
}
}
},
//下面使用bind这个config，用的是ViewModel也就是MVVM中Data Binding的概念
//共8个tab页，默认显示2个：工作台、结果；
//TC显示 ：物料、标准
//QC显示 ：标准
//CK显示 ：入库
//AM显示 ：用户、物料、供应商、待检单、标准、入库
items: [{
title: '工作台',
iconCls: 'fa-home',
// The following grid shares a store with the classic version's grid as well!
items: [{
xtype: 'mainlist'
}]
},
{
title: '结果(result)',
iconCls: 'fa-table',
bind: {
html: '{loremIpsum}'
}
}
]
});tabPanel的controller，下面的写法是有问题的，因为它依据localStorage判断用户角色然后提供功能的做法，很愚蠢，以后改
Ext.define('RUKU.view.main.MainController', {
extend: 'Ext.app.ViewController',
alias: 'controller.main',
onItemSelected: function (sender, record) {
Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
},
init:function(){
//作为主窗体Main.js的Controller文件，能见到这个窗体和Controller说明一定是输入了正确的用户名密码
//为了确保上述判断，读取session 用户的信息和role
//"LOGIN_USER_PRE" "LOGIN_ROLE_PRE" 是对应的key
//alert(RUKU.getApplication().getMainView());
var vRole = localStorage.getItem("role");
if(vRole == 'am'){
Ext.ComponentQuery.query('app-main')[0].add(
{
title: '用户(user)',
iconCls: 'fa-male',
bind: {
html: 'user'
}
},{
title: '物料(matnr)',
iconCls: 'fa-puzzle-piece',
bind: {
html: 'matnr'
}
},{
title: '供应商(lifnr)',
iconCls: 'fa-users',
bind: {
html: 'lifnr'
}
},{
title: '待检单(checklist)',
iconCls: 'fa-tasks',
bind: {
html: 'check list'
}
},{
title: '标准(standard)',
iconCls: 'fa-bold',
bind: {
html: 'standard'
}
},{
title: '入库(ruku)',
iconCls: 'fa-sign-in',
bind: {
html: 'ruku'
}
},
);
}else if(vRole == 'tc'||vRole == 'qc'){
Ext.ComponentQuery.query('app-main')[0].add(
{
title: '物料(matnr)',
iconCls: 'fa-puzzle-piece',
bind: {
html: 'matnr'
}
},{
title: '标准(standard)',
iconCls: 'fa-bold',
bind: {
html: 'standard'
}
}
);
}else if(vRole == 'ck'){
Ext.ComponentQuery.query('app-main')[0].add(
{
title: '入库(ruku)',
iconCls: 'fa-sign-in',
bind: {
html: 'ruku'
}
}
);
}
},
onConfirm: function (choice) {
if (choice === 'yes') {
//
}
}
});
上述代码中每个tab栏的标题前面都有一个图标，比如：
title: '入库(ruku)',
iconCls: 'fa-sign-in',
图标代码，图标的样子，哪来的呢？
参考下面的链接
http://fontawesome.io/cheatsheet/
我在想，如果服务器不能上外网是不是就刷不出来？
下面是登录过程：
后面的工作继续进行。
