提供的示例代码适用于ExtJS 4.2 treepanel。如果单击按钮，则对PHP的Ajax调用会向树添加节点。
树开始时所有文件夹都已关闭。
我想知道如何自动选择添加的节点，并在必要时自动展开其父节点以显示所选的新添加的节点。当前添加节点并刷新数据会导致树返回其初始状态，即所有文件夹都已关闭。
如果用户在添加节点之前碰巧扩展了某些节点，我想记住树状态，并自动选择新选择的节点，必要时展开父节点。
我尝试过这个插件，但它只是不起作用： https://github.com/AlexTiTanium/ExtJsStatefulTree
抱歉最后有多个数据文件。我无法弄清楚如何在PHP中更新JSON。
function setData(data, scope) {
Ext.Ajax.request({
url: 'data.php',
method: 'POST',
params: {
data: data
},
success: function() {
scope.store.getData(onGetData, scope);
},
failure: function() {
alert('failure');
},
}, scope);
}
function onGetData(store, scope, records, success) {
//alert('here');
};
Ext.onReady(function() {
Ext.create('Ext.tree.Panel', {
title: 'Tree Refresh Example',
itemId: 'treeComp',
width: 300,
height: 350,
store: new SampleTreeData(),
rootVisible: false,
listeners: {
afterRender: function() {
this.store.getData(onGetData, this);
}
},
tbar: ['->', {
xtype: 'button',
text: 'Add Banana',
value: "Banana",
margin: '0 30 0 0',
listeners: {
click: function(comp) {
setData(comp.value, this.up('treepanel'));
}
}
}, {
xtype: 'button',
text: 'Add Cabbage',
value: "Cabbage",
margin: '0 30 0 0',
listeners: {
click: function(comp) {
setData(comp.value, this.up('treepanel'));
}
}
}, {
xtype: 'button',
text: 'Add Yogurt',
value: "Yogurt",
listeners: {
click: function(comp) {
setData(comp.value, this.up('treepanel'));
}
}
}, '->'],
renderTo: 'content'
});
});
Ext.define('SampleTreeData', {
extend: 'Ext.data.TreeStore',
autoLoad: false,
autoSync: false,
proxy: {
type: 'ajax',
url : '',
reader: {
type: 'json',
root: ''
}
},
root: {
expanded: true
},
getData: function(callBack, scope) {
var store = this;
store.proxy.url = 'data.php';
store.load({
scope : scope,
callback : function(records, operation, success) {
if (Ext.isFunction(callBack)) {
callBack(store, scope, records, success);
}
}
});
}
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../../../ext-4.2.2.1144/resources/css/ext-all.css" />
<script type="text/javascript" src="../../../../ext-4.2.2.1144/ext-all-debug.js"></script>
<script type="text/javascript" src="refresh1.js"></script>
<script type="text/javascript" src="SampleTreeData.js"></script>
</head>
<body style="width: 100%; height: 100%; margin: 0px; padding: 0px; background-color: #89E5BD;">
<div id="content" style="margin: auto; width: 500px; height: 500px;"/>
</body>
<?php
$logref = fopen('data.log', 'w');
fwrite($logref, "Entered script.\n");
if(isset($_POST['data'])){
fwrite($logref, $_POST['data'] . "\n");
if($_POST['data'] == 'Banana') {
$newdata = file_get_contents("banana.json");
} else if($_POST['data'] == 'Cabbage') {
$newdata = file_get_contents("cabbage.json");
} else if($_POST['data'] == 'Yogurt') {
$newdata = file_get_contents("yogurt.json");
}
file_put_contents("data.json", $newdata);
echo 'success';
}else {
fwrite($logref, "getData\n");
$data = file_get_contents("data.json");
echo $data;
}
fclose($logref);
?>
---------------- initial tree data --------------
[{
text: "Tree Root",
expanded: true,
children: [
{
text: "Fruits",
children: [
{ leaf:true, text: "apple" },
{ leaf:true, text: "orange" }
]
},
{
text: "Vegetables",
children: [
{ leaf:true, text: "carrot" },
{ leaf:true, text: "beet" }
]
},
{
text: "Dairy",
children: [
{ leaf:true, text: "milk" },
{ leaf:true, text: "cheese" }
]
}
]
}]
----------- data if Banana is clicked -----------
[{
text: "Tree Root",
expanded: true,
children: [
{
text: "Fruits",
children: [
{ leaf:true, text: "apple" },
{ leaf:true, text: "orange" },
{ leaf:true, text: "banana" }
]
},
{
text: "Vegetables",
children: [
{ leaf:true, text: "carrot" },
{ leaf:true, text: "beet" }
]
},
{
text: "Dairy",
children: [
{ leaf:true, text: "milk" },
{ leaf:true, text: "cheese" }
]
}
]
}]
----------- data if cabbage is clicked --------
[{
text: "Tree Root",
expanded: true,
children: [
{
text: "Fruits",
children: [
{ leaf:true, text: "apple" },
{ leaf:true, text: "orange" }
]
},
{
text: "Vegetables",
children: [
{ leaf:true, text: "carrot" },
{ leaf:true, text: "beet" },
{ leaf:true, text: "cabbage" }
]
},
{
text: "Dairy",
children: [
{ leaf:true, text: "milk" },
{ leaf:true, text: "cheese" }
]
}
]
}]
----------- data if yogurt is clicked -------
[{
text: "Tree Root",
expanded: true,
children: [
{
text: "Fruits",
children: [
{ leaf:true, text: "apple" },
{ leaf:true, text: "orange" }
]
},
{
text: "Vegetables",
children: [
{ leaf:true, text: "carrot" },
{ leaf:true, text: "beet" }
]
},
{
text: "Dairy",
children: [
{ leaf:true, text: "milk" },
{ leaf:true, text: "cheese" },
{ leaf:true, text: "yogurt" }
]
}
]
}]
答案 0 :(得分：0)
您需要重新加载树吗？您是否在每个ajax上保存服务器端的数据？根据答案，我会以不同的方式解决这个问题。
您无需重新加载。数据属于当前用户，但您必须存储其状态 a）根本不要重装。让ExtJs将节点添加到树中，您可以继续扩展它。让您的ajax调用更新服务器端数据，但不要重新加载树。缺点：如果您有错误，服务器和客户端不保证完全相同 b）让ExtJs将节点添加到树中，并且可以保持它的扩展。操作期间不要保存到服务器，但在完成编辑后保存新结构。
您需要重新加载，因为在用户编辑时，树可能会在服务器上发生变化（如独立用户之间的并发更新）。
a）我认为在这种情况下，您可以通过向节点添加expanded: true将树状态发送到服务器并从那里恢复。
例如，当点击banana时，让服务器返回：
[{
text: "Tree Root",
expanded: true,
children: [
{
text: "Fruits",
children: [
{ leaf:true, text: "apple" },
{ leaf:true, text: "orange" },
{ leaf:true, text: "banana", expanded: true }
],
expanded: true
},
{
text: "Vegetables",
children: [
{ leaf:true, text: "carrot" },
{ leaf:true, text: "beet" }
]
},
{
text: "Dairy",
children: [
{ leaf:true, text: "milk" },
{ leaf:true, text: "cheese" }
]
}
]
}]