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

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

Ext 3.2.1

Adapter used:


css used:

only default ext-all.css

Browser versions tested against:

IE 8
FF 3.6
Google chrome

Operating System:



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


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 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:

new Ext.form.FormPanel({
renderTo: document.body,
hideMode: 'offsets', // just to make sure
labelWidth : 100,
items : [{
xtype: 'tabpanel',
activeTab: 0,
deferredRender: false,
hideMode: 'offsets',
layoutOnTabChange: true, // or false, makes no difference
defaults:{autoScroll: true},
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,

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,

13 Jul 2010, 6:11 AM
here is the global fix, resolving this issue and some others as well:

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