ExtJS4.0学习心得

学习ExtJs4.0知识已有一个月的时间，结合模拟项目——资源池管理系统，谈一谈学习中碰到的问题，解决办法以及收获的经验，希望可以达到互相交流、学习、共成长的目的。
ExtJs4.0不同于3.0版本的最重要改变是MVC模式的引入。本文也以MVC模式为切入点，开始介绍我的ExtJs4.0之旅。
一、SSH框架搭建后台
模拟项目采用了SSH搭建后台，数据库采用Oracle9i，前台可通过action将封装好的json数据进行读取等操作，具体构建细节此文不介绍，测试用数据如下表：
PID ID TEXT LEAF PIDS
1 　 基本信息 FALSE 0
2 　 人员信息 TRUE 1
3 　 日常工作 FALSE 0
......
22 　 Grid示例 TRUE 21
23 　 权限管理 TRUE 5
24 　 角色管理 TRUE 5
25 test 测试页面 TRUE 21
  Res.app.store.Tree数据
ID UNAME UPASSWORD XB XM AIH   ADDSDATAS
123  admin   admin  男 3 　  sfsf  2011-10-3
124  3    3   男 3 篮球, 足球 3  2011-10-6
Res.app.store.leaf.Test数据

二、建立文件结构
首先，按照API文档MVC模式介绍File Structure中的图示，建立模拟项目的文件结构，如图1所示。

三、页面代码
完成index.jsp代码的编写，主要完成页面编码格式定义，ExtJs4.0样式、库文件引入，引入该页面需要加载的js文件。
<!--页面编码定义，考虑到中文输出，一般采用utf-8编码格式。 --> 
<%@ page language="java"pageEncoding="utf-8"%>
<!-- ExtJs4.0样式、类库导入。需要注意的是：ext-all.js（压缩后的Ext全部源码）和ext-all-debug.js（用于调试的无压缩Ext全部源码）只用导入一个即可。曾碰到在开发中若同时导入，在使用时出现异常的情况。--> 
<link rel="stylesheet"type="text/css"href="<%=basePath%>ext4/resources/css/ext-all.css">
<script type="text/javascript"src="<%=basePath%>ext4/ext-all.js"></script>
<!--引入该页面需要加载的js文件。--> 
<script type="text/javascript" src="app.js"></script>

四、Js部分代码
1.应用部分js代码(app.js)
该js代码段主要完成加载模式，命名空间，控制器的定义，组织起应用结构，通过Res.controller.Main控制器，利用别名将视图以“border”的布局方式渲染。
Ext.Loader.setConfig({enabled:true});//开启ExtJs4.0自动加载模式。
Ext.application({
name:'Res',//命名空间的名称，首字母大写，也可全部大写，不能与控制器重名。
appFolder:'app',//指定应用文件包名，与项目中一致，使用小写。
controllers:['Main'],//指定控制器，可以有多个，用’,’分隔，控制器名是controller目录下的js文件名。
    /**创建底层视图，并通过别名将各部分视图以border布局方式渲染*/
    launch:function(){
       Ext.create('Ext.container.Viewport',{
           layout:'border',
           items:[
               {xtype:'header'},
               {xtype:'menutree'},
               {xtype:'south'},
               {xtype:'tabpanel'}
           ]
        });