PDA

View Full Version : [OPEN-1084]Ext.ux.form.SpinnerField and non defered rendering



tobiu
29 Jun 2010, 2:01 AM
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
29 Jun 2010, 5:26 AM
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();
}