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.' +'<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>
至此,没什么意外的话,应该是可以看到界面了!
extjs-mvc结构实践(二):基本页面相关推荐
- ExtJs十(ExtJs Mvc用户管理之二)
ExtJs十(ExtJs Mvc用户管理之二) 原文 http://www.cnblogs.com/aehyok/archive/2013/04/26/3044152.html 前言 为了防止意外情况 ...
- uniapp 学习笔记二十二 购物车页面结构搭建
uniapp 学习笔记二十二 购物车页面结构搭建 cart.vue <template><view><view class="flex padding" ...
- Java-GUI编程实战之管理系统 Day3【学生管理系统GUI设计、学生管理系统增删改查、项目MVC结构介绍、Java技能图谱】
视频.课件.源码[链接:https://pan.baidu.com/s/13ffqGDzH-DZib6-MFViW3Q 提取码:zjxs] Java-GUI编程实战之管理系统 Day1[项目开发流程. ...
- Android MVC结构的浅见【转】
http://www.cs.otago.ac.nz/cosc346/labs/COSC346-lab2.2up.pdf 写道 在Android应用程序中,我们不能够非常清楚地区分MVC结构中的视图部分 ...
- ASP.NET MVC 控制器激活(二)
ASP.NET MVC 控制器激活(二) 前言 在之前的篇幅中,用文字和图像来表示了控制器的激活过程,描述的角度都是从框架默认实现的角度去进行描述的,这样也使得大家都可以清楚的知道激活的过程以及其中涉 ...
- java web利用mvc结构实现简单聊天室功能
简单聊天室采用各种内部对象不适用数据库实现. 一个聊天室要实现的基本功能是: 1.用户登录进入聊天室, 2.用户发言 3.用户可以看见别人发言 刚才算是简单的需求分析了,现在就应该是进 ...
- ExtJS MVC学习手记 1
开发环境: ExtJS4.2 eclipse indigo 开发目标 搭建项目框架,创建viewport 开发步骤说明 这次主要使用extjs4的mvc模式创建viewport.籍此初步了解mvc模 ...
- ASP.NET MVC5 网站开发实践(二) Member区域 - 用户部分(2)用户登录、注销
上次实现了用户注册,这次来实现用户登录,用到IAuthenticationManager的SignOut.SignIn方法和基于声明的标识.最后修改用户注册代码实现注册成功后直接登录. 目录: ASP ...
- 学习笔记之数据可视化(二)—— 页面布局(下)
续上一章 2.7 地图区域(.map) 2.7.1 实现步骤: 2.8 用户统计模块 2.8.1 布局: 2.8.2 柱状图 2.9 订单模块 2.9.1 订单区域布局 2.9.2 订单区域(orde ...
- 学习笔记之数据可视化(二)——页面布局(中)
续上一章 2.6 监控区域布局 2.6.1 布局结构解析: 2.6.2 样式描述: 2.6.3 HTML结构及CSS样式代码 2.6.3 ### 监控区域-效果 2.6.7 点位区域(point) 2 ...
最新文章
- diy高性能存储服务器,diy存储服务器
- boost spirit的简单使用
- 如何让人大致理解RxJava思想:第一节 初步理解RxJava
- 单页面抓图并且保存的爬虫
- k8s创建pod的步骤
- [Node.js] 模块化 -- 中间件和跨域
- 7-107 找出三位水仙花数 (15 分)
- 讯飞输入法新升级:支持离线输入方式 加强用户数据安全
- CAD格式DWF嵌入到自己的网页中展示--Autodesk Design Review
- Mongodb 定时备份和恢复 1
- 从零开始学安全(七)●Linux基础命令学习笔记
- sqlyog和mysql一样么_navicat和sqlyog的区别
- Java编程必备软件
- Spire.Doc for Java-根据表格模板生成word表格
- 戏人看戏,苏旭博客网-学无止尽
- Autosar Dcm模块之Vector Configurator Pro配置(DSP子模块)
- TI Zigbee Light Link 参考设计
- 金融科技上市公司业绩爆发,三大业务趋势显现
- 信息传播学习笔记(1)——SIS模型原理与公式推导
- emlog某涛娱乐资源网源码 自带200多条数据打包
热门文章
- hihocode 1336 Matrix Sum 【二维树状数组】
- Font Awesome图标字体
- Jquery的parent和parents(找到某一特定的祖先元素)
- input 标签左对齐
- js本地存储解决方案(localStorage与userData)
- thinkphp __hash__
- 在地图上点击一下,在图层上画一个点,并显示相关的信息
- 独门绝技:一招克死所有病毒(转贴,没有用过)
- 线程、协程、Goroutine的区别和联系
- dedecms后台上传图片附件返回302的问题