PDA

View Full Version : Hidden sliders not showing up with correct defaults



borg
30 Aug 2010, 8:05 AM
I've got a fieldset that's hidden with a slider in it. When I run the following:


fieldsetid.enable();
fieldsetid.show();

It shows the slider but the slider thumb is off and the defaults aren't loaded. If I submit the form it won't submit the value of 5 that I set. I remember reading about making your sliders hide using a different method but I'm not sure if that fixed the issue or not. Is there a way to make this work?


id: 'fieldsetid',
hidden: true,
xtype: 'fieldset',
title: 'blah',
collapsible: false,
autoHeight: true,
autoWidth: true,
defaultType: 'textfield',
items: [{
xtype: 'sliderfield',
name: 'q1',
width: 174,
increment: 1,
value: 5,
minValue: 1,
maxValue: 5
}]

This is how the slider should look (top) and how it looks after being unhidden (bottom)

http://imgur.com/MsU6r.gif

tobiu
30 Aug 2010, 8:43 AM
take a look at this (closed but not fixed...) issue.
i provided a workaround-fix and a general fix changing the el.getWidth-method.

forum/showthread.php?104038


kind regards,
tobiu

borg
30 Aug 2010, 9:11 AM
It seems to fix the defaults issue but i'm using a custom slider background style and your fix doesn't make my slider thumb go all the way left. If you're interested in testing a fix I'll provide sample code

tobiu
30 Aug 2010, 9:42 AM
sure, post a small testcase here and i check it out.


kind regards,
tobiu

borg
30 Aug 2010, 10:10 AM
download this gif and put it in the same folder as this code, name it: ticksnumbered.gif

http://imgur.com/KWxnj.gif



<div id="loading-mask" style=""></div>
<div id="loading">
<div id="loading-indicator"><img src="ext/resources/images/default/shared/large-loading.gif" /><br />Loading...</div>
</div>

<style type="text/css">
#loading-mask{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
z-index:20000;
background-color:white;
}
#loading{
position:absolute;
left:45%;
top:40%;
padding:2px;
z-index:20001;
height:auto;
}
#loading-indicator {
font:bold 13px Tahoma, Verdana, Arial, Helvetica, sans-serif;
position:absolute;
top:35%;
left:43%;
color:#444;
text-align:center;
}
</style>

<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'ext/resources/images/default/s.gif';

Ext.onReady(function(){
// remove loading mask
setTimeout(function(){
Ext.get('loading').remove();
Ext.get('loading-mask').fadeOut({remove:true});
}, 250);

var theform = new Ext.FormPanel({
labelWidth: 100,
buttonAlign: 'center',
url: 'example.htm',
renderTo: 'form',
title: 'form title',
frame: true,
border: true,
bodyStyle: 'padding: 5px 5px 0',
width: 750,
items: [{
id: 'idfieldset',
hidden: true,
xtype: 'fieldset',
title: 'fieldset title',
collapsible: false,
autoHeight: true,
autoWidth: true,
defaultType: 'textfield',
items: [{
xtype: 'box',
autoEl: {
cn: 'words:'
},
style: 'padding: 8px 0px 12px 0px',
cls: 'x-form-item',
width: '100%'
},{
xtype: 'container',
autoEl: 'div',
style: 'padding-top: 8px; background: url(ticksnumbered.gif) no-repeat;',
items: [{
xtype: 'sliderfield',
name: 'q1',
width: 174,
increment: 1,
value: 5,
minValue: 1,
maxValue: 5
}]
}]
}],

buttons: [{
text: 'Submit',
formBind: true,
scope: this,
handler: function () {
theform.getForm().submit({
url: this.url,
scope: this,
success: function (form, action) {
},
failure: function (form, action) {
},
waitMsg: 'Submitting...'
});
}
},{
text: 'Show',
handler: function () {
var fs = Ext.getCmp('idfieldset');

fs.enable();
fs.show();
}
}]
});
});
</script>

<div id="form"></div>

borg
22 Feb 2011, 11:50 AM
The suggestion to use hideMode:'offsets' by Condor does not work: http://www.sencha.com/forum/showthread.php?65857-Slider-thumb-is-broken-if-in-a-TabPanel-or-Card-Layout-%28with-examples%29&p=318237

this:


Ext.override(Ext.Slider, {
getRatio: function(){
var w = this.innerEl.getComputedWidth();
var v = this.maxValue - this.minValue;
return v == 0 ? w : (w/v);
}
});

or this:
http://www.sencha.com/forum/showthread.php?104064

makes the slider obey value: 5 but the offset is still off by 7px when the slider becomes unhidden

When it's at the left-most spot it should have element.style: -7px but it shows element.style: 0px