PDA

View Full Version : How change background color of textfields in formpanel



simonr25
31 Dec 2011, 4:45 AM
Hello,
I have created a Ext.form.FormPanel with items as below.
I require to change the background color of the textfields only, not the field labels aswell.
so the line below, style: 'background-color: #FFFFE0;' doesn't work.
How can this be done?
kind regards,...


...
var formPanel = Ext.create('Ext.form.FormPanel', { //
itemId : 'formPanel',
frame : true,
layout : 'anchor',
defaultType : 'textfield',


defaults : {
anchor : '-10',
labelWidth : 65
},
items : [
{
fieldLabel : 'First name',
name : 'firstName',
style: 'background-color: #FFFFE0;'
},
{
fieldLabel : 'Last name',
name : 'lastName'
}
],
...

mitchellsimoens
31 Dec 2011, 7:30 AM
Assign the cls config to a CSS name and then do it in CSS

slemmon
31 Dec 2011, 2:06 PM
Check out textfield's fieldBodyCls property:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Labelable-cfg-fieldBodyCls


(http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Labelable-cfg-fieldBodyCls)xtype: 'textfield',
(http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Labelable-cfg-fieldBodyCls)name: 'email',
fieldLabel: 'Email Address',
fieldBodyCls: 'yellow'

(http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Labelable-cfg-fieldBodyCls)

.yellow
{
background-color: yellow;
}