css - テキストフィールドコントロールの横にあるアイコンのExtjs配置

Question

テキストフィールドの右側にアイコンが必要です。テキストボックスをラップすると、そのラッパーの相対位置がわかります。このラップに絶対位置のdivを追加し、クラスを設定してアイコンを表示します。私の質問は、絶対位置のアイコンが相対位置のラッパー内に配置されるべきではないということです。レンダリング後、firebugのHTMLタブのテキストフィールドテーブルの外側にラッパーとアイコン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のクラスが設定されているポイントで、デバッグポイントをfirebugに配置すると、スクリーンショットのテキストフィールドの横にアイコンが正しく表示されますが、レンダリングが完了すると、アイコンは別の場所に配置されます。

アイコンクラスafterRenderでテキストフィールドをラップします-アイコンクラスが設定された後のアイコンの視覚的表示。

アイコンクラスでテキストフィールドをラップします-this.wrap.dom.outerHtml

dom構造-レンダリングが完了すると、フィールドラップクラスを持つdivアイコンクラスがテキストフィールドdivの外に出ます。