接着来，上一篇搭建了基本的项目骨架，到末了，实在啥也没看见。。。
书接上回，最先写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.' +
'<br> maybe :the module is Not available now.' +
'</br>Error: ' + error
});
return false;
} finally {
}
}
}
});
这内里用到了一个showFailMesg的函数，这类弹出提醒框的东西，能够做成通用的函数放在utils里,后续这个东西类会逐步完美。
以下:
通用函数东西类: app/luter/utils.js
/**
* 操纵胜利提醒
*/
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>EXTJS6.2.0MVC</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--引入extjs的款式-->
<link href="app/vendor/extjs/6.2.0/classic/theme-crisp/resources/theme-crisp-all.css" rel="stylesheet">
<!--引入自定义款式-->
<link href="app/resource/css/style.css" rel="stylesheet">
</head>
</head>
<body>
<!--引入extjs相干js-->
<script src="app/vendor/extjs/6.2.0/ext-all.js"></script>
<script src="app/vendor/extjs/6.2.0/classic/theme-crisp/theme-crisp.js"></script>
<!--全局东西类-->
<script src="app/luter/utils.js"></script>
<!--进口引入，全部运用在这个文件里初始化-->
<script src="app/luter/app.js"></script>
</body>
</html>