PDA

View Full Version : The upper line of toolbar is disappear when i use getToobal().hide() in htmleditor



dachang
30 Sep 2013, 6:17 PM
Here is my code for xtype:htmleditor
{
xtype: 'htmleditor',
id: 'infoMessageArea',
name: 'infoMessageArea',
fieldLabel: '<font color=red>*</font>Message',
labelWidth: 120,
msgTarget: 'side',
anchor: '60%',
allowBlank:false,
maxheight: 210,
minWidth:850
}
and I use Ext.getCmp('infoMessageArea').getToolbar().hide();

The upper line of the field will disappear, could you help me for how to keep the upper line showing when i hide the toolbar in htmleditor

slemmon
2 Oct 2013, 2:19 PM
You'll need to set the div with class "x-html-editor-input" to have border-top-width: 1px when the toolbar is hidden since by default it has a width of 0.



Ext.widget('button', {
renderTo: document.body,
text: 'Hide Toolbar',
handler: function () {
h.getToolbar().hide();
h.bodyEl.down('div.x-html-editor-input').applyStyles({
'border-top-width': '1px'
});
}
});


var h = Ext.create('Ext.form.HtmlEditor', {
width: 580,
height: 250,
renderTo: Ext.getBody()
});

dachang
3 Oct 2013, 11:41 PM
After I used your suggestion to set the div with class "x-html-editor-input" to have border-top-width: 1px. the upper line successful showed, however, the bottom line disappeared even though I put the similar code at that. The bottom line still cannot be showed in the field.

Ext.getCmp('infoMessageArea').bodyEl.down('div.x-html-editor-input').applyStyles({
'border-bottom-width': '1px'
});
Could you help me again to solve this issue?

slemmon
7 Oct 2013, 12:11 PM
Hmm... I didn't see the issue you're seeing.

What browser are you testing in?

Also, if you can share your code that you're using that might help us to better collaborate.

dachang
7 Oct 2013, 5:52 PM
I use IE.

Also when I use the Ext 4.1, the upper line and bottom line won't disappear, however, when I upgrade to Ext 4.2, this issue happened.


My code

{
xtype: 'htmleditor',
id: 'infoMessageArea',
name: 'infoMessageArea',
fieldLabel: '<font color=red>*</font>Message',
labelWidth: 120,
msgTarget: 'side',
anchor: '60%',
allowBlank:false,
maxheight: 210,
minWidth:850
}

//---------------------------------------
// When the event happen

Ext.getCmp('infoMessageArea').getToolbar().hide();

Ext.getCmp('infoMessageArea').bodyEl.down('div.x-html-editor-input').applyStyles({
'border-top-width': '1px'
});
Ext.getCmp('infoMessageArea').bodyEl.down('div.x-html-editor-input').applyStyles({
'border-bottom-width': '1px'
});