PDA

View Full Version : Viewport and Component to Component Listeners



jmoran888
5 Aug 2009, 6:36 AM
Ok, let me preface by saying I am a BEGINNER to Ext JS. I love love love it but don't have much javascript experience. My knowledge is based mostly on backend Java Servlets, Hibernate, etc. My front end is composed mostly of Struts Tag's and 'some' javascript.

So here's my question. I have viewport and 'north' region consists of a Toolbar with Menu's and Menu Items. My 'center' region I would like to have tab panels. When I click a Menu Item, I need a new tab to open in the center region of the viewport. After reviewing forum posts, it looks like all of this needs to be defined in the viewport?? I have the different regions broken out into different files and what it looks like Ext JS users would call 'pre-configured'.

Here's the code

Menu that will be included on Toolbar (I need the click to happen when the Organizations item is clicked)



//Code Management Menu
Application.Menu.CodeManagement = Ext.extend(Ext.menu.Menu, {
initComponent: function() {
var config = {
text: 'Code Management',
iconCls: 'no-icon-menu', // <-- icon
items: [{
text: 'Organizations',
href: 'Organization_list'
}]
}; // eo config object
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
Application.Menu.CodeManagement.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
});
Ext.reg('CodeManagement', Application.Menu.CodeManagement);


Toolbar that will become the 'North' Region



Ext.ns('Application.Toolbar');
//Main Application Toolbar
Application.Toolbar.Main = Ext.extend(Ext.Toolbar, {
initComponent: function() {
var config = {
region: 'north',
height: 32,
items: [
{
text:'Code Management',
iconCls: 'no-icon-menu', // <-- icon
menu: {
xtype: 'CodeManagement'
}
},
'-',
{
text:'User Management',
iconCls: 'no-icon', // <-- icon
menu: {
xtype: 'UserManagement'
}
},
'-',
{
text:'Bookings',
iconCls: 'no-icon' // <-- icon
},
'-',
{
text:'Inventory',
iconCls: 'no-icon' // <-- icon
}
]
}; // eo config object
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
Application.Toolbar.Main.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
});
Ext.reg('Toolbar', Application.Toolbar.Main);


TabPanel that will become the 'Center' Region



Ext.ns('Application.TabPanel');
//Main Application Tab Panel
Application.TabPanel.Main = Ext.extend(Ext.TabPanel, {
initComponent: function() {
var config = {
region: 'center',
xtype: 'tabpanel',
resizeTabs: true, // turn on tab resizing
minTabWidth: 115,
tabWidth: 135,
enableTabScroll: true,
defaults: {
autoScroll: true
},
plugins: new Ext.ux.TabCloseMenu(),
activeItem: 0
}; // eo config object
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
Application.TabPanel.Main.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
}
);
Ext.reg('TabPanel', Application.TabPanel.Main);



Viewport



Application.Viewport = Ext.extend(Ext.Viewport, {
// configurables
// anything what is here can be configured from outside
layout:'border',
// {{{
initComponent:function() {
// hard coded config - cannot be changed from outside
var config = {
items: [{
xtype: 'Toolbar'
}, {
xtype: 'Statusbar'
}, {
xtype: 'EastPanel'
}, {
xtype: 'TabPanel'
}]
};
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
// call parent
Application.Viewport.superclass.initComponent.apply(this, arguments);

this.Toolbar = this.items.itemAt(0);
this.TabPanel = this.items.itemAt(3);

this.Toolbar.on({
scope: this
,
render:function() {
this.Toolbar.items.on({
scope: this,
click: this.onClick
});
}
});
} // e/o function initComponent
,
onClick:function(e, t) {
var title = t.innerHTML;
var tab = this.TabPanel.items.find(function(i){
return i.title === title;
});
if(!tab) {
tab = this.TabPanel.add({
title: title
,
layout: 'fit'
});
}
this.TabPanel.setActiveTab(tab);
} // eo function onClick
}); // e/o extend
// register xtype
Ext.reg('ApplicationViewport', Application.Viewport);

// application main entry point
Ext.onReady(function() {
Ext.QuickTips.init();
var viewport = new Application.Viewport();
});



I don't get any errors and the page comes up just fine. But when I click the toolbar items, nothing happens and I have set my break in the onClick above and it never gets reached.

Thanks for the help

Jennifer

5 Aug 2009, 6:39 AM
Hi Jennifer,

Thanks for taking the time to Post and format your question/concern properly and welcome to the forums.

Attaching an 'onClick' method to the viewport won't really do anything fo ryou because you're not registering a 'click' event handler on the viewport's element. Does that make sense?

jmoran888
5 Aug 2009, 6:50 AM
Your welcome, believe me, I have spent many hours absorbing all there is to learn on these forums, they really are very informational!!!

I sort of understand what you are saying, On the actual menu item labeled 'Orgianizations' I need to say something like 'when clicked open a tab'. Is that right? Do I have to add a clickHandler to the below code? Also I am having some trouble understanding the difference between a handler and a listener, could you give a brief explanation?



//Code Management Menu
Application.Menu.CodeManagement = Ext.extend(Ext.menu.Menu, {
initComponent: function() {
var config = {
text: 'Code Management',
iconCls: 'no-icon-menu', // <-- icon
items: [{
text: 'Organizations',

href: 'Organization_list'
clickHandler:

}]
}; // eo config object
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
Application.Menu.CodeManagement.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
});
Ext.reg('CodeManagement', Application.Menu.CodeManagement);


Thanks,

Jennifer

StuartAshworth
5 Aug 2009, 7:05 AM
I would suggest looking at Saki's example (http://examples.extjs.eu/?ex=compcomm) about component communication.

The jist of it is that your menu shouldn't know that your tab panel exists and vice versa. Therefore the code to allow the two to 'talk' to each other needs to be in the component that does that they both exist - in your case the ViewPort. Therefore the ViewPort will react to the click events in the Menu and tell the TabPanel to create a new tab and fill it with something.

Hope that helps a little...
Stuart

jmoran888
5 Aug 2009, 7:28 AM
That's what I was using as a basis, but I he has a window that has two components, one is a panel with links and the other is the tabpanel. I know it sounds silly but I cannot get it to work with a viewport that has a toolbar component and a tabpanel. I know i am not assigning the click handlers to the toolbar menu items correctly, I just can't figure out how to do it.

Any help or pointers would be appreciated.

Jennifer

jmoran888
6 Aug 2009, 10:50 AM
Got it. Had to add code to

for(var i = 0; i < this.Toolbar.items.length; i++){
if (this.Toolbar.items.itemAt(i).menu != null)
this.Toolbar.items.itemAt(i).menu.addListener('click', this.onClick, this);
}

which will apply a listener to all of my menu items