[CLOSED] Datefield disappears on disable

[FCTim]

Ext version tested:


Ext 3.2.2



Adapter used:


ext



css used:


only default ext-all.css





Browser versions tested against:


IE8
IE7



Operating System:


WinXP Pro



Description:


I have a datefield or checkbox field that it initially hidden. I call the show() method, disable() method and hide() method and everything looks correct. The second time I call the disable() method, the inputfield on the datefield disappear until I move my mouse.



Test Case:


Ext.namespace('FC', 'FC.Form', 'FC.Field', 'FC.Data');
Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';

//Main ExtJS Function. Runs after DOM is ready. Similar to but more effective then window.onload().
Ext.onReady(function(){
Ext.QuickTips.init(); //Required to use Quicktips.

//Global flag which determines if strict date parsing should be used. Prevents date rollover.
Date.useStrict = true;

//Hiding a field will now hide the associated label.
Ext.layout.FormLayout.prototype.trackLabels = true;

//Main Form layout
var form = new Ext.Panel({
id : 'baseForm',
layout : 'form',
frame : true,
bodyStyle : 'padding:0px 5px 0px 0px',
baseCls : 'x-plain',
renderTo : document.getElementById("attachBody"),
items : [
FC.Form.batchFieldSet
]

}); //End FormPanel

}); //End onReady

// Start Batch Info FieldSet
FC.Form.batchFieldSet = new Ext.form.FieldSet({
layout : 'hbox',
title : 'Batch Information',
id : 'batchFieldSet',
collapsible : true,
autoHeight : true,
buttonAlign : 'left',
items : [
{
xtype : 'container',
layout : 'form',
labelWidth : 80,
labelSeparator : '',
style : {
padding: '0 10px 0 0'
},
items : [
{
xtype : 'datefield',
id : 'extBatchDte',
fieldLabel : 'Batch Date',
format : 'm/d/Y',
value : new Date(),
hidden : true,
hideMode : 'offsets',
allowBlank : false,
width : 100,
labelStyle : 'font-size:0.75em;font-weight:bold;'
}]
}],
fbar : [
{
xtype : 'button',
id : 'btnBtcNew',
text : 'Show',
disabled : false,
hidden : false,
hideMode : 'offsets',
listeners : {
'click' : function(button, event) {
Ext.getCmp('extBatchDte').show();
Ext.getCmp('batchFieldSet').doLayout(false, true);
}
}
},
{
xtype : 'button',
id : 'btnBtcDisable',
text : 'Disable',
disabled : false,
hidden : false,
hideMode : 'offsets',
listeners : {
'click' : function(button, event) {
Ext.getCmp('extBatchDte').disable();
}
}
},
{
xtype : 'button',
id : 'btnBtcHide',
text : 'Hide',
disabled : false,
hidden : false,
hideMode : 'offsets',
listeners : {
'click' : function(button, event) {
Ext.getCmp('extBatchDte').hide().enable();
Ext.getCmp('batchFieldSet').doLayout(false, true);
}
}
}]
});
Steps to reproduce the problem:


Click the Show button, then the disable button and the hide button.
Click the Show button and again and the Disable button. Notice that the inputfield portion of the datefield is missing.
If I move my mouse or start typing, it will re-appear.



The result that was expected:


Field would have shown as disabled just like the first time.



The result that occurs instead:


The input portion of the datefield is missing.



Screenshot or Video:


First Run-through
21222
Second Run-through
21223



Debugging already done:


My only guess is that it is related to it being rendered already?

[evant]

Sounds like a weird repaint issue. After you call disable, try calling:



field.el.repaint();

[FCTim]

It didn't seem to help. I tried field.el.repaint() and field.getEl().repaint() just in case.

I took the fieldset and hbox out of the equation and I am still running into the issue, FYI.



//Main ExtJS Function. Runs after DOM is ready. Similar to but more effective then window.onload().
Ext.onReady(function () {
Ext.QuickTips.init(); //Required to use Quicktips.
//Global flag which determines if strict date parsing should be used. Prevents date rollover.
Date.useStrict = true;
//Hiding a field will now hide the associated label.
Ext.layout.FormLayout.prototype.trackLabels = true;
//Main Form layout
var form = new Ext.Panel({
id: 'baseForm',
layout: 'form',
frame: true,
bodyStyle: 'padding:0px 5px 0px 0px',
buttonAlign: 'left',
baseCls: 'x-plain',
renderTo : Ext.getBody(),
items: [{
xtype: 'container',
layout: 'form',
labelWidth: 80,
labelSeparator: '',
style: {
padding: '0 10px 0 0'
}, items: [{
xtype: 'datefield',
id: 'extBatchDte',
fieldLabel: 'Batch Date',
format: 'm/d/Y',
value: new Date(),
hidden: true,
hideMode: 'offsets',
allowBlank: false,
width: 100,
labelStyle: 'font-size:0.75em;font-weight:bold;'
}]
}],
fbar: [{
xtype: 'button',
id: 'btnBtcNew',
text: 'Show',
disabled: false,
hidden: false,
hideMode: 'offsets',
listeners: {
'click': function (button, event) {
Ext.getCmp('extBatchDte').show();
}
}
}, {
xtype: 'button',
id: 'btnBtcDisable',
text: 'Disable',
disabled: false,
hidden: false,
hideMode: 'offsets',
listeners: {
'click': function (button, event) {
Ext.getCmp('extBatchDte').disable();
Ext.getCmp('extBatchDte').getEl().repaint();
}
}
}, {
xtype: 'button',
id: 'btnBtcHide',
text: 'Hide',
disabled: false,
hidden: false,
hideMode: 'offsets',
listeners: {
'click': function (button, event) {
Ext.getCmp('extBatchDte').hide().enable();
}
}
}]
}); //End FormPanel
}); //End onReady

[evant]

Why are you using hideMode: 'offsets' everywhere? It just seems you've plastered it about for no reason.

[FCTim]

I was having problems with form fields not rendering correctly in other browsers when they were initially hidden and then shown later. If I apply it to the panel will it trickle down to the children as well?

Edit: After testing, the answer is yes. I just got confused since that property is on every form field since they all extend from Ext.Component

[FCTim]

I see that this is marked as closed now..... was there a fix? My earlier post just meant that I learned more about hideMode and panels, not that it fixed the issue...