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文件中些如下代码：

<script>
Ext.onReady(function(){
    
    Ext.create('Ext.container.Viewport', {
        layout: 'border',
        items: [{
            region: 'north',
            autoHeight: true,
            border: false,
            margins: '0 0 5 0'
        }, {
            region: 'west',
            collapsible: true,
            title: 'Navigation',
             150
            // could use a TreePanel or AccordionLayout for navigational items
        }, {
            region: 'south',
            title: 'South Panel',
            collapsible: true,
            html: '这里显示信息',
            split: true,
            height: 100,
            minHeight: 100
        }, {
            region: 'east',
            title: 'East Panel',
            collapsible: true,
            split: true,
             150
        }, {
            region: 'center',
            xtype: 'tabpanel', // TabPanel itself has no title
            activeTab: 0,      // First tab active by default
            items: {
                title: 'Default Tab',
                html: 'The first tab\'s content. Others may be added dynamically'
            }
        }]
    });
})
</script>

效果图： 

-------------------------------------------------------------

这样，开发环境搭建起来了，下一篇介绍mvc的具体规范。