Load Tree after selection

[GordS]

I have a form panel. In the top bar I have combo selection list. When the user makes the selection I want to create a tree. I know that I need to add a listener to the combo box. The listener is checking for select on the drop down list. I am not sure how to code the loading of the tree.

Here is the code for my top bar where I make my selection.


tbar: [{
xtype: 'tbtext',
text: 'Event:'
}, {
xtype: 'combo',
id: 'EVENT',
fieldLabel: 'Event',
triggerAction: 'all',
emptyText: 'Select Event...',
valueField: 'EMEVENT',
displayField: 'EMNAME',
store: new Ext.data.JsonStore({
url: 'vvcall.pgm',
fields: ['EMEVENT', 'EMNAME'],
root: 'APEVNT',
autoLoad: true,
baseParams: {
action: 'getComboActiveEvent',
pgm: 'apgetcombo'
}
}),
mode: 'local',
editable: true,
listeners: {
select: {
load: (tree,treeRoot,tree)
}
}
}, {
xtype: 'tbfill'
}, {
text: vlit.help,
tooltip: vlit.help,
iconCls: 'help',
handler: function(){
parent.showHelp('/Help/apatransfrhelp.html')
}
}],

Here is my tree.


var tree = new Ext.tree.TreePanel({
id: 'tree',
autoScroll: true,
rootVisible: false,
animate: true,
enableDD: true,
loader: new Ext.tree.TreeLoader({
url: 'vvcall.pgm',
baseParams: {
pgm: 'apatransfr',
action: 'getTreeData',
search: Ext.getCmp('EVENT').getValue()
}
}),
root: {
id: 'treeRoot',
allowDrop: false,
draggable: false,
expandable: true,
expanded: true,
leaf: false
}
});

Thanks in advance.

[GordS]

I changed my listener as follows:


listeners: {
select: function(){
tree.getLoader().load(tree.root);
}
}

It now runs my backend program. But it is not sending back the event that I have selected from my combo box as specified in my loader.


loader: new Ext.tree.TreeLoader({
url: 'vvcall.pgm',
baseParams: {
pgm: 'apatransfr',
action: 'getTreeData',
EMEVENT: Ext.getCmp('EVENT').getValue()
}
}),

Firebug shows these variables being passed back.


EMEVENT
action getTreeData
node treeRoot
opt 1024
pgm apatransfr

How do I get it to pick up the value for EMEVENT? After I get this working I need it to display the tree.

[GordS]

I stuck a console.log to see if EVENT has a value. It does. So I am not sure why the loader for my tree is not picking it up.

[GordS]

It looks like when the loader is invoked it just uses the value that EVENT had when the page is loaded. It does not update it when a selection is made like most other options that I have used. I discovered this by hardcoding the value of event. It looks like I will have to move the loader to a function. That is what I will try next.

[GordS]

My hunch was correct as EVENT now gets passed as I want. The next step is too get the tree to appear.

[GordS]

I cannot get the tree to display. I have seen lots of time that you need to use tree.rendor() to get it to display. But Firebug reports that "b is null". It probably is something simple. I have included my code. Any suggestions.

[GordS]

Thanks to Richard for helping getting the tree to display. I got the loading of the tree fixed as well. I had some minor logic errors in my backend program. So that is perfect now.

The problem is picking up the correct data so that when I drag and drop items I can update the database.

I have included the latest version of my code.

Here is what I see when I try to update the tree.


EAACTNUMBR
EAACTYEAR
EANUMBER
EAYEAR
action updateTree
destination treeRoot
pgm apatransfr
source TEST

The source id is correct. But the destiniation id is treeRoot not the id I moved it to. Also, it does not pickup the EA... misc fields from the node I am moving, so I have no way of updating the correct database record.

Why is this program not able to pick up the correct data?

Thanks in advance.

[GordS]

I did some more testing. I noticed that if I have expanded the tree and drop the item anywhere except on the node of the tree, I get the correct destination node. If I drop it on the node, I get a destination id of treeRoot.

I do not know if this will help, but I thought I would pass it along.

[GordS]

I got this option working now. I changed my backend program to assign an id to the leaves that matches it's parent.

I changed the code in RED in my HTML.


tree.on('beforenodedrop', function onBeforeNodeDrop(e){
;
if (e.dropNode.isLeaf()) {
e.cancel = false;
Ext.Ajax.request({
url: 'vvcall.pgm',
params: {
pgm: 'apatransfr',
action: 'updateTree',
EAYEAR: e.dropNode.attributes.misc1,
EANUMBER: e.dropNode.attributes.misc2,
EAACTYEAR: e.dropNode.attributes.misc3,
EAACTNUMBR: e.dropNode.attributes.misc4,
source: e.dropNode.parentNode.id,
destination: e.target.attributes.id
},
success: function(response, options){
var check = response.responseText;
if (check) {
parent.showMessage(e.dropNode.text, '<center><b>SAVED</b></center>');
}
},
failure: function(){
parent.showMessage(e.dropNode.text, '<center><b>NOT SAVED</b></center>');
}
});
}
else {
parent.showMessage('', '<center><b>You cannot drag/drop a folder</b></center>');
e.cancel = true;
}
});

I got the attributes of the node I was moving and it gave me the information required for me to update my database correctly.