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

    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,320
    Vote Rating
    486
    Answers
    705
    scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute scottmartin has a reputation beyond repute

      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
    657
    Vote Rating
    39
    Answers
    21
    vadimv has a spectacular aura about vadimv has a spectacular aura about

      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