View Full Version : Create uneditable text block

17 Jul 2012, 6:26 PM
Hello Everyone,
I am using ExtJS and I would like to have a block of text that can't be edited by the user. I have tried using the html config of the panel as my text block ( panel.body.dom.innerHTML = instructions; ) but it doesn't seem to pay attention to line breaks. I have tried using a TextAreaField component which does appear to respect my line breaks but unfortunately allows the user to edit the text. Upon reading the API I didn't seen an 'editable=true/false' option on the TextAreaField class.

Any help is greatly appreciated.

17 Jul 2012, 7:03 PM
Can you use readOnly?

Ext.create('Ext.form.FormPanel', {
title : 'Sample TextArea',
width : 400,
bodyPadding: 10,
renderTo : Ext.getBody(),
items: [{
xtype : 'textareafield',
grow : true,
value : 'This is a TextAreaField',
readOnly : true,
name : 'message',
fieldLabel: 'Message',
anchor : '100%'


17 Jul 2012, 10:59 PM
Hmmm.....sth you are doing wrong there, post some code or take a look at the one below, which is fairly simply:

var panel = Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 200,
html: '<p>World! fdsfsdf line break</br>fsdfsdf sdfs dfs break</br>sdffsdfsd sdfsdfd</p>',
renderTo: Ext.getBody()

panel.update('<div>vvvvvvv break</br> dfdfdf one more break</br> kkkkkkkk another break<div>');

18 Jul 2012, 5:36 PM
Thanks everyone. Your suggestion was the correct one Scott, worked like a charm.