Extjs MVC模式前台代码组织结构
1、我们这个项目用MVC控制我们的index.jsp页面,创建完相关文件后结构如下:
2、app.js作为我们单个页面的资源文件引进index.jsp中,然后在app.js文件中添加如下代码:
app.js
1 Ext.Loader.setConfig({enabled:true});//开启动态加载 2 Ext.application({ 3 name: 'MVC', 4 5 appFolder: 'mvc', 6 7 controllers: ['MVCS'], 8 9 launch: function() { 10 Ext.create('Ext.container.Viewport', { 11 layout: 'fit', 12 items: [ 13 { 14 xtype: 'panel', 15 title: 'Users', 16 html : 'List of users will go here' 17 } 18 ] 19 }); 20 } 21 });
!!!!记住开启动态加载,ext默认是不开启的,否则extjs无法识别MVC模式,既找不到我们定义的类和方法。
app.js中appFolder为我们MVC模式的根文件夹,name为它的别名,我们在项目中用name别名,我门定义的类以此别名开头,如MVC.controller.MVCS,那么我门如果在app.js中用controller['MVCS']属性,extjs就会动态的到mvc文件夹下的controller文件夹找到MVCS文件,并加载。
3、我门在controller中创建controller文件,controller文件用来控制我们页面的事件,包括数据请求,响应事件等,当前先保证controller类可以呗找到,添加如下代码:
Ext.define( 'MVC.controller.MVCS' , { extend: 'Ext.app.Controller' , init: function () { console.log( '测试controller文件是否找到!' ); } }); |
我们打开开发工具,controller会输出一条语句,如果我们看到了表明我们的MVC创建成功了。
4、部署项目,启动浏览:效果如下:
我们的controller已经起作用了,在其中写我们的控制方法就可以实现控制我们页面,下一篇写一下controller中的一些方法。
PS:view层和modal层也是通过这种方式融入到我们的代码中。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 数据库服务器 SQL Server 版本升级公告
· 程序员常用高效实用工具推荐,办公效率提升利器!
· C#/.NET/.NET Core技术前沿周刊 | 第 23 期(2025年1.20-1.26)