EXT--Ext.data.TreeStore階層非同期ロードツリーノードの例
4638 ワード
開発者ブログ:www.developsearch.com
Ext.data.TreeStoreリモート・ローディング・ツリー・ノードには、階層ローディングと全体ローディングの2つの一般的な方法があります.構造が複雑なデータ量の大きいツリー構造では、階層型ロードを使用すると、プログラムの応答速度が大幅に向上し、ユーザー体験が向上します.クライアント:
サーバ側:treeServer.jsp
開発者ブログ:www.developsearch.com
Ext.data.TreeStoreリモート・ローディング・ツリー・ノードには、階層ローディングと全体ローディングの2つの一般的な方法があります.構造が複雑なデータ量の大きいツリー構造では、階層型ロードを使用すると、プログラムの応答速度が大幅に向上し、ユーザー体験が向上します.クライアント:
<%@ 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="styles.css">
-->
<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
開発者ブログ:www.developsearch.com