在将节点添加到ExtJS 4.2树面板时，如何自动展开/自动选择添加的节点？
提供的示例代码用于ExtJS 4.2树面板。如果单击按钮，对PHP的Ajax调用将向树中添加一个节点 树从关闭所有文件夹开始 我想知道如何自动选择添加的节点，并在必要时自动扩展其父节点以显示选定的、新添加的节点。当前添加节点并刷新数据会导致树返回其初始状态，即所有文件夹都已关闭 如果用户在添加节点之前展开了一些节点，我希望记住树的状态，并自动选择新选择的节点，必要时展开父节点 我尝试了这个插件，但它不起作用： 很抱歉，结尾有多个数据文件。我不知道如何在PHP中更新JSON在将节点添加到ExtJS 4.2树面板时，如何自动展开/自动选择添加的节点？,extjs,tree,state,extjs4.2,Extjs,Tree,State,Extjs4.2,提供的示例代码用于ExtJS 4.2树面板。如果单击按钮，对PHP的Ajax调用将向树中添加一个节点 树从关闭所有文件夹开始 我想知道如何自动选择添加的节点，并在必要时自动扩展其父节点以显示选定的、新添加的节点。当前添加节点并刷新数据会导致树返回其初始状态，即所有文件夹都已关闭 如果用户在添加节点之前展开了一些节点，我希望记住树的状态，并自动选择新选择的节点，必要时展开父节点 我尝试了这个插件，但它不起作用： 很抱歉，结尾有多个数据文件。我不知道如何在PHP中更新JSON function s
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" }
]
}
]
}]
函数setData（数据，范围）{
Ext.Ajax.request({
url:'data.php'，
方法：“POST”，
参数：{
数据：数据
},
成功：函数（）{
scope.store.getData（onGetData，scope）；
},
失败：函数（）{
警报（“故障”）；
},
}，范围）；
}
功能onGetData（存储、范围、记录、成功）{
//警报（“此处”）；
};
Ext.onReady（函数（）{
Ext.create（'Ext.tree.Panel'{
标题：“树刷新示例”，
itemId:'treeComp'，
宽度：300，
身高：350，
存储：新的SampleTreeData（），
rootVisible:false，
听众：{
afterRender:function（）{
this.store.getData（onGetData，this）；
}
},
tbar:['->'，{
xtype:'按钮'，
文本：“添加香蕉”，
值：“香蕉”，
边距：“0 30 0”，
听众：{
单击：功能（comp）{
setData（comp.value，this.up（'treepanel'））；
}
}
}, {
xtype:'按钮'，
文本：“添加卷心菜”，
价值：“卷心菜”，
边距：“0 30 0”，
听众：{
单击：功能（comp）{
setData（comp.value，this.up（'treepanel'））；
}
}
}, {
xtype:'按钮'，
文本：“添加酸奶”，
价值：“酸奶”，
听众：{
单击：功能（comp）{
setData（comp.value，this.up（'treepanel'））；
}
}
}, '->'],
renderTo:“内容”
});
});
Ext.define（'SampleTreeData'{
扩展：“Ext.data.TreeStore”，
自动加载：false，
自动同步：错误，
代理：{
键入：“ajax”，
url:“”，
读者：{
键入：“json”，
根目录：“”
}
},
根目录：{
是的
},
getData:函数（回调，作用域）{
var-store=这个；
store.proxy.url='data.php'；
存储容量({
范围:范围,，
回调：函数（记录、操作、成功）{
if（Ext.isFunction（回调））{
回调（存储、范围、记录、成功）；
}
}
});
}
});
----------------初始树数据--------------
[{
文字：“树根”，
对,，
儿童：[
{
文本：“水果”，
儿童：[
{leaf:true，文本：“apple”}，
{leaf:true，文本：“橙色”}
]
},
{
正文：“蔬菜”，
儿童：[
{leaf:true，文本：“carrot”}，
{leaf:true，文本：“beet”}
]
},
{
文本：“乳制品”，
儿童：[
{leaf:true，文本：“milk”}，
{leaf:true，文本：“cheese”}
]
}
]
}]
-----------如果单击香蕉，则返回数据-----------
[{
文字：“树根”，
对,，
儿童：[
{
文本：“水果”，
儿童：[
{leaf:true，文本：“apple”}，
{leaf:true，文本：“橙色”}，
{leaf:true，文本：“香蕉”}
]
},
{
正文：“蔬菜”，
儿童：[
{leaf:true，文本：“carrot”}，
{leaf:true，文本：“beet”}
]
},
{
文本：“乳制品”，
儿童：[
{leaf:true，文本：“milk”}，
{leaf:true，文本：“cheese”}
]
}
]
}]
-----------如果单击，则返回数据--------
[{
文字：“树根”，
对,，
儿童：[
{
文本：“水果”，
儿童：[
{leaf:true，文本：“apple”}，
{leaf:true，文本：“橙色”}
]
},
{
正文：“蔬菜”，
儿童：[
{leaf:true，文本：“carrot”}，
{leaf:true，文本：“beet”}，
{leaf:true，文本：“coble”}
]
},
{
文本：“乳制品”，
儿童：[
{leaf:true，文本：“milk”}，
{leaf:true，文本：“cheese”}
]
}
]
}]
-----------单击酸奶时的数据-------
[{
文字：“树根”，
对,，
儿童：[
{
文本：“水果”，
儿童：[
[{
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" }
]
}
]
}]