View Full Version : UI Events Don't Work in Firefox or Chrome

12 Jun 2009, 10:53 AM
My extjs 3.0 UI works fine in IE 7 but is completely unresponsive in Firefox and Chrome. It seems no events are being fired. For example, I cannot move a splitter, collapse a region, select an accordian, click a button or anything. But everything displays fine. I've been trying for hours to compare the samples with what I have - the samples seem to run fine on Firefox (at least the extjs hosted samples) - but can't find any difference. Can someone please help!!!

12 Jun 2009, 11:39 AM
@mathec -- It's likely something silly, you've overlooked. Post some layout code and your <head> section, we can't tell much without those.

Got your debugger fired up ?

12 Jun 2009, 11:44 AM
See below for my Default.aspx page. However, I've tried simplifying by creating a virtual directory with one html file and did nothing but cut and paste the sample code and it still doesn't work in Firefox or Chrome. No errors in Firebug.

<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Default.aspx.cs"Inherits="CL.Web._Default" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- do not deploy shim.js in to production, it allows VS2008 to provide Intellisense for ExtJS--><scripttype="text/javascript"src="js/shim.js"></script>

12 Jun 2009, 12:00 PM
Does Firebug show any code being loaded in all those Script tags?

Whats in application.js? post it.

12 Jun 2009, 12:18 PM
/// <reference path="shim.js" />
/// <reference path="../Ext/adapter/ext/ext-base.js" />
/// <reference path="../Ext/ext-all-debug.js" />

Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';

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

var contentPanel = {
id: 'content-panel',
region: 'center',
layout: 'card',
margins: '35 0 5 0',
activeItem: 0,
border: true,
title:'Default Title',
deferredRender: true,
items: [

var viewport = new Ext.Viewport({
layout: 'border',
items: [
new Ext.BoxComponent({
region: 'north',
height: 32
}), {
region: 'west',
id: 'west-panel',
title: 'Navigation',
split: true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins: '35 0 5 5',
cmargins: '35 5 5 5',
layout: 'accordion',
layoutConfig: {
animate: true
items: [{
title: 'some title',
border: false,
iconCls: 'customicon'
}, {
title: 'another title',
html: '<p>Some settings in here.</p>',
border: false,
iconCls: 'settings'
}, {
title: 'third title',
html: '<p>Some settings in here.</p>',
border: false,
iconCls: 'settings'
renderTo: Ext.getBody()

}); // eo function onReady

// eof

12 Jun 2009, 12:20 PM
Not sure what you mean with the Firebug question - sorry I'm a beginner with ExtJS and Firebug. In firebug, when I click the 'Script' button it shows all the script references but they are not expandable - nothing underneath them. Nothing shows up in the Console tab and the HTML tab shows all the div tags but no js.

12 Jun 2009, 12:25 PM
@mathec -- Before we can get any further, pull up a sample from the Live Ext samples site, and start browsing with Firebug, learn how each Firebug tab works.

Drill down into the DOM with it.

12 Jun 2009, 2:10 PM
I compared the DOM tabs in Firefox of the Layout-Browser sample with my previously posted code. It looks similar except my blank image location is different. It looks like my other objects are also loaded. All of the widgets display but are completely unresponsive to any mouse clicks.

Sorry for forgetting the [code/] tags in my previous post. Thanks for correcting and for the continuing help. Much appreciated.

13 Jun 2009, 7:49 AM
This javascript file was causing the issue:


I had it so I can use extjs intellisense in VisualStudio. It just has one line:
/// added to allow VS2008 to provide IntelliSense for Ext library
window.addEventListener = false;

So I remove that and everything works fine. Appreciated the help - even if just to know it wasn't something that everyone has issues with.