How to hidden toolbar of HtmlEditor

[qgj2046]

1.I want to use HtmlEditor display html content, but i don't need toolbar, anybody can tell me how to hidden this toolbar in HtmlEditor, I spent three hours, but also can't solved it.
2. How to set this HtmlEditor as readonly, I try set it, but It also can edit.

Thanks a lot!

[shibubh]

call this only after the htmleditor is rendered

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

and one question why you wanna hide the toolbar.if you dont want it. why not use Ext.form.TextArea instead

[qgj2046]

First, thanks a lot for your reply.
1. When I use "Ext.getCmp('YOURHTMLEDITORID').getToolbar().hide()", then the HtmlEdit
also hidden,

2.I use TextArea previous, but can't display html content in TextArea, such as
<p><Font color=#ff0000>Test</Font></p>, It will display "<p><Font color=#ff0000>Test</Font></p>
" in TextArea. I researched it on internet, somebody said the TextArea can't display html
content, sugguest use HtmlEditor.

3.Is the TextArea can display html content, if it can, it is a best choice, how to do it that
let TextArea display "Test" when input '<p><Font color=#ff0000>Test</Font></p>'

[qgj2046]

Below is my source code:

SendOrReceiveMessage = function(node) {

/**
var message = new Ext.form.TextArea({
id: 'message',
xtype: 'textarea',
height: 150,
width : 500,
hideLabel: true,
readOnly: true,
anchor: '90%'
});
*/


var message = new Ext.form.HtmlEditor ({
id: 'message',
//renderTo: Ext.getBody(),
xtype: 'htmleditor',
height: 150,
width : 500,
hideLabel: true
});
// Ext.getCmp('message').getToolbar().hide();

var sendbox = new Ext.form.HtmlEditor ({
id: 'sendbox',
xtype: 'htmleditor',
height: 130,
width : 500,
hideLabel: true
});

var formPanel = new Ext.form.FormPanel({
xtype: 'form',
baseCls: 'x-plain',
autoHeight: true,
width: 550,
buttonAlign: 'center',
bodyStyle: 'padding:10 10px 0;',
defaults:
{
anchor: '95%'
},
items: [
message,
sendbox
],
buttons: [{
text: 'Send',
handler: sendmsg
},{
text: 'Close',
handler: close
},{
text: 'clear',
handler: clear
}]
});

// Define a window with the form panel in it and show it.
var window = new Ext.Window({
title: 'Chat with '+node.id,
width: 580,
height: 380,
minWidth: 300,
minHeight: 250,
layout: 'fit',
plain: true,
bodyStyle: 'padding:5px;',
resizable : false,
items: formPanel
});
window.show();

function sendmsg() {
var sendbox = Ext.getCmp("sendbox");
var message = Ext.getCmp("message");
var sendText = sendbox.getValue();
var msg = message.getValue();

if(sendText == null || sendText == "") {
alert('Can not send empty text!');
} else {
message.setValue(msg+'<br/>'+sendText);
}
sendbox.reset();
}

function close() {
window.close();
}

function clear() {
Ext.getCmp("message").reset();
}
}

[carol.ext]

Please post your code in code tags and use the preview button to verify it is nicely indented and readable.

[qgj2046]

Thanks for you remind, next time will do it as you mentioned.

[qgj2046]

Thanks anyway, I have solved that problem. below is the solution:

var div = document.createElement('DIV');
div.innerHTML = '<font color="red">Test</font>';
document.getElementById("message").appendChild(div);

'message' is the id of TextArea.

[markachus]

I have an html editor within a modal window. If I try to hide the editor's toolbar by doing
either

this.down('#Description').getToolbar().hide(false)

or

this.down('#Description').getToolbar().setVisible(false)

the modal window gets fixed to the left-up corner of the main window and can't be moved.

Has anybody experienced this behaviour before?

[abdulgani]

call this only after the htmleditor is rendered

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

and one question why you wanna hide the toolbar.if you dont want it. why not use Ext.form.TextArea instead

THANKS