Extjs 4.1.1 - Applying custom class to a form field - extjs4.1

Question

ExtJs 4.1.1 question
I am trying to apply a custom class to a set of textboxes inside a panel
the way i am doing is specifying fieldCls in defaults attribute of panel so that it applies to all the textboxes inside the panel
Below is a sample code
pnlTest = Ext.create('Ext.panel.Panel', {
width : 600
,height : 190
,defaults: {xtype:'textfield', fieldCls:'my-custom-class'}
,items : [
{name :'name1', fieldLabel:'Name 1' }
,{name :'name2', fieldLabel:'Name 2' }
,{name :'name3', fieldLabel:'Name 3' }
,{name :'name4', fieldLabel:'Name 4' }
]
});
Upon inspecting the generated HTML i see that the input element has 2 classes associated with it
my-custom-class and
x-form-field (exts default class for textbox
input)
i do not want to have x-form-field in my input element as it is overriding my styles
ExtJs documentation states that the default value for fieldCls is 'x-form-field' isnt that suppose to mean that if i provide my fieldCls value it must replace the default instead of appending to it, or am i doing something wrong here.
i did do bit research on this and did not find any bugs or concerns logged onto sencha forum.
can anyone guide me how to use fieldCls attribute of textfield ?
as an workaround currently i am providing fieldStyle to override all the styles but my goal is to use classes as my styles specifications strings are fairly long and dynamic
thankyou

Answer 1

Actually, you are still doing it in a non-standard way, the correct way to get the fieldCls to overwrite is doing it with the 'fieldDefaults' on a form panel according to the docs:
pnlTest = Ext.create('Ext.form.Panel', {
width : 600
,height : 190
,fieldDefaults: {xtype:'textfield', fieldCls:'my-custom-class'}
,items : [
{name :'name1', fieldLabel:'Name 1' }
,{name :'name2', fieldLabel:'Name 2' }
,{name :'name3', fieldLabel:'Name 3' }
,{name :'name4', fieldLabel:'Name 4' }
]
});

Answer 2

While adding the CSS files in HTML, I was including my CSS file and then ESTJS css file
therefore when an element gets multiple classes it gives precedence to the class which is included last (declared later)
so when my ext generated element looked like below
<input type='text' class='my-custom-class x-form-field'>
it was always using the x-form-field css instead of mine
Now i changed the css inclusion order.
i first include extjs css and then include my css file
this way my css declaration takes precedence over extjs css and give me the desired result
thank you all for looking into the question