extjs-mvc结构实践(一):搭建基础架构

kamushin233 发布于2019-08-22 13:57 / 1216人阅读

摘要：今天开始，一点点记录一下使用搭建一个基础结构的过程。没办法，记性差这种结构的前端，主要是面向后台信息管理系统，可以最大限度的规范前端代码结构和数据结构。

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

目标

左侧导航菜单+中间多页面布局，有header 有footer,SPA应用

js文件动态加载、模块动态化按需加载

尽量多写点注释信息，哎，不得不说，还是....代码隔三日，如隔三秋啊！

开始.....

选个开发工具

结论:webstorm最新版。
比较了vscode 、sublime等等。最终选择了webstorm,咋办呢？idea的脑残粉，java开发一直用，习惯了，中毒太深。

extjs库准备

去官网下载一个gpl版本的压缩包,下载extjs.或者:extjs6.2.0度娘

新建一个目录extjs/6.2.0/拷贝相关目录和文件到这个目录下，具体是:

ext-all.js
build/classic/下面所有
build/packages/ux/classic/下面所有。
最终，看起来貌似如下：

建立项目

这个就不多说了，直接上图

目录和文件说明：
app/luter:extjs的app文件放这里，名字随意，随后会在入口app.js中配置动态加载路径用到
app/resource/css:放一些自定义样式
app/resource/images:放图！
app/vendor/:放第三方库

新建入口html




    
    EXTJS6.2.0MVC

至此，基础骨架搭建完毕。

云服务器 GPU云服务器从云计算基础架构到最佳实践搭建服务器基础架构架构实践物联网架构实践

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

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

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

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

zhkai 2019-08-22 13:57 评论0 收藏0
extjs-mvc结构实践(二):基本页面

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

changfeng1050 2019-08-22 13:57 评论0 收藏0
extjs-mvc结构实践(三):完善基本页面2

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

X1nFLY 2019-08-22 13:58 评论0 收藏0
extjs-mvc结构实践(四):导航菜单与控制器模块联动

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

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

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

wendux 2019-08-22 13:58 评论0 收藏0