求大神们给个EXT4.0的动态tree的示例！该怎么解决
日期：2014-05-16 浏览次数：20711 次
求大神们给个EXT4.0的动态tree的示例！
如题。。
求会extjs4.0的大神们给个动态tree的示例。。
希望详细点。~!
------解决方案--------------------
http://www.uspcat.com/portal.php
你需要的答案在这里！！
------解决方案--------------------
ext\examples
------解决方案--------------------
ext doc
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="ext-4/resources/css/ext-all.css" />
<link rel="stylesheet" href="ext-4/resources/css/xtheme-gray.css" />
<script type="text/javascript" src="ext-4/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-4/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var root=new Ext.tree.TreeNode({text:"root"});
var node2=new Ext.tree.TreeNode({text:"根节点2"});
var node3=new Ext.tree.TreeNode({text:"根节点3"});
var node4=new Ext.tree.TreeNode({text:"根节点4"});
var node1=new Ext.tree.TreeNode({text:"根节点1"});
node2.appendChild(node3);
node2.appendChild(node4);
root.appendChild(node2);
root.appendChild(node1);
var tree2=new Ext.tree.TreePanel({
title:"自定义数据",
width:300,
height:720,
//containerScroll:false,
enableDD: false,
frame:true,
draggable:false,
el:"tree"
});
tree2.setRootNode(root);
tree2.render();
tree2.expandAll();
tree2.on('contextmenu', menuShow);
var selectNode;
function menuShow ( node ) {
treeRightMenu.show(node.ui.getAnchor());
node.select();//让右击是选中当前节点
selectNode=node;
};
var treeRightMenu = new Ext.menu.Menu({
id: 'treeMenuContext',
items: [
{text: '添加子节点',handler:function(){
addNode();
}
},{text: '重命名',handler:function(){
rename();
}
},{text: '删除',handler:function(){
deleteNode();
}
}]
});
function addNode(){
Ext.MessageBox.prompt('添加子节点', '请填写分类名称:',
function(btn, text){
if(btn == 'ok') {
var input = text;
if((input != '') && (input != null)) {
selectNode.appendChild(new Ext.tree.TreeNode({text:input}));
}
}
}
);
}
function deleteNode(){
Ext.MessageBox.confirm('确认删除', '确认删除此分类？删除后此类别下的所有商品将被删除！',
function(btn){
if(btn == 'yes') {
selectNode.remove();
}
}
);
}
function rename(){
Ext.MessageBox.prompt('重命名', '请填写分类名称:',
function(btn, text){
if(btn == 'ok') {
var input = text;
if((input != '') && (input != null)) {
//alert(selectNode.text);
selectNode.setText(input);
}
}
}
);
}
});
</script>
</head>
如题。。
求会extjs4.0的大神们给个动态tree的示例。。
希望详细点。~!
------解决方案--------------------
http://www.uspcat.com/portal.php
你需要的答案在这里！！
------解决方案--------------------
ext\examples
------解决方案--------------------
ext doc
------解决方案--------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="ext-4/resources/css/ext-all.css" />
<link rel="stylesheet" href="ext-4/resources/css/xtheme-gray.css" />
<script type="text/javascript" src="ext-4/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-4/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var root=new Ext.tree.TreeNode({text:"root"});
var node2=new Ext.tree.TreeNode({text:"根节点2"});
var node3=new Ext.tree.TreeNode({text:"根节点3"});
var node4=new Ext.tree.TreeNode({text:"根节点4"});
var node1=new Ext.tree.TreeNode({text:"根节点1"});
node2.appendChild(node3);
node2.appendChild(node4);
root.appendChild(node2);
root.appendChild(node1);
var tree2=new Ext.tree.TreePanel({
title:"自定义数据",
width:300,
height:720,
//containerScroll:false,
enableDD: false,
frame:true,
draggable:false,
el:"tree"
});
tree2.setRootNode(root);
tree2.render();
tree2.expandAll();
tree2.on('contextmenu', menuShow);
var selectNode;
function menuShow ( node ) {
treeRightMenu.show(node.ui.getAnchor());
node.select();//让右击是选中当前节点
selectNode=node;
};
var treeRightMenu = new Ext.menu.Menu({
id: 'treeMenuContext',
items: [
{text: '添加子节点',handler:function(){
addNode();
}
},{text: '重命名',handler:function(){
rename();
}
},{text: '删除',handler:function(){
deleteNode();
}
}]
});
function addNode(){
Ext.MessageBox.prompt('添加子节点', '请填写分类名称:',
function(btn, text){
if(btn == 'ok') {
var input = text;
if((input != '') && (input != null)) {
selectNode.appendChild(new Ext.tree.TreeNode({text:input}));
}
}
}
);
}
function deleteNode(){
Ext.MessageBox.confirm('确认删除', '确认删除此分类？删除后此类别下的所有商品将被删除！',
function(btn){
if(btn == 'yes') {
selectNode.remove();
}
}
);
}
function rename(){
Ext.MessageBox.prompt('重命名', '请填写分类名称:',
function(btn, text){
if(btn == 'ok') {
var input = text;
if((input != '') && (input != null)) {
//alert(selectNode.text);
selectNode.setText(input);
}
}
}
);
}
});
</script>
</head>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
