PDA

View Full Version : Event Question / Inter-Comp Comm



PV-Patrick
22 Dec 2009, 2:36 PM
I am having a problem with inter-component communication. I have read numerous forum posts, saki's tutorials/posts, and Ext examples and I think maybe I am just overlooking something.

In short, I am trying to have a button from a panel inside the West Panel of the viewport "talk" to the main tab panel (center). Below is code sniplets of my application and I would appreciate any help or guidance! I was working off the Feed Viewer 3 example, however I assume my problem has to do with scope.
My onReady():


Ext.onReady(function() {
// -- Enable quick tips - feedback for any errors
Ext.QuickTips.init();

var main_tab_panel = new MainTabPanel();
var navigation_panel = new NavigationPanel();
//console.log(navigation_panel.items.itemAt(0));


navigation_panel.on('click', function() {
console.log('hi');
//console.log(section)
//main_tab_panel.loadSection(section);
});

var viewport = new Ext.Viewport({
layout : 'border',
items : [
new Ext.BoxComponent({
region : 'north',
height : 50,
autoEl : {
tag : 'div',
html: '<p>My App</p>'
}
}),
navigation_panel,
main_tab_panel
]
});
});
My West Panel:


NavigationPanel = function() {

this.main_settings = new Ext.Panel({
id : 'main-settings-nav-panel',
title : 'Main Settings',
frame : true,
collapsible : true,
style : {
margin : '5px'
},
items : [{
xtype :'button',
text : 'Test Nav Link',
handler : function() {
this.fireEvent('navselect', this);
}
}]
});

NavigationPanel.superclass.constructor.call(this, {
id : 'navigation-panel',
region : 'west',
title : 'Navigation',
collapsible : true,
//floatable: false,
split : true,
margins : '5 0 5 5',
cmargins: '5 5 5 0',
width : 175,
minSize : 125,
maxSize : 200,
items : [this.main_settings],
});

this.addEvents({navselect:true});
}

Ext.extend(NavigationPanel, Ext.Panel, {
});My Center TabPanel:


MainTabPanel = function() {
MainTabPanel.superclass.constructor.call(this, {
id : 'main-tabs',
region : 'center',
margins : '5 5 5 0',
//cmargins : '5 5 5 0',
enableTabScroll : true,
defaults : {autoScroll: true},
activeTab : 0,
border : true,
frame : false,
//autoDestroy : false,
deferredRender : false,
items : [{id:'pt-orders-tab',title:'Test'},{id:'api-orders-tab',title:'Test2'}]
});
}

Ext.extend(MainTabPanel, Ext.TabPanel, {
loadSection : function(section) {
Ext.getCmp('main-tabs').setActiveTab(section+'-tab');
}
});Thanks in advance!