[CLOSED-568] Some TextArea 'cls' and 'disabledClass' CSS don't override defaults

[dzwillia]

Hello,

I ran across an instance where I wanted to create a TextArea without any border or background color. I tried using the 'cls' as well as the disableClass (I don't want the text editable) config to specify the style. The color CSS worked, however the border and background-image CSS did not work (across all browsers). However, explicitly specifying the 'style' in the config did work. I didn't have a chance to test all CSS styles would potentially override the default styles for the TextArea, but at least these two are not being overridden properly. It seems to me that these extra CSS classes should function the same for a TextArea as they do for a TextField. I've attached a set of screenshots documenting the differences between the way these CSS styles work for a text field vs. a text area. In addition to the screenshots included, I also tested the following scenarios which I couldn't include screenshots for due to a 5 attachment limit:

- Safari 4.0.4 (Mac): same results as Chrome 5.0 Beta (Mac)
- Firefox 3.6 (Windows): same results as Firefox 2.0.0.20 (Windows)
- IE6 (Windows): same results as IE7 (Windows)

Tested on Ext JS 3.x (3.0, 3.1 and 3.1.1).

CSS:

.test {
border: 0;
background-image: none;
color: #ff0000;
}Javascript:

new Ext.form.FormPanel({
title: "Panel #1: Testing textfield and textarea with cls: 'test'",
renderTo: Ext.getBody(),
width: 680,
padding: 10,

items: [{
xtype: "textfield",
fieldLabel: "Text Field",
width: 550,
value: 'Textfield sample text',
cls: 'test'
},{
xtype: 'textarea',
fieldLabel: "Text Area",
width: 280,
value: 'Textarea sample text',
cls: 'test'
}]
});

new Ext.form.FormPanel({
title: "Panel #2: Testing disabled textfield and disabled textarea with disabledClass: 'test'",
renderTo: Ext.getBody(),
width: 680,
padding: 10,

items: [{
xtype: "textfield",
fieldLabel: "Text Field",
width: 550,
value: 'Textfield sample text',
disabled: true,
disabledClass: 'test'
},{
xtype: 'textarea',
fieldLabel: "Text Area",
width: 280,
value: 'Textarea sample text',
disabled: true,
disabledClass: 'test'
}]
});

new Ext.form.FormPanel({
title: "Panel #3: Testing textfield and textarea with 'style' set",
renderTo: Ext.getBody(),
width: 680,
padding: 10,

items: [{
xtype: "textfield",
fieldLabel: "Text Field",
width: 550,
value: 'Textfield sample text',
style: 'border: 0; background-image: none; color: #ff0000'
},{
xtype: 'textarea',
width: 280,
fieldLabel: "Text Area",
value: 'Textarea sample text',
style: 'border: 0; background-image: none; color: #ff0000'

}]
});

[jayrobinson]

".test, textarea.test" is enough to override. It's much more reasonable to write your attached stylesheet as more specific than ".x-form-text, textarea.x-form-field".

Also, remember there is a .x-form-focus class.

[dzwillia]

Jay,

Thanks much for the quick tip on adding the 'textarea.test' CSS, although I was under the impression that for the 'cls', etc. configs, you could just have a global '.my-global-css-class' style. Apparently not (at least for some styles).

As an aside, your updated CSS still does not override the gray disabled text on all IE browsers when specifying a 'disabledClass' in the config. Background image and border are both gone, but the text color is not red.

Perhaps you can/should create a new thread for this issue, though...