css - 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()
    });

当我将调试点放在萤火虫中，设置显示图标的 div 的类时，它会在文本字段旁边正确显示图标，其屏幕截图是，但在完成渲染后，图标位于其他地方。

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

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

dom 结构 - 完成渲染后，带有字段包装类的 div 图标类超出了文本字段 div。