从最简单的写起,我也好长时间没用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文件中些如下代码:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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 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 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的具体规范。