PDA

View Full Version : Internet Explorer button not rendering



alex.taylor
25 Feb 2013, 9:35 AM
I took a look in the search and didnt see any duplicates of this. I am using extjs 4.1.
I am having an issue rendering buttons in 4.1 in Internet explorer. I am new to extjs and was tasked with doing an upgrade from 3 to 4. In internet explorer the css seems to work fine except for the buttons. Below is a picture comparing the output in internet explorer to chrome.

42033

Thanks for any information,
Alex

evant
25 Feb 2013, 4:03 PM
It means you're missing the background images. Chrome supports things like gradients/rounded borders by default, but for browsers that don't, there's a set of images to achieve this under /resources/images/themeName.

Looks like you're missing those images.

alex.taylor
26 Feb 2013, 6:08 AM
In the case that the images are missing wouldn't I get a console error? I messed around with the resource folder and cant seem to get anything to change. I also went and checked Firefox Opera Safari and everything works fine in those so the only one I am having issues in is Internet Explorer.

scottmartin
26 Feb 2013, 8:00 AM
What happens if you create a simple test case that has a panel, toolbar and a button?

Are you sure you do not have some custom CSS that is causing a problem?

alex.taylor
26 Feb 2013, 8:39 AM
Creating a test case inside the app that it is running in using this code


var bar = Ext.create('Ext.toolbar.Toolbar', { renderTo: document.body,
width : 400,
items: [
{
text: 'Button'
},
{
xtype: 'splitbutton',
text : 'Split Button'
},
'->',
{
xtype : 'textfield',
name : 'field1',
emptyText: 'enter search term'
}
]
});


var vp = Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 1200,
height:800,
html: '<p>World!</p>',
items : [bar],
renderTo: dboardDiv
});

gives a result of

42064

As I said this is inside the app we have running so it still could be a css issue that is breaking it however all this happens after the migration from 3 to 4 so it could be I am missing a necessary file or step. It just confuses me why all browsers but IE work in this context.

scottmartin
26 Feb 2013, 8:42 AM
As I said this is inside the app we have running so it still could be a css issue that is breaking it

I think you know the next step ;)

Scott.

alex.taylor
26 Feb 2013, 8:43 AM
yep thanks Scott working on that as we speak

alex.taylor
26 Feb 2013, 11:52 AM
this is what i ended up getting it down to




<html>
<head>
</style>
<link href="{$css:DBoard/ext-all}" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="{$jsc:ext-all-debug}"></script>


<script>
Ext.ns('App');
Ext.onReady(function() {
var bar = Ext.create('Ext.toolbar.Toolbar', {
renderTo: document.body,
width : 400,
items: [
{
text: 'Button'
},
{
xtype: 'splitbutton',
text : 'Split Button'
},
'->',
{
xtype : 'textfield',
name : 'field1',
emptyText: 'enter search term'
}
]
});
var vp = Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 1200,
height:800,
html: '<p>World!</p>',
items : [bar],
renderTo: dboardDiv
});
});
</script>
</head>
<body>
<div id="dboardDiv" ></div>
</body>
</html>

Same code out of our system works, in our system breaks as before. There are no references to any other css or js files and the files that these are linking to are the correct files because they break if i remove the files. Thanks for the help so far I will post back if i figure anything out.

scottmartin
26 Feb 2013, 12:06 PM
and if you hard code your css and js?



<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>

alex.taylor
26 Feb 2013, 12:10 PM
the way our IIS is set up I don't believe I can. However if i go to either of those files and delete them it breaks something and those are both the same files I am using for the other tests.

evant
26 Feb 2013, 1:31 PM
What about if you just extract the SDK to your server? Do the examples look correct?

alex.taylor
27 Feb 2013, 8:48 AM
Just wanted to say thank you for all the help on this I did solve the problem. In the end it was the paths to the images was wrong. In the other browsers I have always gotten console errors if the images paths were wrong however in IE it only shows it in the network and event then it doesnt always show them. I fixed the path and everything is working fine now. Thanks again.