extjs-mvc结构实践(二):基本页面

摘要：接着来，上一篇搭建了基本的项目骨架，到最后，其实啥也没看见。。。目标全屏显示左侧导航菜单，右侧标签页切换操作内容区域。一般模型与你后台返回的数据结构一一对应。给其他组件提供一致接口使用数据。整个构成一个所谓的。

</>复制代码 
接着来，上一篇搭建了基本的项目骨架，到最后，其实啥也没看见。。。
书接上回，开始写UI效果。

全屏显示、左侧导航菜单，右侧标签页切换操作内容区域。包含header和footer

导航菜单动态ajax产生，点击对应菜单可以动态加载js资源或者数据

不要太丑！！！！

一些基本的Extjs概念本文不会去讲，请参考官网API文档。
但是对于用java的同志来说，看extjs的结构应该是很容易的

定义与创建 define vs create

</>复制代码 
///////extjs
Ext.define("Cat",{//定义一只猫
name:"小甜甜"//名字
})  
  
///////java
class Cat(){//定义一只猫
private String name;
}

</>复制代码 
///////extjs
Ext.create("Cat",{//创建一只猫
name:"牛夫人"//
})  
///////java
Cat cat= new Cat();
cat.setName="牛夫人";

Model模型是个啥?

直白点说吧，模型就是模型，，就是实体类，就是entity,就是POJO,,,,就是.......
总之，模型是用来定义一个东西的属性的。一般模型与你后台返回的数据结构一一对应。
比如：一个用户模型：

</>复制代码 
Ext.define("luter.model.User", {
    extend: "Ext.data.Model",
    fields: [
        {name: "id", type: "string"},//用户id
        {name: "username", type: "string"},//用户名
        {name: "gender", type: "string"},//性别
        {name: "real_name", type: "string"}//真实姓名
    ]
});

要模型干啥？哎，开始我也这么想过，后来看到store

Store是干啥的?

好了，你有数据库，你有后台，你甚至都用js定义了数据模型(Model)，那你数据怎么来？
Store简单理解，就是干这个的，Store用来获取数据，管理数据，前端保存数据。给其他组件提供一致接口使用数据。Store定义了数据怎么获取数据、拿到后如何处理数据。如下例：

</>复制代码 
//定义一个user store
Ext.define("luter.store.User", {
    extend: "Ext.data.Store",
    autoLoad: false,
    model: "luter.model.User",//这就是user model， 用户模型
    pageSize: 15,//分页页面大小
    remoteSort: true,//服务端排序
    sortOnLoad: true,
    proxy: {//proxy规定了从什么地方以什么方式获取数据，并且返回数据应该如何解析获取
        type: "ajax",
        actionMethods: {
            create: "POST",
            read: "POST",
            update: "POST",
            destroy: "POST"
        },
        api: {
            read: "app/testdata/user.json"
        },
        reader: {//返回数据如何读取
            type: "json",
            root: "root",
            successProperty: "success",
            totalProperty: "total"
        },
        listeners: {//当发生ajax异常的时候，回调处理。
            exception: function (proxy, response, operation, eOpts) {
                DealAjaxResponse(response);
            }
        }
    },
    sorters: {//排序规则。
        property: "id",
        direction: "DESC"
    }
});

view是什么?

view就是。。。。。。UI啊！！！grid啊、button啊、panel啊、tree啊 form啊。。。等等。。。。
显示数据，接受用户操作，给用户操作反馈....反正用户看到的地方，就是view

:>理解没？

</>复制代码 
对于extjs而言，一个应用也就是application,对应Ext.Application类。一个应用可以有自己的类体系，store、view、Model等元素。整个构成一个所谓的：app。app.js是整个应用的入口，用来初始化Ext.Application，当然，你可以不叫app.js，比如叫:aipapa.js，都是可以滴！！但是里面是干这个事情的。。。

</>复制代码 
/**
 * 设置Extjs的动态加载路径
 */
Ext.Loader.setConfig({
    enabled: true,
    paths: {
        "Ext": "app/vendor/extjs/6.2.0",
        "Ext.ux": "app/vendor/extjs/6.2.0/ux"
    }
});
/**
 * 是否开启url缓存，就是xxx.com?_dc=123123123123类似这种
 */
Ext.Ajax.disableCaching = false;
/**
 * 初始化工具提示
 */
Ext.QuickTips.init();
Ext.application({
    name: "luter",//这个应用叫啥，其实就是目录名字
    /**
     * 你把这个应用放哪个目录下了,控制器啊store啊view啥的，在哪里?
     * 以后定义一个叫Ext.define("luter.model.Car",{})的时候，其实就是指向了js文件:app/luter/model/Car.js
     * requiere就会动态 ajax load这个js下来
     */
    appFolder: "app/luter",
    init: function () {//先初始化
        console.log("init")
    }, launch: function () {//发射！
        console.log("launch")
    }
});

最后，在入口html中记得引入这个文件。不出意外的话预览app.html，console里应该能看到点信息了，当然，依然没啥UI效果....接下来就创建view

</>复制代码 
主view基础是一个viewport,采用Border布局，头部header+底部footer+左侧导航树+中间tab页内容切换。为了方便管理，主view统一放在main目录下，

</>复制代码 
 /**
 * 主视图占满全屏是个viewport
 */
Ext.define("luter.view.main.ViewPort", {
    extend: "Ext.Viewport",
    alias: "widget.viewport",//别名，与xtype对应
    layout: "border",//东南西北中布局，边界嘛
    stores: [],
    requires: [],
    initComponent: function () {
        var me = this;
        Ext.apply(me, {
            items: [{
                region: "north",
                height: 40,
                title: "北方",
                xtype: "panel"
            }, {
                region: "west",
                xtype: "panel",
                title: "西方",
                width: 200
            }, {
                region: "center",
                title: "中间",
                xtype: "panel"
            }, {
                region: "south",
                xtype: "panel",
                title: "南方",
                height: 40
            }]
        });
        me.callParent(arguments);
    }
});

</>复制代码 
Ext.define("luter.controller.MainController", {
    extend: "Ext.app.Controller",
    views: ["main.ViewPort"],//默认views会寻找项目目录下的view目录，也就是会扫描到app/luter/view了，所以直接下下级路径即可。
    stores: [],
    init: function (application) {
        var me = this;
        this.control({
            "viewport": {//监听viewport的初始化事件，可以做点其他事情在这里，如有必要，记得viewport定义里的alias么？
                "beforerender": function () {
                    console.log("viewport begin render at:" + new Date());
                },
                "afterrender": function () {
                    console.log("viewport  render finished at:" + new Date());
                },
            }
        });
    }
});

控制器有了，视图有了，接下来让程序显示这个UI，修改app.js

</>复制代码 
/**
 * 设置Extjs的动态加载路径
 */
Ext.Loader.setConfig({
    enabled: true,
    paths: {
        "Ext": "app/vendor/extjs/6.0.0",
        "Ext.ux": "app/vendor/extjs/6.0.0/ux"
    }
});
/**
 * 是否开启url缓存，就是xxx.com?_dc=123123123123类似这种
 */
Ext.Ajax.disableCaching = false;
/**
 * 初始化工具提示
 */
Ext.QuickTips.init();
var luterapp;//定义一个全局app对象，便于后续使用
Ext.application({
    name: "luter",//这个应用叫啥，其实就是目录名字
    /**
     * 你把这个应用放哪个目录下了,控制器啊store啊view啥的，在哪里?
     * 以后定义一个叫Ext.define("luter.model.Car",{})的时候，其实就是指向了js文件:app/luter/model/Car.js
     * requiere就会动态 ajax load这个js下来
     */
    appFolder: "app/luter",
    init: function () {//先初始化
        console.log("init")
    }, launch: function () {//发射！
        console.log("launch")
        luterapp = this;
        this.loadModule({
            moduleId: "MainController"
        });
        var module = this.getController("MainController");//加载这个控制器
        var viewName = module.views[0];//获取到这个控制器里的第一个view名字
        var view = module.getView(viewName);//获取到这个view,本质上就是加载js文件
        view.create();//创建这个view
    },
    /**
     * 动态加载控制器
     * @param config
     * @returns {boolean}
     */
    loadModule: function (config) {
        if (!Ext.ClassManager.isCreated(config.moduleId)) {
            console.log("controller:" + config.moduleId + "  is not load ,now load in.....");
            try {
                var module = luterapp.getController(config.moduleId);
            } catch (error) {
                showFailMesg({
                    msg: ":<> O!   No:load module fail,the module object is null." +
                    "
 maybe :the module is Not available now." +
                    "
Error: " + error
                });
                return false;
            } finally {
            }
        }
    }
});
 

这里面用到了一个showFailMesg的函数，这种弹出提示框的东西，可以做成通用的函数放在utils里,后续这个工具类会逐渐完善。
如下:

</>复制代码 
/**
 * 操作成功提示
 */
function showSucMesg(config) {
    Ext.Msg.show({
        title: "成功",
        msg: config.msg || "",
        width: 400,
        buttons: Ext.Msg.OK,
        icon: Ext.MessageBox.INFO,
        fn: config.fn || ""
    });
}
/**
 * 操作失败提示
 */
function showFailMesg(config) {
    Ext.Msg.show({
        title: config.title || "失败",
        msg: config.msg || "",
        width: 450,
        buttons: Ext.Msg.OK,
        icon: Ext.MessageBox.ERROR,
        fn: config.fn || ""
    });
}

当然，这个js也需要在入口html引入，在app.js之前引入。如下：

</>复制代码