When I extend some classes to customize field's display I lost anchoring when I used it in a form panel.

The code above is a simple example. The second field is provided by the extended class and it doesn't have the same length that the first one whereas they have the same anchor value.


Code:
<div style="padding:10px;">
    <br/>
    <h1>Test</h1>
    <br/>
    <div id="form"></div>
</div>

<style type="text/css">
<!--
.ok-form-field-required {
    border-color: red;
}
-->
</style>


<script type="text/javascript">
 Ext.require([
    'Ext.form.*'
]);

Ext.define('Ok.Form.CBaseField', {
    extend: 'Ext.form.BaseField',

    required: false,

    labelableRenderTpl: [
        '<tpl if="!hideLabel">',
            '<label<tpl if="inputId"> for="{inputId}"</tpl> class="{labelCls}"<tpl if="labelStyle"> style="{labelStyle}"</tpl>>',
                '<tpl if="fieldLabel && required">* {fieldLabel}{labelSeparator}</tpl>',
                '<tpl if="fieldLabel && !required">{fieldLabel}{labelSeparator}</tpl>',
            '</label>',
        '</tpl>',
        '<div class="{baseBodyCls} {fieldBodyCls}"<tpl if="inputId"> id="{baseBodyCls}-{inputId}"</tpl> role="presentation">{subTplMarkup}</div>',
        '<div class="{errorMsgCls}"></div>',
        '<div class="{clearCls}" role="presentation"></div>'
    ],

    initComponent: function() {
        this.callParent();
        this.fieldCls = this.required ? 'ok-form-field-required ' + this.fieldCls  : this.fieldCls;
        this.labelStyle = this.required ? 'color:red;' : '';
    },

    getLabelableRenderData: function() {
        return Ext.applyIf({ required: this.required }, this.callParent());
    }

});


Ext.define('Ok.Form.CTextField', {
    extend: 'Ok.Form.CBaseField',
    alias: 'widget.customtextfield',

    initComponent : function(){
        this.callParent();
    }

});

Ext.onReady(function(){

    Ext.QuickTips.init();

    var form = Ext.create('Ext.form.FormPanel', {
        el: 'form',
        title: 'Test',
        width: 500,
        autoHeight: true,
        bodyPadding: 10,
        defaults: {
            labelWidth: 120,
            labelAlign: 'right',
            labelSeparator: ' :'
        },
        items: [{
            xtype: 'textfield',
            anchor: '80%',
            fieldLabel: 'simple field',
            name: 'field1'
        },{
            xtype: 'customtextfield',
            anchor: '80%',
            fieldLabel: 'required field',
            name: 'field2',
            required: true
        }]
    });
    form.render();

});
</script>
Is anyone can help me to solve the problem or maybe it's a bug ?