Extjs文本字段控件旁边的图标对齐方式

Question

我想要文本字段右侧的图标，我想要的是我包装文本框并且包装器具有相对位置然后到此包装我附加一个具有绝对位置的div然后将类设置为它以显示图标。我的问题是具有绝对位置的图标不应该位于相对定位的包装器内。在渲染后，我在firebug的HTML选项卡中看到textfield表外的包装器和图标div。屏幕截图的代码如下所示。

<style type="text/css">

    .icon {
        background-image: url("../Content/images/not_documented.png");
        cursor: pointer;
        height: 16px;            
        width: 16px;            
    }

</style>
    <script type="text/javascript">

Ext.onReady(function () {

    //define a new custom text field
    Ext.define('WithStatusTextField', {
        extend: 'Ext.form.field.Text',
        alias: 'widget.withStatusTextField',
        iconCls: 'icon ',
        fieldStyle: {
            textTransform: "uppercase"
        },
        initComponent: function () {
            this.callParent(arguments);
        },
        afterRender: function () {
            if (this.iconCls) {
                var iconCls = this.iconCls;
                //delete this.iconCls;
                this.setIconCls(iconCls);
            }
            this.callParent(arguments);

        },

        renderIconEl: function () {
            if (!this.wrap) {
                this.wrap = this.el.wrap({ cls: "x-form-field-wrap" });
                this.positionEl = this.wrap;
            }

            this.wrap.applyStyles({ position: "relative" });

            this.icon = Ext.DomHelper.append(this.el.up("div.x-form-field-wrap") || this.wrap,
            {
                tag: "div",
                style: "position:absolute"
            }, true)
            if (!this.width) {
                this.wrap.setWidth(this.el.getWidth() + 50);
            }
            this.icon.on("click", function (e, t) {
                this.fireEvent("iconclick", this, e, t);
            }, this);
        },
        setIconCls: function (iconCls) {
            if (this.iconCls) {
                this.renderIconEl();
            }
            this.iconCls = iconCls;
            this.icon.dom.className = iconCls;
            //this.icon.alignTo(this.el, 'tl-tr', [2, 0]);
        },
        listeners: {
            change: function (obj, newValue) {
                console.log(newValue);
                obj.setRawValue(newValue.toUpperCase());
            }
        }
    });

    Ext.create('Ext.form.Panel', {
        title: 'Simple Form',
        bodyPadding: 5,
        width: 350,
        height: 150,

        // The fields
        defaultType: 'withStatusTextField',
        items: [{
            fieldLabel: 'First Name',
            name: 'first',
            allowBlank: false                
        },{
            fieldLabel: 'Last Name',
            name: 'last',
            allowBlank: false
        }],

        // Reset and Submit buttons
        buttons: [{
            text: 'Reset',
            handler: function() {
                this.up('form').getForm().reset();
            }
        }, {
            text: 'Submit',
            formBind: true, //only enabled once the form is valid
            disabled: true,
            handler: function() {
                var form = this.up('form').getForm();
                if (form.isValid()) {
                    form.submit({
                        success: function(form, action) {
                           Ext.Msg.alert('Success', action.result.msg);
                        },
                        failure: function(form, action) {
                            Ext.Msg.alert('Failed', action.result.msg);
                        }
                    });
                }
            }
        }],
        renderTo: Ext.getBody()
    });

当我将调试点放在firebug中设置显示图标的div的类时，它会在文本字段旁边显示正确的图标，其截图是在完成渲染之后，图标位于其他位置

使用图标类afterRender包装文本字段 - 设置图标类后图标的可视化显示。

使用图标类包装文本字段 - this.wrap.dom.outerHtml

dom结构 - 在完成渲染之后，带有字段换行类的div图标类超出了textfield div。