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 @ 2012-11-01 12:59  Alexander.liu  阅读(1592)  评论(0)  编辑  收藏  举报