ExtJS学習ノート2 TreeのTreepanel使用
5983 ワード
最近extjsを勉強して1つの問題を発見して、extjsは1つのJavaScriptのフレームワークで、フロントエンドのページの上に属して、すべて完全に明後日の言語と分離することができて、みんなはextjsの公式の例の中ですべてhtmlのフォーマットを見ることができます.つまりバックグラウンドと結びつけると、何らかの方法でデータを転送したり、何をしたり、いろいろな言語のフレームワークを加えたりします.単純な問題が複雑化する.
例を通して説明します.
ここでは、いくつかの問題について説明します.
1.treepanelはrender(レンダリング、レンダリング)の前にroot(ルート)ノードが必要です.rootプロパティとsetRootNodeメソッドを構成することで実現できます.
2.loader構成オプションにはExt.treeが必要です.TreeLoaderのオブジェクト.
3.treeloaderは、指定したurlからtreenodeをロードする怠け者です.ここで注意すべき点は、1、2つを組み合わせると、必ずrootノードがあり、loader構成のtreeloaderオブジェクトはtreenodeのサブノードをロードするので、必ずrootノードを設定することです.
4.応答はJavaScript配列を返します.たとえば
私のバックグラウンドはJavaで書かれたservletです.
スタティツクツリー
例を通して説明します.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Virgo_S</title>
<link rel="stylesheet" type="text/css" href="extjs/ext-all.css"/>
<script type="text/javascript" src="extjs/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var Tree = Ext.tree;
// Loader
var treeloader=new Tree.TreeLoader({
dataUrl:'TreeServlet' // URL
});
//
var rootnode=new Tree.AsyncTreeNode({
id:'1',
text:' '
});
var treepanel = new Tree.TreePanel({
//renderTo:"tree_div",
// renderTo， setRootNode() ， TreePanel root 。
el:'tree', //
rootVisible:true, //
border:true, //
animate:true, //
autoScroll:true, //
enableDD:false, //
containerScroll:true,
//root:rotnode, // root ，
// root， setRootNode
loader:treeloader
});
//
//treepanel.setRootNode(rootnode);
// ， node
treepanel.render();
rootnode.expand(false,false);
});
</script>
</head>
<body>
<div id="tree" style="height:500px;width:500px;"></div>
</body>
</html>
ここでは、いくつかの問題について説明します.
1.treepanelはrender(レンダリング、レンダリング)の前にroot(ルート)ノードが必要です.rootプロパティとsetRootNodeメソッドを構成することで実現できます.
2.loader構成オプションにはExt.treeが必要です.TreeLoaderのオブジェクト.
3.treeloaderは、指定したurlからtreenodeをロードする怠け者です.ここで注意すべき点は、1、2つを組み合わせると、必ずrootノードがあり、loader構成のtreeloaderオブジェクトはtreenodeのサブノードをロードするので、必ずrootノードを設定することです.
4.応答はJavaScript配列を返します.たとえば
[{
id: 1,
text: 'A leaf Node',
leaf: true
},{
id: 2,
text: 'A folder Node',
children: [{
id: 3,
text: 'A child Node',
leaf: true
}]
}]
私のバックグラウンドはJavaで書かれたservletです.
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String str = "[{'cls':'folder','id':10,'leaf':false,'children':[{'cls':'file','id':11,'leaf':true,'children':null,'text':'S600'},{'cls':'file','id':12,'leaf':true,'children':null,'text':'SLK200'}],'text':'Benz'}]";
response.getWriter().write(str.toString());
}
スタティツクツリー
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Virgo_S</title>
<link rel="stylesheet" type="text/css" href="extjs/ext-all.css" />
<script type="text/javascript" src="extjs/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
//
var root=new Ext.tree.TreeNode({
id:"root",// id
text:" "
});
//
var c1=new Ext.tree.TreeNode({
id:'c1',// id
text:' '
});
var c2=new Ext.tree.TreeNode({
id:'c2',
text:' '
});
var c22=new Ext.tree.TreeNode({
id:'c22',
text:' '
});
root.appendChild(c1);// c1
root.appendChild(c2);// c1 c2， ^_^
c1.appendChild(c22);// c1 c22
//
var tree=new Ext.tree.TreePanel({
renderTo:"tree",
root:root,//
animate:true,//
enableDD:false,//
border:false,//
rootVisible:false// false ， ，
});
});
</script>
</head>
<body>
<div id="tree" style="height: 500px; width: 500px;"></div>
</body>
</html>