ExtJS前端实现过程-CSDN博客

很惭愧之前博文中的内容就是我对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 : '登&nbsp;&nbsp;&nbsp;&nbsp;录&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
               
                    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/
我在想，如果服务器不能上外网是不是就刷不出来？

下面是登录过程：

后面的工作继续进行。