PDA

View Full Version : Sliders in tabs showing wrong values



SantaBarbarian
20 Jul 2010, 8:58 AM
I have a tab panel with 5 tabs. The first 4 tabs have Ext.Sliders. All sliders run from 0 to 100. The sliders in the active tab show up with the correct value. The sliders in the other tabs show a value of 0 even though they were created with a different value.

If I remove the className='x-hide-display' from the tabs, then all sliders display properly. However, they are no longer rendered in the tabs, ie the content that I would like in the 2nd tab shows up below the content that I would like in the 1st tab, etc.

If I do the following at the end of the javascript, the display's tabbing is correct again, however the sliders in tabs 1 to 4 are revert to showing 0 values.



for (i=0; i < 5; i++)
fTabs.setActiveTab(i);
fTabs.setActiveTab(0);
I've tried putting the TabPanel inside a Ext.Panel and a container but that doesn't help either.

Here is the tabpanel code:


fTabs = new Ext.TabPanel({
renderTo: 'fTabs-div',
width:710,
activeTab: 0,
frame:true,
defaults:{autoHeight: true},
items:[{contentEl:'tab1-div', title: 'First Tab'},
{contentEl:'tab2-div', title: 'Second Tab'},
{contentEl:'tab3-div', title: 'Third Tab'},
{contentEl:'tab4-div', title: 'Fourth Tab'},
{contentEl:'specialTab-div', title: 'Sub-tabbed Tab'}]
});
Here is the relevant html:



<div id="fTabs-div">
<div id="tab1-div">
<div id='content1-div'></div>
</div>
<div id="tab2-div">
<div id='content2-div'></div>
</div>
<div id="tab3-div">
<div id='content3-div'></div>
</div>
<div id="tab4-div">
<div id='content4-div'></div>
</div>
<div id='specialTab-div'>
<div id='specialContent-div'></div>
</div>
</div>
Here is how tab1-div's sliders are setup (tab2 is pretty much setup identically):


document.getElementById("tab1-div").innerHTML = getTab1Text(data.tab1);
for (var i = 0; i < data.tab1.length; i++) {
var tip = new Ext.ux.SliderTip({
getText: function(slider){
var tag = 'rSliderVal' + slider.name.substring(7, slider.name.length);
document.getElementById(tag).innerHTML = slider.getValue() + '%';
return String.format( '<big>{0}%</big>', slider.getValue() );
}
});
var slider = new Ext.Slider({renderTo:'rSlider' + (i+1),width:230, value:data.tab1[i].per, increment:1, minValue:\
0, maxValue:100, plugins:tip, name: 'RSlider' + (i+1), helpText:'abc'});
var text = 'help text here';

new Ext.ToolTip({
target: 'rSlider' + (i+1),
html: text,
title: 'Percentage:',
autoHide: true,
closable: false,
draggable:true
});

}

Does anyone have any suggestions for how to make a TabPanel render properly? Thanks!