PDA

View Full Version : Intercomponent communication



teox76
9 Sep 2009, 2:36 PM
Hi all, my first post here, hope to not make too much a fool of myself :)

I've started playing with ext trying to create a small panel to be used as a remote filebrowser using this (http://doug.everly.org/2009/04/events-and-extjs/) example (...yes the comment on the page is mine :s). After modification to retrieve data dynamically from the server, i cannot recreate the inter component communication. The action of the root node is ok, I think there is some problem in how I use selModel.

Many thanks for any clues and/or advices on best practices !

To the code...


// Form Panel
MyForm = Ext.extend(Ext.form.FormPanel, {
title: "Sample Form",
renderTo: 'addForm',
doSomething: function(a){
console.log('node function');
this.getForm().findField('node').setValue(a);
},
doSomethingElse: function(){
console.log('root function');
this.getForm().findField('node').setValue('');
},
initComponent: function(){
Ext.apply(this, {
items: {
xtype: 'fieldset',
labelPad: 10,
defaultType: 'textfield',
labelAlign: 'right',
items: [{
xtype: 'field',
id: 'node',
name: 'node',
fieldLabel: 'Selected Node',
labelSeparator: '',
width: 250,
}]
}

});
MyForm.superclass.initComponent.call(this);

// Add a listener for nodeSelected event
this.on('nodeSelected', function(a, b){
console.log('node listener');
this.doSomething(a)
});

// Add a listener for rootSelected event
this.on('rootSelected', function(){
console.log('root listener');
this.doSomethingElse()
});
}
});

// Tree Panel
MyTree = Ext.extend(Ext.tree.TreePanel, {
renderTo: 'treecontainer',
viewConfig: {
forceFit: true
},
initComponent: function(){
MyTree.superclass.initComponent.call(this);
//Root
var root = new Ext.tree.AsyncTreeNode({
text: 'Root',
id: 'root',
path: '.',
expanded: true
});
root.on('click', function(){
this.fireEvent('rootSelected');
});
this.setRootNode(root);
Ext.apply(this, {
selModel: new Ext.tree.DefaultSelectionModel({
listeners: {
selectionchange: function(selModel, node){
console.log("Panel click");
this.fireEvent('nodeSelected')
}
}
}),
//Loader
loader: new Ext.tree.TreeLoader({
dataUrl: 'my/url/to/data',
listeners: {
beforeload: function(treeloader, node){
treeloader.baseParams.path = node.attributes.path;
}
}
}),


});
}


});and the onReady function


Ext.onReady(function(){
// Make panels
var tree = new MyTree();
var form = new MyForm({standardSubmit: true});

form.relayEvents(tree, ['nodeSelected', 'rootSelected']);
//console.log(tree);
});

teox76
10 Sep 2009, 10:31 AM
At first I was thinking that's because the two components aren't inside a panel container, but the rootSelected event works as intended, it's the node Selected event that get's fired but not intercepted by the listener...I'm breaking my head...some advice nobody ? Even small would be very welcomed !!

teox76
11 Sep 2009, 6:49 AM
it's sad continuing only speaking to myself :(...i'm not so charming...

after some trials I've changed this part


selModel: new Ext.tree.DefaultSelectionModel({
listeners: {
selectionchange: function(selModel, node){
console.log("Panel click");
this.fireEvent('nodeSelected')
}
}
}),
with this very simple one


this.on('click',function(node){
this.fireEvent('nodeSelected');
})


and it *seems* to work....but I would really really really appreciate if some guru could explain me the reason !! :-?

Condor
11 Sep 2009, 6:51 AM
It's a scope problem:

root.on('click', function(){
this.fireEvent('rootSelected');
}, this);
(otherwise 'this' will be the node and not the tree)

teox76
15 Sep 2009, 4:10 AM
thank you for pointing that out! But the root event was functioning correctly, actually the problem was in the 'nodeselected' event.

I was not understanding why after my change from the "selmodel" syntax to the "on" syntax all went right.