component communication

[christa]

Hello,

I'm trying to use Saki's example http://examples.extjs.eu/?ex=compcomm, but I don't really understand how the linksPanel works.
I want to create a window with a border layout: north,south, west, center. In the west region I have an accordion with 3 panels. The plan is to use linksPanels for the accordion, this way when a link is clicked on the accordion content will be loaded in the center. However, I don't understand how to pass the onClick handler to all the links...



Ext.ns('Example');
Example.LinksPanel = Ext.extend(Ext.Panel, {
// configurables
border:false,
links:[{
text:'',
href:'#'
}],
layout:'fit',
tpl:new Ext.XTemplate('<tpl for="links"><p><a href="{href}">{text}</a></p></tpl>'),
initComponent:function() {
Ext.apply(this, arguments);

Example.LinksPanel.superclass.initComponent.apply(this, arguments);
},
afterRender:function() {
// call parent
Example.LinksPanel.superclass.afterRender.apply(this, arguments);
// create links
this.tpl.overwrite(this.body, {links:this.links});
} // e/o function afterRender
}); // e/o extend

// register xtype
Ext.reg('linkspanel', Example.LinksPanel);

Example.WindowLayout = Ext.extend(Ext.Window, {
initComponent:function() {
Ext.apply(this, {
animCollapse: false,
closable: false,
layout: 'border',
items: [{
region: 'south',
html: '<br/>Footer',
height: 40,
minSize: 75,
maxSize: 250//,
},{
region: 'north',
height: 50,
minSize: 75,
maxSize: 250//,
},{
title: 'West Panel - Accordion Layout',
region:'west',
width: 200,
minSize: 100,
maxSize: 300,
layout:'accordion',
layoutConfig: {
// layout-specific configs go here
titleCollapse: false,
animate: true
},
items: [{
title: 'Welcome page',
items:[{
xtype: 'linkspanel',
links:[{text: 'Register', href: '#'}, {text: 'Local Log In'}]
}]

},{
title: 'Overview',
items:[{
xtype: 'linkspanel',
links:[{text: 'Link 1', href: '#'}, {text: 'Link 2'}]
}]
},{
title: 'Configuration',
items:[{
xtype: 'linkspanel',
links:[{text: 'Link 3'}, {text: 'Link 4'}]
}]
}]
},{
region:'center'
}]
});

Example.WindowLayout.superclass.initComponent.apply(this, arguments);

//This works fine...
for(var i = 0; i < this.items.itemAt(2).items.length; i++) {
this.items.itemAt(2).items.itemAt(i).on('expand', function(){
Ext.MessageBox.alert('VVVVVVVVV');
});
}

//I DON'T UNDERSTAND THIS PART:

//this.linksPanels = new Array();
//for(var i = 0; i < 3; i++) {
this.linksPanel = this.items.itemAt(2).items.itemAt(0);// <- the panels of the accordion
this.linksPanel.on({
scope:this
,render:function() {
this.linksPanel.body.on({
scope:this
,click:this.onLinkClick
// ,delegate:'a.examplelink'
,stopEvent:true
});
}
});
//}
}, // initComponent

onRender: function() {
Example.WindowLayout.superclass.onRender.apply(this, arguments);
}, // onRender

onLinkClick: function() {
Ext.MessageBox.alert('AAAAAAAAAAAAAAAAAAAAAA');
}
});

Ext.reg('windowlayout', Example.WindowLayout);


This code will work for 1 panel, e.g. the links of the 1st panel will through the alert when clicked, but when I tried to use an array for the panels I get an error saying that the panels.body doesn't have properties.
I thought it had to do with lazy rendering of the linksPanels but I really don't understand how it should work.
Sorry for the long post, I hope someone can help...

Thanks
don't have

[christa]

I think I solved it!!
I'm not sure this is the right way to do it, but this works!!! :)



for(var i = 0; i < this.items.itemAt(2).items.length; i++) {
this.linksPanels[i] = this.items.itemAt(2).items.itemAt(i);
this.linksPanels[i].on({
scope:this
,render:function(panel) {
panel.body.on({
scope:this
,click:this.onLinkClick
//,delegate:'a.examplelink'
,stopEvent:true
});
}
});
}

[mjlecomte]

I haven't looked at your code since you say it works now, but FYI there's also an example in the demos for databinding that uses similar approach.
http://extjs.com/deploy/dev/examples/grid/binding-with-classes.html

[Actuarybrad]

In your configurables, you need to add to your new template (tpl:) class="examplelink" in the anchor tag.


Regards,

Actuarybrad

[christa]

Thanks for the tips guys!
It starts to make sense :)

[KrullWarKing]

Is there a good one that shows how to fire an event in another component? For instance, I have a grid full of forms and I want the user to be able to edit his form fields when he/she clicks on a row in the grid.... I have it working to the point where the user can click the row then go open the other window and it is on the right form however I want the form to open on click.......it's frust being a noob!