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

tesia

浏览: 33411 次
性别:
来自: 广州

最近访客更多访客>>

akingde

bweird

Copperfield

alwaysonline

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ExtJs

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

查看图片附件

分享到：

Date类学习总结 | Ext.Ajax.request提交JSON数据

2013-07-10 15:36
浏览 2073
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论