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的具体规范。

posted @   Alexander.liu  阅读(1592)  评论(0编辑  收藏  举报
编辑推荐:
· 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)
点击右上角即可分享
微信分享提示