PDA

View Full Version : 3.1.1 forceLayout broken in Explorer?



danellison
4 Mar 2010, 12:49 PM
Greetings again to the forum. I have a situation that is driving me over the deep end (and I mean really deep! :(() I have a tabpanel that contians a combobox and a bunch of hidden form fieldset components. Whenever the user selects a value from the combo I grab the data using Ext.Direct from the php backend. I then populate the form with the data.

My fieldsets are initially rendered hidden and collapsed. On expansion of the outer most fieldset I reveal several sub fieldsets and then attempt to update some DOM elements by ID that were created within the hidden fieldset.



function calcDeadlines() {
function adjustToDay(dat, days, day, cautiondays, alertdays){
var d = new Date();
d.setTime(dat.getTime()+(days * 24 * 60 * 60 * 1000));
if(day) {
var dayofweek = dateFormat(d, "ddd");
var i = 1;
if(day[0] == '-') {
var direction = 'desc';
day = day.substring(1);
}
while(dayofweek != day && i < 8){
if(direction != 'desc'){
d.setTime(d.getTime()+(24 * 60 * 60 * 1000));
} else {
d.setTime(d.getTime()-(24 * 60 * 60 * 1000));
}
dayofweek = dateFormat(d, "ddd");
i++;
}
}
return d;
}
var rcptdate = Ext.getCmp('reportreceived').getValue();
var dl = [{
title: 'fourweekrev',
date: adjustToDay(rcptdate, 28),
cautiondays: 10,
alertdays: 5
},{
title: 'lastdaytopi',
date: adjustToDay(rcptdate, 42, "Fri"),
cautiondays: 10,
alertdays: 5
},{
title: 'completepacketdue',
date: adjustToDay(rcptdate, 49, "Fri"),
cautiondays: 10,
alertdays: 5
},{
title: 'ocdduedate',
date: adjustToDay(rcptdate, 56, "Fri"),
cautiondays: 10,
alertdays: 5
},{
title: 'packettolisa',
date: adjustToDay(rcptdate, 56, "-Mon"),
cautiondays: 10,
alertdays: 5
}];

Ext.each(dl, function(item){
var mydate = dateFormat(item.date, "dddd, mmmm dS yyyy");
var now = new Date().getTime();
var alerttime = new Date(item.date).getTime()-(item.alertdays * 24 * 60 * 60 * 1000);
var cautiontime = new Date(item.date).getTime()-(item.cautiondays * 24 * 60 * 60 * 1000);
var html = '<span style="color: green;">'+mydate+'</span>';
if(now > cautiontime) {
html = '<span style="color: #FF9900;">'+mydate+'</span>';
}
if(now > alerttime) {
html = '<span style="color: red;">'+mydate+'</span>';
}
Ext.get(item.title).dom.innerHTML = html;
}, this);
}
}

var duedates = new Ext.form.FieldSet({
title: 'Deadlines',
layout: 'form',
autoHeight: true,
autoWidth: true,
hidden: true,
collapsible: true,
collapsed: true,
forceLayout: true,
labelAlign: 'right',
items: [
new Ext.BoxComponent({
forceLayout: true,
layout: 'fit',
autoEl: {
tag: 'table cellspacing=10',
width: '100%'
},
autoWidth: true,
autoHeight: true,
style: 'font-size: 1.2em;',
html:
'<tr><td width=520 style="text-align: right;"><em>Week 4 revision due:</em></td>'+
'<td style="color: red;" id="fourweekrev">Replace dynamically</td></tr>'+
'<tr><td width=520 style="text-align: right;"><em>Last day for the report to be sent to the PI for final revisions and assembly of packet:</td>'+
'<td style="color: red;" id="lastdaytopi"></td></tr>'+
'<tr><td width=520 style="text-align: right;"><em>Complete packet is due to the ICCI no later than:</td>'+
'<td style="color: red;" id="completepacketdue"></td></tr>'+
'<tr><td width=520 style="text-align: right;"><em>Date due to OCD:</em></td>'+
'<td id="ocdduedate" style="color: red;"></td></tr>'+
'<tr><td width=520 style="text-align: right;"><em>Project Packet Due to Lisa:</em></td>'+
'<td style="color: red;" id="packettolisa"></td></tr>'
})
]
});

duedates.on('expand', calcDeadlines, this);


Works fine in Firefox. Explorer however is another story. I get the sub fieldsets showing up just fine. However, they are ALL EMPTY! Trying to reference a DOM node that I created and wish to populate with dynamic data yields "null." (shown in red in the code example)

Isn't forceLayout supposed to force the elements to be rendered even if the container they are in is collapsed and/or hidden?

Any ideas before I burn up my last brain cell? Much appreciated.

Dan