PDA

View Full Version : GridPanel will not render data in IE6 - delay required?



Frith
15 Feb 2010, 7:10 AM
I have a JSON store and gridpanel.

Data is retrieved ok but is not displayed in IE6 (loadmask: true, load mask appears then clears).

Works fine in Firefox and Chrome.

I used Fiddler2 to try and diagnose what the problem may be in IE6 and discovered that, whenever I have Fiddler running, the data is displayed!!!!

I am assuming from this that, in order to get the data to display in IE6, I need to choose my moment to render???

Has anyone else found this in IE6 (must use IE6)?

Frith
15 Feb 2010, 10:37 AM
After some playing around with the sequencing of loading stores, I have managed to get IE6 to display correct data upon initial load.

I have a treeview with clickable entries which are supposed to update the contents of the main grid and some pie charts...this all works admirably in FF and Chrome.

However...in IE6, I have to wait around 10 seconds between clicking the different entries in order for the various stores to reload and show the associated data...i.e. if I click immediately, the load mask appears and disappears but the data in the grid panel is incorrect; it does not change.

I have added headers to the json response from the server to ensure that the content is expired and have set the 'Every visit to the page' in the IE configuration.

ANYBODY got any ideas?

I reiterate...no problem in FF or Chrome


Snippet:

listeners: {
click: function(n) {

hg = Ext.getCmp('hist-grid');



if(n.attributes.text == 'My Open Actions')
{
actions.load({ params: { 'action':'getmyopenactions','userid':myuserid }});
regactionspnl.setTitle('All Actions');
mypie.store.load ({ params: { 'action':'getmypie','userid':myuserid }});
regpie.store.load ({ params: {'action':'getregpie','regid':'all'}});


}
else
{

actions.load ({params: { 'action':'getactions','regid': n.attributes.text }});
regactionspnl.setTitle(n.attributes.text + ' Actions');
mypie.store.load ({ params: { 'action':'getmypie','userid':myuserid }});
regpie.store.load ({ params: {'action':'getregpie','regid': n.attributes.text}});

}

hg.store.load({ params: { 'action':'gethistory','actionid':'-1' }});
}
}

Frith
16 Feb 2010, 3:00 AM
Request:

POST http://172.29.14.225/actions/library/jsonwebservices.php HTTP/1.1
Accept: */*
Accept-Language: en-gb
Referer: http://172.29.14.225/actions/
x-requested-with: XMLHttpRequest
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Host: 172.29.14.225
Content-Length: 50
Connection: Keep-Alive
Pragma: no-cache

action=getmyopenactions&userid=16&pb=1266317538984


Response:

HTTP/1.1 200 OK
Date: Tue, 16 Feb 2010 10:52:20 GMT
Server: Apache/2.2.11 (Win32) DAV/2 mod_ssl/2.2.11 OpenSSL/0.9.8i mod_autoindex_color mod_auth_sspi/1.0.4 PHP/5.2.9
X-Powered-By: PHP/5.2.9
Pragma: no-cache
Expires: Wed, 01 Dec 1971 00:00:00 GMT
Cache-Control: no-store, no-cache, must-revalidate, pre-check=0, max-age=0
Content-Length: 382
Keep-Alive: timeout=5, max=47
Connection: Keep-Alive
Content-Type: text/plain

{"success":"true","rowcount": 1,"rows":[{"fullname":"Paul Andrews","actionid":"10","subject":"\u200bjb;ldkfhb;lb;lbh;","status":"Open","source":"CDR","dateraised":"2010-01-19 12:32:30","priority":"Medium","risk":"High","assignedto":"16","workpackage":"0","targetdate":"2010-01-28 00:00:00","actualdate":null,"regid":"1","wpname":null,"regname":"Fire Control","companyname":"Here"}]}

When I run Fiddler, everything works fine. When Fiddler is not running, load mask appears and disappears but the gridpanel does not update with new data.

Any assistance greatly appreciated....

If I wait 10 seconds (without fiddler running) the gridpanel updates fine but clicking links within 10 seconds of the previous click has no effect..the datachanged event of the store will not fire.

Frith
16 Feb 2010, 10:42 AM
Upon further investigation, if I click the link which calls the load function of the store for my gridpanel, nothing happens.

If I wait 10 seconds and click the link again...it works!!!

If I click any other link before 10 seconds (approx) have elapsed, nothing happens.

I have confirmed this with adding a listener to the datachanged event of the store.

This only happens in IE6.

Really confused!!!!!!



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
include_once('library/db.php');

$acct = $_SERVER['PHP_AUTH_USER'];
$p = strrchr($acct,'\\');
$acct = substr($p, 1);

$c = db_connect();
$user = db_getUser($c, $acct);
$regs = db_getRegisters($c);
db_disconnect($c);

if(is_array($user))
{
$userid = $user['userid'];
$company = $user['companyname'];
$fullname = $user['fullname'];
}

// Get Registers
for($i=0;$i<count($regs);$i++)
{
$r .= "{ text: '".$regs[$i]."', leaf: true },";
}

?>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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-debug.js"></script>
<link rel="stylesheet" type="text/css" href="/ext/resources/css/xtheme-slickness.css" />

<style type="text/css">
.x-panel-mc { font-size: 12px; line-height: 18px; }
.x-panel-header-noborder { border-bottom:none; }
.topbanner { padding-top: 20px; padding-left: 50px; background-image: url('images/top-tab.gif'); background-repeat: no-repeat; background-position: right; width: 1490px; height: 46px; }
.clsFieldName { font-weight: bold; padding-left: 16px; text-align: right;}
.clsFieldValue { width: 200px; }
</style>

<title>Thales Action Register</title>
<script type="text/javascript">
var myuserid = <?php echo $userid; ?>;
var currentActionId = 0;
var months = new Array('Jan', 'Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec');

function getSeverityId(s)
{
switch(s)
{
case 'Low':
return '0';
break;
case 'Medium':
return '1';
break;
case 'High':
return '2';
break;
}
}

function getStatusId(s)
{
switch(s)
{
case 'Open':
return '0';
break;
case 'In Work':
return '1';
break;
case 'Closed':
return '2';
break;
}
}
</script>
<script type="text/javascript" src="js/actionsgrid.js"></script>
<script type="text/javascript" src="js/newaction.js"></script>
<script type="text/javascript" src="js/updateform.js"></script>
<script type="text/javascript" src="js/viewhistory.js"></script>
<script type="text/javascript" src="js/pies.js"></script>
<script type="text/javascript">

Ext.QuickTips.init();

var myImage = new Ext.BoxComponent({
autoEl: {
tag: 'div',
cls: 'topbanner',
html: '<img src=\'images/logo.gif\' />'

}
});

grid.on('rowclick', function(grid, rowIndex, e) {
var histrec = grid.getStore().getAt(rowIndex);

histGrid.getStore().load({
params: { 'action':'gethistory','actionid': histrec.data.actionid }
});

});

grid.on('rowdblclick', function(grid, rowIndex, e) {
var r = grid.getStore().getAt(rowIndex);

currentActionId = r.get('actionid');
var dt = new Date(r.get('targetdate'));
var sdt = dt.getDate() + ' ' + months[dt.getMonth()] + ' ' + dt.getFullYear();

Ext.getCmp('uf-userid').setValue(myuserid);
Ext.getCmp('current-action-id').setValue(currentActionId);

Ext.getCmp('assignedtoin').setValue(r.get('assignedto'));
Ext.getCmp('cmbassignedtoout').setValue(r.get('assignedto'));

Ext.getCmp('targetin').setValue(sdt);
Ext.getCmp('targetout').setValue(r.get('targetdate'));

Ext.getCmp('priorityin').setValue(r.get('priority'));
Ext.getCmp('priorityout').setValue(getSeverityId(r.get('priority')));

Ext.getCmp('riskin').setValue(r.get('risk'));
Ext.getCmp('riskout').setValue(getSeverityId(r.get('risk')));

Ext.getCmp('statusin').setValue(r.get('status'));
Ext.getCmp('statusout').setValue(getStatusId(r.get('status')));

Ext.getCmp('companyin').setValue(r.get('companyname'));
Ext.getCmp('companyin').fireEvent('select');

updateWin.show();

});


var accordian = new Ext.Panel({

margins:'5 0 5 5',
split:true,
//width: 800,
height: 600,
forceFit: true,
layout:'border',
region: 'center',
items: [grid , histGrid ]
});



Ext.onReady(function() {

// Load stores located in newaction.js

grid.store.load({
params: { 'action':'getmyopenactions','userid':myuserid }
});

//if(Ext.isIE6)
// actions.on('datachanged', function(){ Ext.Msg.alert('data changed')});

new Ext.Viewport({
layout: 'border',
items: [{

region: 'center', // center region is required, no width/height specified
//xtype: 'container',
layout: 'fit',
//margins: '5 5 0 0',
id: 'main-panel',
items: [ accordian ]
},
{
region: 'north',
height: 50,
id: 'north-panel',
collapsible: false,
split: true,
items: [ myImage ]
},
{
region: 'east',
id: 'east-panel',
collapsible: true,
split: true, // enable resizing
minSize: 75, // defaults to 50
maxSize: 160,
width: 160,
margins: '0 5 5 5',
title: 'Statistics',
xtype: 'panel',
layout: 'fit',
items: [ pies ]
},

{
region: 'west',
collapsible: true,
title: 'Registers',
xtype: 'treepanel',
width: 160,
height: 400,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
text: "ADAPT",
children: [
<?php echo $r; ?>
{
text: 'My Open Actions',
leaf: true
}]
}),
rootVisible: true,
listeners: {
click: function(n) {
regactionspnl = Ext.getCmp('panel-reg-pie');
hg = Ext.getCmp('hist-grid');


if(n.attributes.text == 'My Open Actions')
{
grid.store.load({ params: { 'action':'getmyopenactions','userid':myuserid,'pb':new Date().getTime() }});
regactionspnl.setTitle('All Actions');
mypie.store.load ({ params: { 'action':'getmypie','userid':myuserid }});
regpie.store.load ({ params: {'action':'getregpie','regid':'all'}});


}
else
{

grid.store.load ({params: { 'action':'getactions','regid': n.attributes.text,'pb':new Date().getTime() }});
regactionspnl.setTitle(n.attributes.text + ' Actions');
mypie.store.load ({ params: { 'action':'getmypie','userid':myuserid }});
regpie.store.load ({ params: {'action':'getregpie','regid': n.attributes.text}});

}


hg.store.load({ params: { 'action':'gethistory','actionid':'-1' }});
}
}
}]
});

regs.load();
users.load();
workpackages.load();
companies.load();

mypie.store.load({
params: { 'action':'getmypie','userid':myuserid }
});

regpie.store.load({
params: { 'action':'getregpie','regid':'all' }
});



});
</script>

</head>
<body>

</body>
</html>

Frith
17 Feb 2010, 6:34 AM
while(this.answered == false)
{
this.bump();
}

Mike Robinson
17 Feb 2010, 7:18 AM
Okay, I can't dive into your logic -- and I won't attempt to -- but in the code snippet you posted I see "load" occurring in response to "click" but I see no trapping of the subsequent "load" event.

As you know, the click initiates a request for the data that you want, to be loaded. But it is entirely unpredictable how long that will actually take. Apparently in your case it takes ten seconds or more. (Are you perchance shoving a whole lot of data across the wire, e.g. "everything?")

Your grid might be displaying "at once" because it looks and finds "nothing in the store" and that's valid, because it has no way to know that data has been requested but has not yet arrived. You might need to create your own "progress bar," and first display and then remove it in your own code.

If the logic is insufficient, and it "works sometimes," well, that actually means nothing useful.

Please be patient when asking: you might well not get any response to a thread for 24 hours or more. It's not that you're being ignored by anyone else here; any more than you "ignore" anyone else here, which all of us plainly don't. (We're social bears... more or less... despite the occasional pocket-protector.) ;)

Frith
17 Feb 2010, 7:41 AM
Thanks for your response...and apologies for the impatience.

The request and response I posted encapsulates all the data sent and received on the click event so the volume of data is miniscule on the response (Content Length: 382 bytes).

I would reiterate that this is purely an IE6 issue (although not tested in IE7 or IE8) as the gridpanel is working fine in FF3.5, FF3.6, and Chrome...data refreshes immediately upon click in these other browsers.

I added a handler to the store for the 'datachanged' event and confirmed that, if I click before 10 seconds have elapsed, this event did not fire...and waiting did nothing. If I wait 10 seconds between clicks, the event fires and the data in the gridpanel is updated.

I believe that this is a caching issue in IE and have attempted to circumvent this by:

1. Adding a timestamp to every JSON remote call
2. Adding Expires: Wed, 01 Dec 1971 00:00:00 GMT to the header
3. Adding Pragma: no-cache
4. Adding Cache-Control: no-store, no-cache, must-revalidate, pre-check=0, max-age=0
5. Setting 'Every visit to the page' option

I'm out of ideas. Any assistance greatly appreciated.

(I'm restricted to providing a solution for IE6)

Regards, Paul

...and apologies again

Frith
22 Feb 2010, 6:41 AM
I added listeners to the beforeload and datachanged events of the gridpanel's store.

I simply updated the status bar (rather than use alert) when these events fired and here's what I found:

beforeload event fires every time I click a link and the lastOptions shows that the correct parameter is used according to the clicked link.

The datachanged event does not fire unless I wait for the previously described 10 seconds.

Again, this happens only in IE6, not FF or Chrome.

Please see attached files.

Animal
24 Feb 2010, 12:10 AM
Are you listening for a loadexception event?

I've recently written an app which adds a global loadexception listener to the Store class, which can then inform the user in an orderly fashion that a server data request has failed.

Frith
24 Feb 2010, 8:24 AM
Thank you for your response, Animal...I believe I have a breakthrough:

I added:


actions.on('exception',
function(proxy, type, action, options, response, arg) {
if (type == 'remote')
{
Ext.MessageBox.alert('Error Message', response);
}
else if (type == 'response')
{
Ext.MessageBox.alert('Error Message',
"Status: " + response.status +
", Status Text: " + response.statusText +
", responseText: " + response.responseText
);

...and was able to see that the call resulted in a failure.

It appears as though IE is not posting the params on every click...only after 10 seconds ?!?!?

What would you suggest?

Thanks again. Paul.

Frith
30 Jun 2010, 11:13 PM
For anyone searching for a solution to a similar problem:

The problem was related to IE (6,7,8) and our proxy.

Changed all requests to 'GET' and disableCaching: true; Solved all issues.

DataPeople
1 Jul 2010, 2:07 AM
Hello, Frith:)

How are you?. I read your valuable problem and find out that css or html/xhtml coding may be little bit incorrect that's why EI6 browser causes problem. Actual CSS with nice html coding can solve your problem.More pleasure link you discover psd to xhtml (http://www.datapeoplebd.com/psd-to-xhtml-conversion.html)

Best Regards