PDA

View Full Version : Icons undefined in HtmlEditor



caspar.jespersen
31 Jan 2011, 9:45 AM
Hi all,

I have a problem with my Ext.form.HtmlEditor.

All of my toolbar icons have the background url("undefined"). In Firefox with Firebug it shows up, but empty (see image below) - but in eg. Google Chrome (without dev console) it exits because of a Javascript error: Failed to load resource: the server responded with a status of 404 (Not Found) and points to "undefined".

I can't find anything about have to set a path for the icons?

It looks like this: http://img690.imageshack.us/img690/5010/skrmbillede20110131kl18.png

Thanks in advance!
Caspar

valititi
31 Jan 2011, 1:20 PM
do you use iconCls or what ?
please post some code

caspar.jespersen
1 Feb 2011, 2:08 AM
Ext.onReady(function(){

var newMessageForm = new Ext.FormPanel({
labelWidth: 75,
width: 592,
bodyStyle: 'background-color: transparent; border: 0;',
items: [
new Ext.form.HtmlEditor({
fieldLabel: 'Message',
name: 'message',
width: 504,
enableFont: false,
enableSourceEdit: false,
enableColors: false,
enableAlignments: false,
layout: 'fit'
})
]
});

newMessageForm.render(Ext.get("newMessage"));

});

caspar.jespersen
1 Feb 2011, 2:24 AM
And I can't find iconCls in any HtmlEditor-documentation. Furthermore, I don't see how iconCls could be the problem, as the background-image is defined from the div's style and not class.

http://img543.imageshack.us/img543/2483/skrmbillede20110201kl11.th.png (http://img543.imageshack.us/i/skrmbillede20110201kl11.png/)

Uploaded with ImageShack.us (http://imageshack.us)

valititi
1 Feb 2011, 2:33 AM
i just made now this (simplified to maximum) :


<html><head><title>A HtmlEditor</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="js/Ext.ux.HtmlEditor.Plugins-0.2-all-debug.js"></script>
<script>
Ext.onReady(function(){
var newMessageForm = new Ext.form.FormPanel({
labelWidth: 75,
width: 592,
bodyStyle: 'background-color: transparent; border: 0;',
renderTo:'mybody',
items: [{
xtype: 'htmleditor',
name: 'msg',
layout: 'fit',
width: 504,
enableFont: false,
enableSourceEdit: false,
enableColors: false,
enableAlignments: false
}]
});
newMessageForm.render();
});
</script>
</head>
<body id='mybody'>
</body>
</html>

And this works very well... So, I hope this can help you !

caspar.jespersen
1 Feb 2011, 2:39 AM
Hi. Whether I use renderTo in config or the render function doesn't make any difference.

Condor
1 Feb 2011, 2:44 AM
HtmlEditor uses it's own iconCls'es for each button (named x-edit-<action>).

The background images for these classes are specified in ext-all.css.

Does your server contain these images at the specified location in ext-all.css?

caspar.jespersen
1 Feb 2011, 3:03 AM
Interesting observation: The background image exists for each button (is a sprite). And if I remove the style attribute with "background-image: url('undefined')" manually through Firebug, it shows up!

http://img824.imageshack.us/img824/4513/lalalalalallala.png

Condor
1 Feb 2011, 4:02 AM
The default HtmlEditor isn't setting the background-image style, so that must come from something else.

Are you using any HtmlEditor override or plugins?

caspar.jespersen
1 Feb 2011, 4:12 AM
No. I'm using ext-foundation and ext-all, and that's it.

I was searching Ext in DOM for "undefined", and found out that Ext.undefined = undefined - don't know if that makes any difference in this matter.

Also, take a look at the following image:
http://img84.imageshack.us/img84/6623/skrmbillede20110201kl13.png

caspar.jespersen
3 Feb 2011, 5:33 AM
The problem is solved!
The problem was Ext.Button.setIcon();


Ext.override(Ext.Button, {
setIcon : function(icon){
if (typeof(icon) == "undefined") return this;
this.icon = icon;
if(this.el){
this.btnEl.setStyle('background-image', icon ? 'url(' + icon + ')' : '');
this.setButtonClass();
}
return this;
}
});

Condor
3 Feb 2011, 6:09 AM
But I don't see why setIcon would be called. HtmlEditor doesn't do that.

caspar.jespersen
3 Feb 2011, 6:10 AM
But I don't see why setIcon would be called. HtmlEditor doesn't do that.

Maybe indirectly. It does create the buttons with icons.

Condor
3 Feb 2011, 7:35 AM
HtmlEditor creates buttons with an iconCls. It never uses icon.