PDA

View Full Version : [CLOSED] Ext.form.SliderField -> rendering hidden



tobiu
13 Jul 2010, 1:26 AM
Ext version tested:

Ext 3.2.1


Adapter used:

ext


css used:

only default ext-all.css


Browser versions tested against:

IE 8
FF 3.6
Google chrome


Operating System:

Win7


Description:

to describe the problem a bit more in detail:
i learned, that it is the best way for tabbed forms to use


deferredRender: false


for the tabPanel. I tried out


hideMode: 'offsets'


but still, the call inside the method getRatio of Ext.slider.MultiSlider


this.innerEl.getWidth()


returns 0, leaving the slider-thumb at a wrong position.

this leads to a bigger problem, so feel free to change the name of the topic and move it to open-discussion:

there is no event for elements, displaying the first time on the screen.

the events render / afterrender fire after the hidden rendering is finished.
the event show for the sliderfield or its containing slider does not get fired, when a tab is activated.

as a feature-request: on activation of a tab or card, there should fire an event for each child (for all levels of children). this could be the "show" event or a new one.

at the moment i could set a listener on my second tab for onAcivate, search all children on any level that are sliderfields and afterwards call


this.slider.syncThumb();

. this feels like a horrible workaround and does not solve the problem in a generic way.
not using


deferredRender: false

would be the other choice, which i really don't like for tabbed forms.

Test Case:



Ext.onReady(function(){
new Ext.form.FormPanel({
renderTo: document.body,
width:600,
hideMode: 'offsets', // just to make sure
height:250,
layout:'fit',
border:false,
labelWidth : 100,
items : [{
xtype: 'tabpanel',
activeTab: 0,
deferredRender: false,
hideMode: 'offsets',
layoutOnTabChange: true, // or false, makes no difference
plain:true,
defaults:{autoScroll: true},
items:[{
title: 'Tab 1',
html: "My content was added during construction."
},{
title: 'Tab 2',
layout: 'form',
items: [{
fieldLabel: 'Sliderfield',
maxValue : 500,
minValue : 0,
value : 250,
width : 200,
xtype : 'sliderfield'
}]
}
]
}]
});
});


See this URL : http://


Steps to reproduce the problem:

activate tab 2


The result that was expected:

slider thumb showing on the middle of the slider element


The result that occurs instead:

slider thumb showing on the left end of the slider element


Possible fix:

i tracked down the method


getRatio : function(){
var w = this.innerEl.getWidth(),
v = this.maxValue - this.minValue;

return v == 0 ? w : (w/v);
}




feedback and thoughts are greatly appreciated!


kind regards,
tobiu

tobiu
13 Jul 2010, 5:27 AM
i found a hotfix:



Ext.override(Ext.slider.MultiSlider, {
getRatio : function(){
var w = this.innerEl.getWidth() || parseInt(this.innerEl.dom.style.width, 10) || 0,
v = this.maxValue - this.minValue;

return v == 0 ? w : (w/v);
}
});


but this is only a small point of something big.
i am opening a new topic, stay tuned ;)


kind regards,
tobiu

tobiu
13 Jul 2010, 6:11 AM
here is the global fix, resolving this issue and some others as well:
http://www.sencha.com/forum/showthread.php?104064

Jamie Avins
13 Jul 2010, 11:38 AM
I'll respond to the more general thread on your workaround.