PDA

View Full Version : Panels (Tree and Form) - inter-communication (throw and fetch events)



sixten2009
7 May 2010, 6:22 AM
Haven't been able to find a good answer or suggestion in the right direction looking in the FAQ, Google etc. I have a TreePanel and a FormPanel, when clicking on a node in the TreePanel I want to take the ID of the node and use it to update/reload the FormPanel with the correct item and data, preferably using Ajax.

What I have found is suggestions to use fireEvent etc. but I have not been able to fetch any custom events. I was hoping there was a good tutorial example showing the interaction between a TreePanel and FormPanel since this must be a very typicall use-case. Or?

Thanks in advance,

Sixten

MiamiCoder
7 May 2010, 11:30 AM
If you're saying that you don't know what event to use to capture a click on a node of a TreePanel, the event is click (Node node, Ext.EventObject e ) .

sixten2009
8 May 2010, 9:53 AM
Thanks for your reply. I got the part on how to capture the event when a node in a TreePanel is clicked, but how do I delegate it to the FormPanel?

sixten2009
9 May 2010, 10:05 PM
The TreePanel and the interesting part:


var tree = new Ext.tree.TreePanel({
...
listeners: {
click: function(node, event) {
if (node.isLeaf()) {
...
}
}
},
...
});
When the user clicks on a leaf node, I want to take the ID I get in the function and use it to update the FormPanel.

I have checked numerous blogs and posts, and examples without being able to put the finger on the solution or concept I am looking for. I am however confident that this use-case is pretty common.. My questions are:

1. How do I propagate/delegate the ID I get in the TreePanel to the FormPanel?
2. How do I update the FormPanel when a new ID is given?

Thanks,

Sixten

george4rotech
13 May 2010, 4:10 AM
I am currently tackling almost the same exact issue. I will update this thread as appropriate as I devise my solution. In the meantime though and for what its worth, I have solved previous similar issues with a "message bus"; you might want to consult Saki's site http://examples.extjs.eu/ and drill into "Application Design" for some ideas and sample code.

george4rotech
13 May 2010, 5:36 AM
I am currently tackling almost the same exact issue. I will update this thread as appropriate as I devise my solution. In the meantime though and for what its worth, I have solved previous similar issues with a "message bus"; you might want to consult Saki's site http://examples.extjs.eu/ and drill into "Application Design" for some ideas and sample code.

What helps solve this sort of problem essentially comes down to how you organize your application. A message bus as suggested above is one way and something I've done in the past, but below is another way, indeed the way I've prototyped something real quick this morning. I already had the structure and the custom xtypes for the subcomponents defined, what I added was the subcomponentListeners function.

Hope this is a helpful beginning despite not being Ajax-based, instead relying on attributes of the node, include a custom (nested object) "user" attribute. I well may be tackling the Ajax piece for populating the grid inherent in my screen; let me know if you'd like to see that as well:


MyClient.UserAccess = Ext.extend(Ext.Panel, {
layout : 'border',
initComponent : function() {
layout: 'border',

this.items = [{
//defined at src/scripts/widgets/tree/UserAccessSearchTree.js
xtype : 'useraccesssearchtree',
ref: 'userAccessSearchTree',
region : 'west',
title : 'Find Users',
width : 225
}, {
xtype: 'panel',
region : 'center',
layout: 'border',
items: [{
//defined at src/scripts/widgets/form/management/UserAccessSummaryForm.js
xtype: 'useraccesssummaryform',
ref: '../userAccessSummaryForm',
region: 'north',
title: 'Selected User Summary',
height: 110
}, {
//defined at src/scripts/widgets/grid/management/UserAccessLocationGrid.js
xtype: 'useraccesslocationgrid',
region: 'center',
title: 'Selected User Location Access'
}]
}];

MyClient.UserAccess.superclass.initComponent.call(this);
this.subComponentListeners();
this.userAccessSearchTree.getRootNode().expand();
}

,subComponentListeners: function() {
this.userAccessSearchTree.on('click', function(node, event){
if (node.isLeaf()) {
this.userAccessSummaryForm.form.setValues({
'lblFullName': node.text,
'lblTitle': node.attributes._user.title
});
}
}, this);
}
});