【发布时间】：2014-02-01 06:40:57
【问题描述】：
提供的示例代码用于 ExtJS 4.2 树形面板。如果单击按钮，则对 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" }
]
}
]
}]
【问题讨论】：