PDA

View Full Version : [OPEN] [CLOSED-1058] Text is too light when text area is set to be read only



ak_mike
17 Jun 2010, 5:27 AM
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

jsakalos
17 Jun 2010, 6:34 AM
x-item-disabled CSS class gets added to the list of CSS classes when either text field or text area are being set to readonlyThis doesn't make sense indeed. Moving this thread to bugs for devel-team to fix it or to explain rationale behind it, at least.

ak_mike
17 Jun 2010, 7:59 AM
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.

ak_mike
17 Jun 2010, 8:00 AM
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.

Jamie Avins
17 Jun 2010, 4:16 PM
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.

jsakalos
17 Jun 2010, 11:13 PM
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.

ak_mike
18 Jun 2010, 7:17 AM
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

evant
27 Jun 2010, 9:35 PM
The current SVN code doesn't do that at all, nor does it seem to do it in 3.1 either.

For example:



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.