深入剖析ExtJS 2.2实现及应用连载(6):ExtJS实例概述
第2章ExtJS入门实例
深入剖析ExtJS 2.2实现及应用连载 版权所有，谢绝转载 作者：彭仁夔 QQ：546711211
本章通过一个简单实例展现ExtJS的应用。通过这个实例，读者可以快速了解并使用Ext。本实例麻雀虽小，五脏既全。它涉及到ExtJS的大部分功能，能向读者展现ExtJS开发的方便及其或功能的强大。通过本实例，读者能快速进入ExtJSs的开发领域。
本章主要内容：
u ExtJS Panel的使用
u ExtJS事件的使用
u ExtJS的Tree的使用
u ExtJS的Layout的使用
u ExtJS的Grid的使用
2.1概述
了解一个框架，最好的方法是通过一个完整的实例把所有的知识点都融入其中。办公系统是大家都比较熟悉的B/S系统，笔者计划通过它贯串本书始终，通过该系统来一步步地讲解和剖析Ext的开发及应用。
本章的实例是一个入门实例，但是又要用轮廓去了解一下Ext的主要功能。众多书籍都是以Hello world做为快速入门的实例，但是它很难演示框架的整体功能。本章将通过搭建办公系统的主要轮廓让读者快速了解Ext的全貌并能把Ext投入使用。
办公系统中什么功能即既简单，又能大致介绍Ext的功能的呢？对于B/S系统来讲，登陆页面和主框架页面都是必不可少的内容。同时这一部分又是大家最常见的部分。本章就E通过Ext来编写登陆页面进入主框架页面的功能来展现一下Ext的使用。
本实例分成三个部分，第一部分是登录页面的实现，第二部分是主框架页面的实现。第三部分是人员管理的页面的实现。这三个部分的实现能，能总体上了解Ext的使用。
这个例子覆盖面很广，读者可以跟着一步一步地去实现。对于对JS刚入门的者而言，也不必担心对本章内容的一知半解。跟着做完了这个例子，然后学习之后的章节，再回过头来。
2.2准备工作
Eclipse是开发中最常用的工具，这里我们就采用Eclipse3.2做为开发工具。为了能直接在Eclipse环境中运行或调试，我们需要装上Tomcat插件,它可以到http://www.sysdeo.com/ 中去下载。把Tomcat插件包拷到eclipse目录下plugins文件夹中去，然后重启Eclipse，你就会发现其工具栏上多了三个Tomcat的图标。对于Tomcat插件还需要配置，在这里不多重复，详细见光盘中的讲解。
配置完成之后接下就可以通过文件—>新建—>项目，这时会弹出一个面板，在该面板中输入项目名：demo，之后就可以下一步一步采用默认是方式去生成一个项目。在这个demo项目，我们先把extjs整个文件夹都拷到这项目的根目录下。
为了使用项目的目录层次明了，我们还要建几个子文件，其javascript文件夹就是存放该项目的JS文件。pic文件夹是存放图片目录。如下图：
为了使用项目运行起来，我们还是要在web-inf文件夹新建一个web.xml的配置文件，该文件可以只是简单的内容，在这里为了能使用编码统一，我们在这里采用统一的UTF-8的过滤实现。
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
version="2.4">
<filter>
<filter-name>encodingfilter</filter-name>
<filter-class>com.morik.util.EncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>encodingfilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
</web-app>
它会把所有的传输都会过滤为UTF-8的格式，我们看到这里引用了com.morik.util.EncodingFilter类，这是一个很简单的过滤的实现。其源码可以在网上随意找到或自行实现。接下来我们就在web-inf/src的源文件下新建com.morik.util包，在这个包下新建EncodingFilter类。其源码见光盘。
现在整个项目就可以运行起来了，只要我们点击工具栏中的第一个启动Tomcat的图标就会启动该项目，接下的任务就是在浏览器输入http://localhost:8080/demo/test.jsp就可以看到网页的效果。这里是采用了test.jsp做一个测试，可以换成任意的已实现的页面文件。
