Extjs MVC模式前台组织结构
从最简单的写起,我也好长时间没用extjs了,但是不舍得扔了,正好写几篇文章回忆一下吧。
1、首先当然是倒入extjs的文件了,然后项目整体结构如下:
2、在webcontent下创建mvc文件,这样extjs可自动查找相应的文件。
3、编辑index.jsp, 在文件中倒入如下两个文件:
<link rel="stylesheet"type="text/css"href="extjs-4.1.0/resources/css/ext-all.css">
<script type="text/javascript"src="extjs-4.1.0/ext-all-debug.js"></script>
4、测试一下:在index.jsp文件中些如下代码:
index.jsp
1 <script> 2 Ext.onReady(function(){ 3 4 Ext.create('Ext.container.Viewport', { 5 layout: 'border', 6 items: [{ 7 region: 'north', 8 autoHeight: true, 9 border: false, 10 margins: '0 0 5 0' 11 }, { 12 region: 'west', 13 collapsible: true, 14 title: 'Navigation', 15 width: 150 16 // could use a TreePanel or AccordionLayout for navigational items 17 }, { 18 region: 'south', 19 title: 'South Panel', 20 collapsible: true, 21 html: '这里显示信息', 22 split: true, 23 height: 100, 24 minHeight: 100 25 }, { 26 region: 'east', 27 title: 'East Panel', 28 collapsible: true, 29 split: true, 30 width: 150 31 }, { 32 region: 'center', 33 xtype: 'tabpanel', // TabPanel itself has no title 34 activeTab: 0, // First tab active by default 35 items: { 36 title: 'Default Tab', 37 html: 'The first tab\'s content. Others may be added dynamically' 38 } 39 }] 40 }); 41 }) 42 </script>
效果图:
-------------------------------------------------------------
这样,开发环境搭建起来了,下一篇介绍mvc的具体规范。
【推荐】编程新体验,更懂你的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)