You found a bug! We've classified it as a bug in our system. We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    7
    Vote Rating
    0
    ak_mike is on a distinguished road

      0  

    Default [CLOSED-1058] Text is too light when text area is set to be read only

    [CLOSED-1058] Text is too light when text area is set to be read only


    At first I used a disable property and override the CSS class to use my own, but that only works in FireFox in IE text is still gray, but I think it’s the nature of the IE browser. But then I read that Ext recommend using read only instead, but that does not works and text is still gray. My question is why when I am setting text area to be read only I get following output:
    <textarea name="ext-comp-1084" class=" x-form-textarea x-item-disabled x-form-field" id="ext-comp-1084" style="background-image: none; border-bottom: 1px; border-left: 1px; background-color: #ffffcc; width: 1509px; height: 123px; border-top: 1px; border-right: 1px;" readOnly="readonly" qtip="" autocomplete="off">
    I am using following code to
    {
    xtype:'textarea',
    readOnly: true,
    disabledClass:'x-item-notepaddisabled',
    anchor:'100%',
    style:'border:1;background-color:#ffffcc;background-image:none',
    ref:'../../../../../../../txtNotepad',
    value:'Some test value'
    }

    My question is why is x-item-disabled class gets added to the items in the class when i am not setting textarea to be disabled??? Also, looking at EXT code that generates the area i am seeing that x-item-disabled CSS class gets added to the list of CSS classes when either text field or text area are being set to readonly.

    Thank you in advance for any tips on how to solve this.

    Mike

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,521
    Vote Rating
    377
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    x-item-disabled CSS class gets added to the list of CSS classes when either text field or text area are being set to readonly
    This doesn't make sense indeed. Moving this thread to bugs for devel-team to fix it or to explain rationale behind it, at least.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  3. #3
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    7
    Vote Rating
    0
    ak_mike is on a distinguished road

      0  

    Default


    I've tried to do the following for the work around

    mypage.txtNotepad.removeClass('x-item-disabled');

    but the x-item-disabled is not getting removed. Is there another way i can do this? As long as i can find a way to removed the x-item-disabled from the class list it will work perfectly, my text area in that case is still read only and text displayed nicely in black font.

  4. #4
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    7
    Vote Rating
    0
    ak_mike is on a distinguished road

      0  

    Default


    I've tried to do the following for the work around

    mypage.txtNotepad.removeClass('x-item-disabled');

    but the x-item-disabled is not getting removed. Is there another way i can do this? As long as i can find a way to removed the x-item-disabled from the class list it will work perfectly, my text area in that case is still read only and text displayed nicely in black font.

  5. #5
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Could be an effort to provide a read-only 'look' to fields types which don't support them by default. We'll look into it though.

  6. #6
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,521
    Vote Rating
    377
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    I evaluated it as adding x-item-disable class to read-only component. I don't know if it's on purpose or some leftover/bug.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  7. #7
    Ext JS Premium Member
    Join Date
    Nov 2008
    Posts
    7
    Vote Rating
    0
    ak_mike is on a distinguished road

      0  

    Default


    I was able to find a workaround to this issue. I've added a listener for the render event and when it fires i am calling a my function that removes the CSS x-item-disable class from the list.

    This is the code:
    {
    xtype:'textarea',
    readOnly: true,
    anchor:'100%',
    style:'border:1;background-color:#ffffcc;background-image:none',
    ref:'../../../../../../../txtNotepad',
    value:'Some test value',
    listeners:{
    render: renderNotepad
    }
    }

    function renderNotepad(mycomp) {
    if (mycomp.el.dom.readOnly)
    mycomp.removeClass('x-item-disabled');
    }

    This is the result that i got:

    <textarea name="ext-comp-1084" class=" x-form-textarea x-form-field " id="ext-comp-1084" style="background-image: none; border-bottom: 1px; border-left: 1px; background-color: #ffffcc; width: 1509px; height: 123px; border-top: 1px; border-right: 1px;" readOnly="readonly" qtip="" autocomplete="off">

    But i think there is still a bug in Ext code, specifically in this part of the code (just an FYI the version we are using is 3.1:

    setReadOnly : function(readOnly){
    if(this.rendered){
    this.el.dom.readOnly = readOnly;
    // CUSTOMIZATION: begin block
    if (readOnly){
    this.addClass('x-item-disabled');
    }
    else {
    this.removeClass('x-item-disabled');
    }
    // CUSTOMIZATION: end block
    }
    this.readOnly = readOnly;
    }

    Thank you,
    Mike

  8. #8
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,850
    Vote Rating
    610
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    The current SVN code doesn't do that at all, nor does it seem to do it in 3.1 either.

    For example:

    Code:
    Ext.onReady(function(){
        new Ext.form.FormPanel({
            width: 400,
            height: 400,
            renderTo: document.body,
            items: {
                xtype: 'textarea',
                readOnly: true,
                value: 'Foo'
            }
        });
    });
    Running this code, in either IE or FF, x-item-disabled is never added and the text is black. I have no idea why you're seeing this issue, but the cause doesn't seem to be something from the library.

    Since you didn't provide a test case it's difficult to comment, but I don't think the problem is in the code. Feel free to open another new help thread if you like.

    Marking as closed.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

Similar Threads

  1. Rich text for Text Area
    By innek81 in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 10 Jun 2010, 10:31 PM
  2. Blank Text in text Area
    By MuffinBoy in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 11 Jun 2009, 11:46 PM
  3. How to set text of the specified text item of statusbar?
    By liuzhisheng in forum Ext 2.x: Help & Discussion
    Replies: 5
    Last Post: 5 Aug 2008, 7:00 PM
  4. Text Area not visible in IE
    By pshah in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 14 Jul 2008, 3:52 AM

Thread Participants: 3