PDA

View Full Version : How do I auto expand/auto select added node when adding nodes to ExtJS 4.2 treepanel?



xjscrafter
31 Jan 2014, 10:35 PM
The sample code provided is for an ExtJS 4.2 treepanel. If you click the buttons, an Ajax call to PHP adds a node to the tree.

The tree starts out with all folders closed.

I'm wondering how to approach auto selecting the added node, and auto expanding its parent if necessary to show the selected, newly added node. Currently adding a node and refreshing the data causes the tree to return to its initial state, which is all folders closed.

If the user happens to expand some nodes before adding the nodes, I want to remember the tree state, and also auto select the newly selected node, expanding the parent if necessary.

I tried this plugin but it just did not work:
https://github.com/AlexTiTanium/ExtJsStatefulTree

Sorry for the multiple data files at the end. I could not figure out how to update JSON in PHP.


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" }
]
}
]
}]

xjscrafter
1 Feb 2014, 12:20 PM
Can anybody shed light on this?

mitchellsimoens
6 Feb 2014, 12:51 PM
If you need to expand a node, you can do it various ways. Return expanded in your data (optimal) or execute expandPath. If you have a node, you can use the select method on the selection model.