摘要：接着来，上一篇搭建了基本的项目骨架，到最后，其实啥也没看见。。。目标全屏显示左侧导航菜单，右侧标签页切换操作内容区域。一般模型与你后台返回的数据结构一一对应。给其他组件提供一致接口使用数据。整个构成一个所谓的。
接着来，上一篇搭建了基本的项目骨架，到最后，其实啥也没看见。。。目标
书接上回，开始写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
:>理解没？
新建入口文件app.js对于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主view基础是一个viewport,采用Border布局，头部header+底部footer+左侧导航树+中间tab页内容切换。为了方便管理，主view统一放在main目录下，主视窗: app/luter/view/main/viewport.js
/**
* 主视图占满全屏是个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);
}
});
建立主控制器:app/luter/controller/MainController.js
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
修改app入口: app/luter/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之前引入。如下：
修改入口html: app/app.html
EXTJS6.2.0MVC