View Full Version : IE8 Problem adding a image to a toolbar

6 Dec 2011, 7:57 AM
Hi iīm trying to add an image to a toolbar with the code below, i have a toolbar with image and then the toolbar is added to the viewport, in FF, Chrome and IE9 this works fine but in IE6,7 and 8 this throws an error and the rest of the components donīt render.

The error message is: "the destination element is invalid for this operation."

Does anyone had the same problem?

var tbFooter = Ext.create('Ext.toolbar.Toolbar', {
id: 'tbFooter',
height: 35,
region: 'south',
xtype: 'box',
autoEl: {tag: 'IMG', src: '../images/logo.png'}

var viewport = Ext.create('Ext.container.Viewport',{
id: 'viewport',
anchor: '100%',
layout: 'border',
items: [tbHeader,panelAccordion,panelCenter,tbFooter],
listeners: {
afterrender: onViewportAfterRender

6 Dec 2011, 10:18 AM
first of all html tags must be lowercase so use tag: 'img'

6 Dec 2011, 11:21 AM
I don't have the same problem, but I do have an IE8 and IE9 problem with EXTJS 4.07. I have an app that run in Chrome (15.0.874.121), Safari (5.1) and FireFox (8.0). I get Line: 8460Error: Exception thrown and not caught in ext-debug.js. The code causing the problem is 'throw new Ext.Error(err);' I put a breakpoint in Chrome at the line number, but it never gets there. This is very frustrating. I thought the whole thing about javascript frameworks and libraries was to iron these incompatibalites out. Why with this framework do I still have to focus on why something doesn't run in IE. How do I explain this to management? Come on man, this is the main browser used by the large corporations. What type of QC is taking place over there. I'm not the only one with this problem, I see more on the internet. But I see no solutions. Does any one care about this?

6 Dec 2011, 12:14 PM
This works for me on IE 8, using ExtJs v4.0.7:

<!-- saved from url=(0014)about:internet -->
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">

<script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>

<script type="text/javascript">
Ext.onReady(function() {

Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
xtype: 'panel',
region: 'north',
frame: true,
html: 'North Region',
height: 32
xtype: 'panel',
region: 'center',
layout: 'fit',
html: 'Center Region'
xtype: 'toolbar',
region: 'south',
items: [{
xtype: 'image',
src: 'resources/images/help.png'


6 Dec 2011, 3:27 PM
HEY, success. It was all about the comma. Never leave dangling commas in you code. What I mean is this in IE will make you suffer
xtype: 'displayfield',
fieldLabel: 'Last Name',
}IE will kick you in the butt for it, the other browsers seem to let you slide by. Too bad they are all not the same. It is very hard to find. Especially when the error is uncaught exception. Maybe they can put something in the build tool that would catch this type of condition.

6 Dec 2011, 6:37 PM
that is why you should use jslint to check your source...

9 Dec 2011, 9:03 AM
That sounds great. I tried dropping an ext.js file in it, but the extjs syntax is not recognized by jslint. How did you get around that?

9 Dec 2011, 4:42 PM
Use the global directive for jslint...

/*global Ext:true */ /*jslint browser:true, laxbreak:true */

15 Dec 2011, 3:36 PM
I wan not able to get JSLint to work but found this and works good. javascriptlint @ http://www.javascriptlint.com/