返回深入学习ExtJS 2.2开发系列连载教程目录
本章通过一个简单实例展现ExtJS的应用。通过这个实例,读者可以快速了解并使用Ext。本实例麻雀虽小,五脏既全。它涉及到ExtJS的大部分功能,能向读者展现ExtJS开发的方便及其或功能的强大。通过本实例,读者能快速进入ExtJSs的开发领域。
本章主要内容:
ExtJS Panel的使用
ExtJS事件的使用
ExtJS的Tree的使用
ExtJS的Layout的使用
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文件夹是存放图片目录。如下图: