View Full Version : [SOLVED][3.??] Viewport event handling is failing

18 Jul 2009, 3:21 PM

After spending about 2 days now, I've finally narrowed down that there's some event-processing issue caused in Ext objects which are sub-classed then added to a Viewport panel. I created this simple Viewport with two tabs in it to demonstrate the problem. I'm a relative newbie to ExtJS, so it's possible I'm doing something wrong here, but doesn't seem like it (or certainly the default behavior is unexpected).

In the example you see here, the 'center' region of the Ext.Viewport object has a sub-classed "Studio.TabPanel" as its x-type object. It seems when sub-classed x-type objects are lazily added to a viewport panel, something goes wrong with the event-processing in the sub-classed object (if you try clicking on Tab 2, you'll see it doesn't respond). I've observed the exact same event-dead behavior with more complex sub-classed grid object, as well.

Thanks in advance for a fix.



// example tab panel
// {{{
Studio.TabPanel = Ext.extend(Ext.TabPanel, {
// defaults - can be changed from outside

,initComponent:function() {

// hard coded - cannot be changed from outsid
var config = {
activeTab: 0,
items: [{
title: 'Tab 1',
html: 'A simple tab'
title: 'Tab 2',
html: 'Another one'
}; // eo config object

// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));

// call parent
Studio.TabPanel.superclass.initComponent.apply(this, arguments);

} // eo function initComponent

* TabPanel onRender override
,onRender:function() {

// call parent
Studio.TabPanel.superclass.onRender.apply(this, arguments);
} // eo function onRender

}); // eo extend

// register xtype
Ext.reg('studio-tabpanel', Studio.TabPanel);
// }}}

// application main entry point
Ext.onReady(function() {


var viewport = new Ext.Viewport({
,margins:'14 0 0 0'
,title:' '
+'User notice and error messages are displayed in north area.<br><br>'
+'<b><< Menus and toolbars will go here >> </b>'
,title:'Studio Tools'
,html: '<p>'
+ '<span class="newproject">West Panel</span><br>'

,title:'Your Projects'
// ,xtype:'projectgrid' ...sub-classed Ext.grid.GridPanel exhibits same problem

}); // eo function onReady

18 Jul 2009, 9:49 PM
The example code works fine. See here, I switched to tab 2


18 Jul 2009, 9:50 PM
Overnest in no-layout Panels though. As usual.

19 Jul 2009, 9:42 AM
My server-side app is being developed using Rails as the back-end, and I'm using a Rails plug-in that allows for embedded-ruby in scripts (kind of like ASP/JSP/PHP) that can substitute server-side variables...

It appears this server-side processing of JS files must be somehow causing the problems (or perhaps the WEBrick server, as you are correct - the example code works fine in a plain HTML wrapper.

This should help me narrow down what's going on, now that I realize I must test with plain HTML (and IIS server) to ensure nothing weird is going on from the server-side processing.

Thanks, Animal. Here's an Animal-cookie for your efforts ;)


19 Jul 2009, 10:45 AM
FIXED! I figured out what was causing my problems with event processing...

I was using some HTML in the BODY section of the page which had a DIV tag defined with a height of 450px - ouch! This div tag overlapped my ExtGridPanel's display area, which interfered with the controls (stealing their user events, apparently).

Anyway - it's now fixed.

Word to the wise - be very careful mixing overlapping HTML/CSS in the BODY area when using Viewport to also control the entire browser client area! Better yet, just do everything in ExtJS and forget the HTML (where I'm headed now).