TreePanel reload / refresh. Final answer please!

[SimonCVT]

Hi,

I've now been struggling for literally weeks with this one!

I've seen hundreds of examples of apparently how to do this, but none of them seem to work, reload functions don't exist, load functions clear my entire tree ( and infact post destroy requests back to my php and actually delete records!)

It feels as if its a very simple requirement and I can't find any examples or explainations that work for me.

My problem is as follows;

I have a tree panel that sits on a DataStore that contains Models. The Model contains a proxy to perform all CRUD operations via php POST and GET requests. They contain all the necessaryu fields for the NodeInterface

I want the user to be able to add nodes to the tree, update those nodes ( change the caption ) delete the nodes and finally refresh these nodes.

I'm using a controller to handle the different button presses for each function. On the "create" function this opens a dialog to allow settings to be changed. So far so good.

However firstly I found that if i tried to add a node and then attempted to update that same node (save function) once my Dialog box had its "Save Changes" button clicked save function, I ended up with 2 folder icons, one next to the other. Almost as if the node had loaded over the top of itself! very wierd and looking for all the world like a bug.

I fixed this by only saving the Node after inserting all the data into the form, save changes writing the model, rather than updating it. This means that I'll be unable to update the node as I'll need to in the future but worked for now!

Deleting the node, very easy! destroy the model instance and the node disappears and php destroy is fired. All fantastic.

So moved on to refresh. All examples talk about a treeloader, well my treeLoader() function returns null. Finally i found a method that appeared to work, but upon calling the load method on my store, it sends destroy events down my proxy and clears out all child children from the database!

Like i say i've tried many different methods found in the forums, too many to list all my attempts.

Does anyone have a working example of adding deleting and refreshing a treePanel using an MVC model which pesists the data to the server?

Please please please help! I'm pretty desperate! I'm at the point of throwing in ExtJS as without a working treePanel the framework is pretty useless for my project.

Thanks in advance.

[SimonCVT]

OK, It looks from the release notes of 4.1 Beta that there are some issues with TreeStores and TreePanels in that 4.0.7. So upgrading to 4.1 beta may resolve my issues,

However now all I get before I can start looking at my application code is Cannot read property 'isNode' of undefined I'm assuming here looking at the code this is to do with decoration of my Tree Model with the NodeInterface.

Can anyone help with this problem at alll?

[SimonCVT]

It turned out that as I was defining the root node within the actual tree and NOT the TreeStore, the root node was not being created as a Container class ( i.e. My Model) and was instead just automatically defining a generic NodeInterface instance to hold this item!<br><br>This meant that when I came to add my model instances they where not being decorated with the NodeInterface features and therefore this was causing me untold issues.<br><br>In the end moving the root declaration into the treeStore at initialisation and simply calling;<br><br>
Ext.getStore('TreeContainer').load(); <br><br>resolved my refresh issues as well as my attempts at appending children to the rootNode and then saving them, works fine!<br><br>My issue above was caused as I attempted to manually decorate the new Models as they where not being decorated correctly.<br>

My final store declaration :

Ext.define('AdministrationConsole.store.TreeContainer', {
extend : 'Ext.data.TreeStore',
requires:['AdministrationConsole.model.Container'],
model:'AdministrationConsole.model.Container',
root : {
text : 'New Folder',
description : 'None',
itemtype : 'file',
id:'root_item'

},
init: function()
{
var record = Ext.create('app.model.Container', {
text : 'New Folder',
description : 'None',
itemtype : 'file'

});
//this.setRootNode(record);
}
});