Extjs4.x TreePanel动态加载数据

在现实Ext开发中，TreePanel加载数据时，当数据量比较庞大，并且是从后台获取时，为了提高效率一般采用动态加载数据的方式！下面采用Ext4.x提供的MVC方式做个下小例子，如下是运行效果！【后台采用了Spring的MVC，因为它用的是注解，注解比较方便，你可以用struts,servlet等都可以！】

如项目结构

Extjs4.x TreePanel动态加载数据

1.首先什么都不用说，先得导入Ext的开发包,我用的是ext-4.2.1,在index.jsp中引入如下文件

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Tree</title>
    <!-- 引入extjs的总体样式 -->
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/ext-4.2.1/resources/css/ext-all.css">
    <!-- 引用公用的extjs -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/ext-4.2.1/bootstrap.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/ext-4.2.1/locale/ext-lang-zh_CN.js"></script>
    <!-- 引用自己编写的js -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/app/App.js"></script>
  </head>
  <body>
  </body>
</html>

View Code