1. #1
    Sencha Premium Member
    Join Date
    Nov 2011
    Posts
    162
    Vote Rating
    2
    Answers
    7
    UbuntuPenguin is on a distinguished road

      1  

    Default Answered: Create uneditable text block

    Answered: Create uneditable text block


    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.
    Sincerely,
    Ubu.

  2. Can you use readOnly?

    Code:
    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%'
        }]
    });
    Scott.

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    Answers
    690
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Can you use readOnly?

    Code:
    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%'
        }]
    });
    Scott.

  4. #3
    Sencha Premium Member vadimv's Avatar
    Join Date
    Sep 2010
    Location
    Cluj, Romania
    Posts
    654
    Vote Rating
    26
    Answers
    21
    vadimv will become famous soon enough vadimv will become famous soon enough

      0  

    Default


    Hmmm.....sth you are doing wrong there, post some code or take a look at the one below, which is fairly simply:
    Code:
    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>');

  5. #4
    Sencha Premium Member
    Join Date
    Nov 2011
    Posts
    162
    Vote Rating
    2
    Answers
    7
    UbuntuPenguin is on a distinguished road

      0  

    Default


    Thanks everyone. Your suggestion was the correct one Scott, worked like a charm.

Thread Participants: 2

Tags for this Thread