Ext.data.TreeStore 分级异步加载树节点示范

2013-07-11

Ext.data.TreeStore分级异步加载树节点示例Ext.data.TreeStore远程加载树节点有两种常用方式，分别是：分级

Ext.data.TreeStore 分级异步加载树节点示例
Ext.data.TreeStore远程加载树节点有两种常用方式，分别是：分级加载和整体加载。
对于结构复杂数据量大的树结构使用分级加载可以极大提高程序响应速度并提升用户体验。

客户端：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>My JSP 'treecolumn.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="ext-all.js" ></script>
    <script type="text/javascript" src="locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
   Ext.onReady(function(){
     //定义数据模型
         Ext.regModel("OrgInfo",{
            fields:['orgId','name','count']
             });
         var myStore=new Ext.data.TreeStore({
              model:'OrgInfo',
              nodeParam:'orgId', //节点参数名
              proxy:{
                 type:'ajax',
                 url:'treestore/treeServer.jsp',
                 reader:'json'
              },
              autoLoad:true,
              root:{
                    name:'根节点',
                   expanded : true,//根节点是否展开
                    id:'-1'
                  }
             });
         Ext.create('Ext.tree.Panel',{
                title:'分级异步加载树节点示例',
                renderTo:Ext.getBody(),
                width:250,
                height:200,
                columns:[{
                  xtype:'treecolumn', //树状表格列
                  text:'公司名称',
                  dataIndex:'name',
                  width:150,
                  sortable:true
                    },
                    {
                   text:'员工人数',
                   dataIndex:'count',
                   flex:1,
                   sortable:true
                        }],
                      store:myStore,
                      rootVisible:false //,隐藏根节点
                     //useArrows:true
             });
   });
</script>
</head>

<body>

</body>
</html>

服务器端：treeServer.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String orgId=request.getParameter("orgId");
String result="";
if("-1".equals(orgId)){
result="[{name:'总公司',count:100,id:100}]";
}else if("100".equals(orgId)){
    result="[{name:'分公司一',count:20,id:110},{name:'分公司二',count:80,id:120}]";
}else if("120".equals(orgId)){
    result="[{name:'部门一',count:30,id:121,leaf:true},{name:'部门二',count:50,id:122,leaf:true}]";
}
response.getWriter().write(result);
%>

注：所有示例来自《ExtJS Web 应用程序开发指南》第2版
这是第13章，开始没有得到想要的效果。后来问了其他朋友才知道少了
expanded : true,这行代码，没有默认展开根节点。

如果加上 useArrows:true 在树节点中使用箭头，效果如图usearrow.jpg

热点排行

Web前端

Ext.data.TreeStore 分级异步加载树节点示范