extjs html 指向网页,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

:>理解没？

新建入口文件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里,后续这个工具类会逐渐完善。

如下:

通用函数工具类: 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

EXTJS6.2.0MVC