PDA

View Full Version : HtmlEditor text stay gray after enable.



PatrickS
2 Sep 2010, 2:29 AM
Hi,

Im sorry im already asking an other question, but Im pretty new and try to learn loads of stuff. At this moment im working with an grid and a details panel. Both are combined in an overview extjs script.
At load of the grid, the details is disabled. When a record is selected within the grid, the details panel becomes activated.
In that details panel there are 4 tabs. Each tab has a textfield and a htmleditor (its a news item editor, localized, so each tab is an different langueage). After the details panel is enabled, the text in the htmleditor is gray. The text in the textbox is black and all other htmleditors (in the other tabs) have also black text. I can edit it, but it looks a bit weird...
Can someone tell me what Im doing wrong?

Patrick

Condor
2 Sep 2010, 3:00 AM
Can you post an example?

PatrickS
2 Sep 2010, 3:13 AM
This is the code in the details form. Bold is the part that disables it on first load.


/// <reference path="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base-debug-w-comments.js" />
/// <reference path="http://extjs.cachefly.net/ext-3.2.1/ext-all-debug-w-comments.js" />

Ext.ux.NewsItemDetails = Ext.extend(Ext.form.FormPanel, {
header: true,
labelWidth: 120,
frame: true,
layout: 'fit',
id: 'thisNewsItemDetails',

loadDetails: function (NewsItemId) {
this.enable();
this.getForm().reset();
this.getForm().load({
waitMsg: 'Bezig met laden...',
params: {
NewsItemId: NewsItemId
},
success: function (form, action) {
var data = action.result.data;
// Set the title of de details panel
Ext.getCmp('thisNewsItemDetails').setTitle(data.DutchTitle);
}
});
},

saveDetails: function () {
this.getForm().submit({
waitMsg: 'Bezig met opslaan...',
success: function (form, action) {
var newsItemGrid = Ext.getCmp('thisNewsItemGrid');
newsItemGrid.getStore().reload();
//Ext.Msg.alert('Opslaan gelukt');
},
failure: function (form, action) {
Ext.Msg.alert('Opslaan mislukt: ' + action.result.errormessage);
}
});
},

initComponent: function () {

var config = {
api: {
load: NewsItem.GetNewsItem,
submit: NewsItem.UpdateNewsItem
},
paramOrder: ['NewsItemId'],
items: [
// { xtype: 'fieldset',
// items: [
// {
// name: 'NewsItemId',
// xtype: 'hidden'
// }
// ]
// },
{xtype: 'tabpanel',
id: 'tab',
activeTab: 0,
deferredRender: false,
items: [

{ title: 'Engels',
items: [{
name: 'EnglishTitle',
fieldLabel: 'EnglishTitle',
allowBlank: false,
xtype: 'textfield',
width: '100%'
}, {
name: 'EnglishText',
fieldLabel: 'EnglishText',
xtype: 'htmleditor',
width: '100%',
height: '100%'
}
]
},
{ title: 'Nederlands',
items: [
{
name: 'DutchTitle',
fieldLabel: 'DutchTitle',
xtype: 'textfield',
allowBlank: false,
width: '100%'
},
{
name: 'DutchText',
fieldLabel: 'DutchText',
xtype: 'htmleditor',
width: '100%',
height: '100%'
}

]
},
{ title: 'Frans',
items: [{
name: 'FrenchTitle',
fieldLabel: 'FrenchTitle',
xtype: 'textfield',
width: '100%'
}, {
name: 'FrenchText',
fieldLabel: 'FrenchText',
xtype: 'htmleditor',
width: '100%',
height: '100%'
}
]
},
{ title: 'Duits',
items: [{
name: 'GermanTitle',
fieldLabel: 'GermanTitle',
allowBlank: false,
xtype: 'textfield',
width: '100%'
}, {
name: 'GermanText',
fieldLabel: 'GermanText',
xtype: 'htmleditor',
width: '100%',
height: '100%'
}
]
}
]
},{
name: 'NewsItemId',
xtype: 'hidden'
}
],

listeners: {
'afterlayout': {
fn: function (p) {
p.disable();
},
single: true
}
},

buttons: [{
text: 'Opslaan',
iconCls: 'silk-disk',
handler: this.saveDetails,
scope: this
}],

tools: [{
id: 'refresh',
qtip: 'Reset the form',
handler: function () {
this.getForm().reset();
},
scope: this
}]
};


Ext.apply(this, Ext.apply(this.initialConfig, config));
Ext.ux.NewsItemDetails.superclass.initComponent.call(this);
},

afterRender: function () {
this.getForm().waitMsgTarget = this.getEl();

Ext.ux.NewsItemDetails.superclass.afterRender.apply(this, arguments);
}

});

Ext.reg('NewsItemDetails', Ext.ux.NewsItemDetails);

Condor
2 Sep 2010, 4:21 AM
1. I am not seeing the problem in my modified example. Which Ext version and browser are you having this problem with?

ps. width:'100%' and height:'100%' are not allowed. Use anchoring instead, e.g.

Ext.onReady(function () {
Ext.QuickTips.init();

new Ext.Viewport({
layout: 'fit',
items: {
layout: 'fit',
items: {
xtype: 'form',
id: 'myform',
layout: 'fit',
items: {
xtype: 'tabpanel',
deferredRender: false,
activeTab: 0,
items: [{
xtype: 'container',
layout: 'form',
title: 'Engels',
items: [{
name: 'EnglishTitle',
fieldLabel: 'Titel',
allowBlank: false,
xtype: 'textfield',
anchor: '0'
},{
name: 'EnglishText',
fieldLabel: 'Tekst',
allowBlank: false,
xtype: 'htmleditor',
anchor: '0 -25'
}]
},{
xtype: 'container',
layout: 'form',
title: 'Nederlands',
layout: 'form',
items: [{
name: 'DutchTitle',
fieldLabel: 'Titel',
allowBlank: false,
xtype: 'textfield',
anchor: '0'
},{
name: 'DutchText',
fieldLabel: 'Tekst',
allowBlank: false,
xtype: 'htmleditor',
anchor: '0 -25'
}]
},{
xtype: 'container',
layout: 'form',
title: 'Frans',
layout: 'form',
items: [{
name: 'FrenchTitle',
fieldLabel: 'Titel',
allowBlank: false,
xtype: 'textfield',
anchor: '0'
},{
name: 'FrenchText',
fieldLabel: 'Tekst',
allowBlank: false,
xtype: 'htmleditor',
anchor: '0 -25'
}]
},{
xtype: 'container',
layout: 'form',
title: 'Duits',
layout: 'form',
items: [{
name: 'GermanTitle',
fieldLabel: 'Titel',
allowBlank: false,
xtype: 'textfield',
anchor: '0'
},{
name: 'GermanText',
fieldLabel: 'Tekst',
allowBlank: false,
xtype: 'htmleditor',
anchor: '0 -25'
}]
}]
},
listeners: {
afterlayout: {
fn: function(form){
form.disable();
},
single: true
}
}
},
tbar: [{
text: 'Enable',
handler: function(btn){
Ext.getCmp('myform').enable();
}
},{
text: 'Disable',
handler: function(btn){
Ext.getCmp('myform').disable();
}
}]
}
});
});

2. You could set the HtmlEditor emptyText to '<br/>' and call submit with submitEmptyText:false.

PatrickS
2 Sep 2010, 5:19 AM
Im using ext 3.1 and ie7/chrome/firefox and/or opera.... But first ill try to implement your version in my code and see how that works. You have a slightly different structure.

Patrick

PatrickS
2 Sep 2010, 5:50 AM
I implemented your layout improvements and that made it looking nice. But, it didnt solve the gray text in the html editor. I did some more testing. If I turn off the p.disable(); It stays black, so it happens only when I disable the panels and lateron enable them.
Ill give it a try with getting the component and enabling and disabling it.

PatrickS
2 Sep 2010, 5:58 AM
That didn't work either. The weird part is, the text is gray in the html editor, but when I go to the source code it becomes black (without any html tags). When I switch it to editor mode it becomes gray again...

Condor
2 Sep 2010, 6:01 AM
source view and html editor are two different elements, so it's not that strange that they have a different color.

Can you use Firebug to see where the gray text color is coming from (which class on which element).

PatrickS
2 Sep 2010, 6:33 AM
ok, to be honest, my css tailing is not the best, so I hope it is ok that I show you a printscreen ;)
http://img411.imageshack.us/img411/1783/classesw.png

Condor
2 Sep 2010, 7:02 AM
Hardly readable, but it could figure out enough.

HtmlEditor.initEditor copies the current color to the editor, so the problem in your case is that initEditor is called AFTER the editor is disabled.

Unfortunately, the initEditor delay is unpredictable. You could defer the disable() call, but you don't know by how much, e.g.

p.disable.defer(100, p);
(Is 100ms enough? It depends on the browser and even the speed of the PC it's running on)

PatrickS
2 Sep 2010, 7:37 AM
That does the trick, but not a prety sight... Because the edit field is always empty when it is inactive is there a way to make the text color fixed black?

Condor
2 Sep 2010, 10:17 AM
Do you really need to disable the entire form or would mask()ing the panel be ok too?

PatrickS
2 Sep 2010, 2:26 PM
Disabling the whole tabpanel would be an option.. But would that solve my problem?

PatrickS
3 Sep 2010, 11:38 PM
Ext.getCmp('thisNewsItemDetails').getEl().mask(); does the trick!