[OPEN-1084]Ext.ux.form.SpinnerField and non defered rendering

[tobiu]

hi team,

i am using the spinnerField inside a tabPanel with the config

deferredRender : false

when the field is not in the first active tab,
this leads to the following display errors:

1) the width gets increased by about 20px (the width of the trigger-elements)

        if (!f.width) {
            this.wrap.setWidth(el.getWidth() + this.trigger.getWidth());
        }

2) the splitter-element (this.splitter) gets displayed over the left side of the input field

this.splitter.setRight((Ext.isIE) ? 1 : 2).setTop(10).show();

the el.setTop() - method seems to work right, el.setRight() has no chance, since the width is not known when rendering the element invisible. maybe something like setLeft (el.getWidth() - (Ext.isIE) ? 1 : 2).

i will try a bit more changing the constructor and let you know if i find a hotfix.


with kind regards
tobiu

[tobiu]

this fix might not be written perfect, but it seems to solve the issue.
tested with defered and non defered rendering in firefox

    doRender: function(ct, position){
        var el = this.el = this.field.getEl();
        var f = this.field;
        
        if (!f.wrap) {
            f.wrap = this.wrap = el.wrap({
                cls: "x-form-field-wrap"
            });
        }
        else {
            this.wrap = f.wrap.addClass('x-form-field-wrap');
        }

        this.trigger = this.wrap.createChild({
            tag: "img",
            src: Ext.BLANK_IMAGE_URL,
            cls: "x-form-trigger " + this.triggerClass
        });

        if (!f.width) {
            this.wrap.setWidth(el.getWidth() + this.trigger.getWidth());
        }

        this.splitter = this.wrap.createChild({
            tag: 'div',
            cls: this.splitterClass,
            style: 'width:13px; height:2px;'
        });
        
        var tw = this.trigger.getWidth();
        tw = tw > 0 ? tw : 17;
        tw -= (Ext.isIE) ? 1 : 2;
        var l = (f.initialConfig.width - tw);
        this.splitter.setTop(10).setLeft(l).show();

        this.proxy = this.trigger.createProxy('', this.splitter, true);
        this.proxy.addClass("x-form-spinner-proxy");
        this.proxy.setStyle('left', '0px');
        this.proxy.setSize(14, 1);
        this.proxy.hide();
        this.dd = new Ext.dd.DDProxy(this.splitter.dom.id, "SpinnerDrag", {
            dragElId: this.proxy.id
        });

        this.initTrigger();
        this.initSpinner();
    }