资讯专栏INFORMATION COLUMN

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

changfeng1050 / 1714人阅读

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

</>复制代码

  1. 接着来,上一篇搭建了基本的项目骨架,到最后,其实啥也没看见。。。
    书接上回,开始写UI效果。
目标

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

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

不要太丑!!!!

先扯点概念:

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

定义与创建 define vs create

</>复制代码

  1. ///////extjs
  2. Ext.define("Cat",{//定义一只猫
  3. name:"小甜甜"//名字
  4. })
  5. ///////java
  6. class Cat(){//定义一只猫
  7. private String name;
  8. }

</>复制代码

  1. ///////extjs
  2. Ext.create("Cat",{//创建一只猫
  3. name:"牛夫人"//
  4. })
  5. ///////java
  6. Cat cat= new Cat();
  7. cat.setName="牛夫人";

Model模型是个啥?

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

</>复制代码

  1. Ext.define("luter.model.User", {
  2. extend: "Ext.data.Model",
  3. fields: [
  4. {name: "id", type: "string"},//用户id
  5. {name: "username", type: "string"},//用户名
  6. {name: "gender", type: "string"},//性别
  7. {name: "real_name", type: "string"}//真实姓名
  8. ]
  9. });

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

Store是干啥的?

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

</>复制代码

  1. //定义一个user store
  2. Ext.define("luter.store.User", {
  3. extend: "Ext.data.Store",
  4. autoLoad: false,
  5. model: "luter.model.User",//这就是user model, 用户模型
  6. pageSize: 15,//分页页面大小
  7. remoteSort: true,//服务端排序
  8. sortOnLoad: true,
  9. proxy: {//proxy规定了从什么地方以什么方式获取数据,并且返回数据应该如何解析获取
  10. type: "ajax",
  11. actionMethods: {
  12. create: "POST",
  13. read: "POST",
  14. update: "POST",
  15. destroy: "POST"
  16. },
  17. api: {
  18. read: "app/testdata/user.json"
  19. },
  20. reader: {//返回数据如何读取
  21. type: "json",
  22. root: "root",
  23. successProperty: "success",
  24. totalProperty: "total"
  25. },
  26. listeners: {//当发生ajax异常的时候,回调处理。
  27. exception: function (proxy, response, operation, eOpts) {
  28. DealAjaxResponse(response);
  29. }
  30. }
  31. },
  32. sorters: {//排序规则。
  33. property: "id",
  34. direction: "DESC"
  35. }
  36. });

view是什么?

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

:>理解没?

新建入口文件app.js

</>复制代码

  1. 对于extjs而言,一个应用也就是application,对应Ext.Application类。一个应用可以有自己的类体系,storeviewModel等元素。整个构成一个所谓的:appapp.js是整个应用的入口,用来初始化Ext.Application,当然,你可以不叫app.js,比如叫:aipapa.js,都是可以滴!!但是里面是干这个事情的。。。

</>复制代码

  1. /**
  2. * 设置Extjs的动态加载路径
  3. */
  4. Ext.Loader.setConfig({
  5. enabled: true,
  6. paths: {
  7. "Ext": "app/vendor/extjs/6.2.0",
  8. "Ext.ux": "app/vendor/extjs/6.2.0/ux"
  9. }
  10. });
  11. /**
  12. * 是否开启url缓存,就是xxx.com?_dc=123123123123类似这种
  13. */
  14. Ext.Ajax.disableCaching = false;
  15. /**
  16. * 初始化工具提示
  17. */
  18. Ext.QuickTips.init();
  19. Ext.application({
  20. name: "luter",//这个应用叫啥,其实就是目录名字
  21. /**
  22. * 你把这个应用放哪个目录下了,控制器啊store啊view啥的,在哪里?
  23. * 以后定义一个叫Ext.define("luter.model.Car",{})的时候,其实就是指向了js文件:app/luter/model/Car.js
  24. * requiere就会动态 ajax load这个js下来
  25. */
  26. appFolder: "app/luter",
  27. init: function () {//先初始化
  28. console.log("init")
  29. }, launch: function () {//发射!
  30. console.log("launch")
  31. }
  32. });

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

开始创建主view

</>复制代码

  1. 主view基础是一个viewport,采用Border布局,头部header+底部footer+左侧导航树+中间tab页内容切换。为了方便管理,主view统一放在main目录下,
主视窗: app/luter/view/main/viewport.js

</>复制代码

  1. /**
  2. * 主视图占满全屏是个viewport
  3. */
  4. Ext.define("luter.view.main.ViewPort", {
  5. extend: "Ext.Viewport",
  6. alias: "widget.viewport",//别名,与xtype对应
  7. layout: "border",//东南西北中布局,边界嘛
  8. stores: [],
  9. requires: [],
  10. initComponent: function () {
  11. var me = this;
  12. Ext.apply(me, {
  13. items: [{
  14. region: "north",
  15. height: 40,
  16. title: "北方",
  17. xtype: "panel"
  18. }, {
  19. region: "west",
  20. xtype: "panel",
  21. title: "西方",
  22. width: 200
  23. }, {
  24. region: "center",
  25. title: "中间",
  26. xtype: "panel"
  27. }, {
  28. region: "south",
  29. xtype: "panel",
  30. title: "南方",
  31. height: 40
  32. }]
  33. });
  34. me.callParent(arguments);
  35. }
  36. });
建立主控制器:app/luter/controller/MainController.js

</>复制代码

  1. Ext.define("luter.controller.MainController", {
  2. extend: "Ext.app.Controller",
  3. views: ["main.ViewPort"],//默认views会寻找项目目录下的view目录,也就是会扫描到app/luter/view了,所以直接下下级路径即可。
  4. stores: [],
  5. init: function (application) {
  6. var me = this;
  7. this.control({
  8. "viewport": {//监听viewport的初始化事件,可以做点其他事情在这里,如有必要,记得viewport定义里的alias么?
  9. "beforerender": function () {
  10. console.log("viewport begin render at:" + new Date());
  11. },
  12. "afterrender": function () {
  13. console.log("viewport render finished at:" + new Date());
  14. },
  15. }
  16. });
  17. }
  18. });

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

修改app入口: app/luter/app.js

</>复制代码

  1. /**
  2. * 设置Extjs的动态加载路径
  3. */
  4. Ext.Loader.setConfig({
  5. enabled: true,
  6. paths: {
  7. "Ext": "app/vendor/extjs/6.0.0",
  8. "Ext.ux": "app/vendor/extjs/6.0.0/ux"
  9. }
  10. });
  11. /**
  12. * 是否开启url缓存,就是xxx.com?_dc=123123123123类似这种
  13. */
  14. Ext.Ajax.disableCaching = false;
  15. /**
  16. * 初始化工具提示
  17. */
  18. Ext.QuickTips.init();
  19. var luterapp;//定义一个全局app对象,便于后续使用
  20. Ext.application({
  21. name: "luter",//这个应用叫啥,其实就是目录名字
  22. /**
  23. * 你把这个应用放哪个目录下了,控制器啊store啊view啥的,在哪里?
  24. * 以后定义一个叫Ext.define("luter.model.Car",{})的时候,其实就是指向了js文件:app/luter/model/Car.js
  25. * requiere就会动态 ajax load这个js下来
  26. */
  27. appFolder: "app/luter",
  28. init: function () {//先初始化
  29. console.log("init")
  30. }, launch: function () {//发射!
  31. console.log("launch")
  32. luterapp = this;
  33. this.loadModule({
  34. moduleId: "MainController"
  35. });
  36. var module = this.getController("MainController");//加载这个控制器
  37. var viewName = module.views[0];//获取到这个控制器里的第一个view名字
  38. var view = module.getView(viewName);//获取到这个view,本质上就是加载js文件
  39. view.create();//创建这个view
  40. },
  41. /**
  42. * 动态加载控制器
  43. * @param config
  44. * @returns {boolean}
  45. */
  46. loadModule: function (config) {
  47. if (!Ext.ClassManager.isCreated(config.moduleId)) {
  48. console.log("controller:" + config.moduleId + " is not load ,now load in.....");
  49. try {
  50. var module = luterapp.getController(config.moduleId);
  51. } catch (error) {
  52. showFailMesg({
  53. msg: ":<> O! No:load module fail,the module object is null." +
  54. "
    maybe :the module is Not available now." +
  55. "
    Error: " + error
  56. });
  57. return false;
  58. } finally {
  59. }
  60. }
  61. }
  62. });

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

通用函数工具类: app/luter/utils.js

</>复制代码

  1. /**
  2. * 操作成功提示
  3. */
  4. function showSucMesg(config) {
  5. Ext.Msg.show({
  6. title: "成功",
  7. msg: config.msg || "",
  8. width: 400,
  9. buttons: Ext.Msg.OK,
  10. icon: Ext.MessageBox.INFO,
  11. fn: config.fn || ""
  12. });
  13. }
  14. /**
  15. * 操作失败提示
  16. */
  17. function showFailMesg(config) {
  18. Ext.Msg.show({
  19. title: config.title || "失败",
  20. msg: config.msg || "",
  21. width: 450,
  22. buttons: Ext.Msg.OK,
  23. icon: Ext.MessageBox.ERROR,
  24. fn: config.fn || ""
  25. });
  26. }

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

修改入口html: app/app.html

</>复制代码

  1. <span class="hljs-selector-tag">EXTJS6</span><span class="hljs-selector-class">.2</span><span class="hljs-selector-class">.0MVC</span>
至此,没什么意外的话,应该是可以看到界面了!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/92683.html

相关文章

  • extjs-mvc结构实践(三):完善基本页面

    摘要:上篇实现了基本的代码架构,控制器动态加载功能以及一个基础的页面布局,本节开始,将陆续完善这个页面。页面底部区域,主要显示版权信息等,也可以显示个时间啥的。。。头部和底部定义完毕后,需要在中引入对应位置。 上篇实现了基本的代码架构,控制器动态加载功能以及一个基础的页面布局,本节开始,将陆续完善这个页面。 目标 如前所述,我们的页面包含这么几个区域: header: UI顶部区域,显示系...

    zhkai 评论0 收藏0
  • extjs-mvc结构实践(三):完善基本页面2

    摘要:结构实践三完善基本页面一般经典的后台管理系统,都是左侧菜单右侧结构布局。不免俗,咱也这么实现定义左侧导航菜单新建采用的组件构建一个导航菜单为了显示图标,引入字体图标,在引入引入定义导航菜单数据功能菜单展开节点。 extjs-mvc结构实践(三):完善基本页面2 一般经典的后台管理系统,都是左侧菜单右侧tabs结构布局。不免俗,咱也这么实现! 定义左侧导航菜单 新建:app/luter/...

    X1nFLY 评论0 收藏0
  • extjs-mvc结构实践(一):搭建基础架构

    摘要:今天开始,一点点记录一下使用搭建一个基础结构的过程。没办法,记性差这种结构的前端,主要是面向后台信息管理系统,可以最大限度的规范前端代码结构和数据结构。 今天开始,一点点记录一下使用extjs6.2.0搭建一个基础MVC结构的过程。没办法,记性差:)这种结构的UI前端,主要是面向后台信息管理系统,可以最大限度的规范前端代码结构和数据结构。做网站 或者手机端,这种方式全引入了extjs,...

    kamushin233 评论0 收藏0
  • extjs-mvc结构实践(四):导航菜单与控制器模块联动

    摘要:根据模块创建模块失败。在中,我们配置了标明了这是一个控制器模块,点击后会去触发控制器加载动作。正常情况下同一个模块的只加载一次。 前面几篇文档,我们基本实现了一个静态的extjs页面,本篇开始,实现左侧导航树与右侧内容的联动,也就是点击导航菜单,加载对应模块页面和业务逻辑,实现js文件的按需加载。 业务需求是这样的: 左侧的treelist,当点击某个节点的时候,系统根据tree数据里...

    figofuture 评论0 收藏0
  • extjs-mvc结构实践(五):实现用户管理的增删改查

    摘要:而且上一篇文章中,也已经实现了一个基本的用户管理列表页面。接着上一篇,完善用户管理,实现增删改。为了用户体验,增加和修改用户信息的表单,都放在弹窗中进行。 经过前面几篇文章的介绍,一个基本的MVC结构应该是具备了。而且上一篇文章中,也已经实现了一个基本的用户管理列表页面。接着上一篇,完善用户管理,实现增删改。为了用户体验,增加和修改用户信息的表单,都放在弹窗中进行。避免跳转页面。 定义...

    wendux 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<