Issues with IE7 and XML data [Archive]

kronox

14 Nov 2007, 8:37 AM

I have already searched through the forums here and could not locate an appropriate solution that would fix the problem I am having.

I am using a layout, which on the west panel I am loading a combo box from an XML file. Everything works fine in FF and loads properly, but in IE7 nothing loads .. actually not even my events to pop up a new panel works in IE7.

I have tried using localXHR, a local webserver, and a hosted webserver. Only browser that I can get the XML to load into the combo boxes, and get the events to fire to pop up the new panel is in FF.

Any ideas?

var clientProperties;
/********************************************************************************
Client Select Options
*********************************************************************************/
var clientNames = new Ext.data.Store({
autoLoad: true,
url: 'clients/clients.xml',
reader: new Ext.data.XmlReader({
record: 'Client',
id: 'id'
}, ['name','company','url','registered','contact','address','city','province','country','postalCode','phone','cell','fax','email']
)
});

function clientSelect(el) {
if(el == null || el == '') el = 'clientSelect';
el = document.getElementById(el);
this.node = document.getElementById('clientSelector'); //document.createElement('select');
var count = 0;
this.node.remove(0);
this.node.add(new Option('-- Select Client --'), null);

for(var i = 0; i < clientNames.getCount(); i++) {
var info = clientNames.getAt(i);
if(info instanceof Ext.data.Record) {
var option = new Option(info.data['name'], info.data['id']);
this.node.add(option, null);
}
}
}

function clientSelected(item) {
var selectedId = item.selectedIndex;
if(selectedId != 0) {
getContracts(item.options[item.selectedIndex].text);
populateProperties(selectedId - 1);
document.getElementById('contractSelector').disabled = false;
} else {
document.getElementById('contractSelector').disabled = true;
populateProperties(-1);
}
}

function populateProperties(index) {
var src = clientProperties.getStore();
var col = clientProperties.getColumnModel();
if(index != -1) var client = clientNames.getAt(index).data;

for(var i = 0; i < src.getCount(); i++) {
var info = src.getAt(i);
if(index != -1) {
if(info.data['name'].match('register') == 'register') info.data['value'] = new Date(Date.parse(client[info.data['name']]));
else info.data['value'] = client[info.data['name']];
} else {
info.data['value'] = '';
}
}

clientProperties.reconfigure(src, col);
}

/*****************************************************************************************
Contract select options
*****************************************************************************************/
var clientContracts;

function getContracts(client) {
clientContracts = null;
var file = 'clients/'+client+'.xml';
clientContracts = new Ext.data.Store({
autoLoad: true,
url: file,
reader: new Ext.data.XmlReader({
record: 'Contract',
id: 'id'
}, ['id','title','phase','lastContact','deadLine','status','hours','invoiceNumber','invoiceTotal','invoiceDeposit','invoiceOwing','invoiceNotes']
)
});
setTimeout('contractSelect()', 1500);
clearContracts();
document.getElementById('contractSelector').add(new Option('-- Loading ...'), null);
}

function clearContracts() {
var s = document.getElementById('contractSelector');
var length = s.length;
for(var i = 0; i < length; i++) {
s.remove(0);
}
}

function contractSelect() {
clearContracts();
this.node = document.getElementById('contractSelector');
var count = 1;
ctabs = new Array();
if(clientContracts.getCount() != 0) {
this.node.add(new Option('-- Select Contract --'), null);
for(var i = 0; i < clientContracts.getCount(); i++) {
var info = clientContracts.getAt(i);
if(info instanceof Ext.data.Record) {
var option = new Option(info.data['title'], info.data['id']);
var id = info.data['id'];
/* add contracts here */
addContractTab(info.data);
this.node.add(option, null);
}
}
this.node.disabled = false;
} else {
this.node.add(new Option('-- No contracts --'), null);
this.node.disabled = true;
}
}

function contractSelected(item) {
document.getElementById('contractName').innerHTML = (item.selectedIndex != 0) ? '<h2>' + item.options[item.selectedIndex].text + '</h2>' : '';
}
/*******************************************************
Contract Information
*******************************************************/
var contractsTab;

function buildContractsTab(index) {
contractsTab = new Ext.TabPanel({
resizeTabs: true,
minTabWidth: 115,
tabWidth: 135,
enableTabScroll: true,
autoWidth: true,
defaults: {autoScroll:true},
// plugins: new Ext.ux.TabCloseMenu()
activeTab: 0,
items: { title: 'Welcome', closable: false, autoLoad: 'welcome.html' }
});
}

function addContractTab(info) {
var ctitle = info['title'];
contractsTab.add(
new Ext.FormPanel({
title: ctitle,
labelWidth: 130,
frame: false,
height: 300,
bodyStyle: 'padding: 1px',
defaults: {width: 230},
closable: true,
items: {
xtype: 'tabpanel',
activeTab: 0,
autoWidth:true,
defaults: {autoHeight:true, bodyStyle:'padding:5px 5px 0'},
items:[{
title: 'Contract Details',
layout: 'form',
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'Contract Title',
name: 'title',
value: info['title'],
allowBlank: false
},{
xtype: 'combo',
fieldLabel: 'Contract Phase',
name: 'state',
store: new Ext.data.SimpleStore({
fields: ['phase'],
data: [['Phase 1'],['Phase 2'],['Phase 3'],['Phase 4'],['Phase 5']]
}),
triggerAction: 'all',
mode: 'local',
displayField: 'phase',
valueField: 'phase',
value: info['phase']
},{
xtype: 'combo',
fieldLabel: 'Contract Status',
name: 'status',
store: new Ext.data.SimpleStore({
fields: ['cstatus'],
data: [['Pending Approval'],['Awaiting Payment'],['Payment Past Due'],['Work in Progress'],['Done - Paid'],['Done - Payment Due']]
}),
triggerAction: 'all',
mode: 'local',
displayField: 'cstatus',
valueField: 'cstatus',
value: info['status']
},{
xtype: 'datefield',
fieldLabel: 'Last Contact',
name: 'lastContact',
value: new Date(Date.parse(info['lastContact']))
},{
xtype: 'datefield',
fieldLabel: 'Contract Deadline',
name: 'deadLine',
value: new Date(Date.parse(info['deadLine']))
},{
xtype: 'numberfield',
fieldLabel: 'Hours Worked',
name: 'hours',
value: info['hours']
}]
},{
title: 'Invoice Details',
layout: 'form',
defaults: {width: 230},
defaultType: 'textfield',
items:[{
fieldLabel: 'Invoice Number',
name: 'invoiceNumber',
value: info['invoiceNumber']
},{
xtype: 'numberfield',
fieldLabel: 'Invoice Total',
name: 'invoiceTotal',
value: info['invoiceTotal']
},{
xtype: 'numberfield',
fieldLabel: 'Invoice Deposit',
name: 'invoiceDeposit',
value: info['invoiceDeposit']
},{
xtype: 'numberfield',
fieldLabel: 'Invoice Owing',
name: 'invoiceOwing',
value: info['invoiceOwing']
},{
xtype: 'htmleditor',
width: 350,
enableLists: false,
enableAlignments: false,
enableColors: false,
enableFont: true,
enableFontSize: false,
enableFormat: false,
enableLinks: false,
enableSourceEdit: true,
fieldLabel: 'Invoice Notes',
name: 'invoiceNotes',
value: info['invoiceNotes']
}]
}] },
buttons: [{
text: 'Save',
handler: function(){
alert('saving contract information');
}
}]
})
);
}

function createContractPage(index) {

}

/*******************************************************
Invoice Information
*******************************************************/
var invoiceGrid;
function buildContractInvoiceInformation(index) {

}
/*******************************************************
Property Grid Information
*******************************************************/
var propertyStore;
var propertyColumn;

function createClientProperties() {
clientProperties = new Ext.grid.PropertyGrid({
title: 'Client Information',
closable: false,
source: { 'name' : '','company' : '','url' : '','registered' : '','contact' : '','address' : '','city' : '','province' : '','country' : '','postalCode' : '','phone' : '','cell' : '','fax' : '','email' : '' }
});
}

Ext.onReady(function(){
Ext.QuickTips.init();
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

createClientProperties();
buildContractsTab(1);

var clientPropertiesPanel = new Ext.TabPanel({
border: false,
activeTab:0,
tabPosition: 'bottom',
items: clientProperties
});

var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'north',
height:32
}),{
region:'east',
title: 'Client Information',
collapsible: true,
split:true,
width: 300,
minSize: 175,
maxSize: 400,
layout:'fit',
margins:'0 5 0 0',
items:clientPropertiesPanel
},{
region:'west',
id:'west-panel',
title:'Clients/Contracts',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 0 5',
layoutConfig:{
animate:true
},
items: [{
contentEl: 'west',
border:false,
iconCls:'nav'
}]
}, {
region:'center',
contentEl: 'center',
split:true,

collapsible: true,
title:'Contract Information',
margins:'0 0 0 0',
autoScroll: true,
items: contractsTab
}
]
});

setTimeout('clientSelect(\'clientSelect\')', 1000)

var addWin;
var addButton = Ext.get('addClient');

addButton.on('click', function(){
// create the window on the first click and reuse on subsequent clicks
//if(!addWin){
addWin = new Ext.Window({
title: 'Add a New Client',
layout:'fit',
width:500,
height:300,
closeAction:'hide',
plain: true,
modal: true,

items: new Ext.FormPanel({
labelWidth: 100,
frame: true,
bodyStyle: 'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',
items: [
{fieldLabel: 'Client Name', name: 'name', allowBlank: false},
{fieldLabel: 'Client Company', name: 'company', allowBlank: false},
{fieldLabel: 'Client Url', name: 'url', allowBlank: false},
]
}),

buttons: [{
text:'Submit',
handler: function() {
alert('adding new client');
addWin.hide();
// addWin.destroy();
}
},{
text: 'Close',
handler: function(){
addWin.hide();
// addWin.destroy();
}
}]
});
//}
addWin.show(this);
});

});

<html>
<head>
<title>Complex Layout</title>
<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" src="js/clients.js"></script>
<script type="text/javascript" src="js/localXHR.js"></script>

<style type="text/css">
html, body {font:normal 12px verdana;margin:0;padding:0;border:0 none;overflow:hidden;height:100%;}
p {margin:5px;}
.settings {background-image:url(ext/shared/icons/fam/folder_wrench.png);}
.nav {background-image:url(ext/shared/icons/fam/folder_go.png);}
select {margin-left:5px;}
</style>
</head>
<body>
<div id="west">
<p>Please select your client.</p>
<div id="clientSelect"><select id="clientSelector" onchange="clientSelected(this);"><option>Loading, please wait ...</option></select></div>
<br><br>
<p id="contractsText" style="display:none">Please select a client from above.</p>
<div id="contractSelect"><select id="contractSelector" onchange="contractSelected(this);" disabled style="display:none;"><option>Select a client from above</option></select></div>
<br><br>
<button id="addClient">Add New Client</button>
</div>
<div id="north">
<p>north - generally for menus, toolbars and/or advertisements</p>
</div>
<div id="center"></div>
<div id="ccontract" style="padding:5px;">
<div id="contractName"></div>
</div>

<div id="cinvoice" style="padding:5px;">
<div id="contractGrid">
<br><br><p><h2>Please select a client/contract from the left.</h2></p>
</div>
</div>
<div id="props-panel" style="width:200px;height:200px;overflow:hidden;">
</div>
<div id="south">
<p>south - generally for informational stuff, also could be for status bar</p>
</div>

</body>
</html>

hendricd

14 Nov 2007, 9:17 AM

1) Can you display the XML content in a standard IE7 browser window (without errors).

2) IE requires that a server must send a Content-Type header of text/xml or application/xml. Are you doing that ?

3) And, I see no clientNames.on('loadexception',function() { //any error will be presented here }); invaluable !

kronox

14 Nov 2007, 9:45 AM

Thanks for the speedy reply.

I have added these 2 lines of code:

clientNames.on('loadexception',function() { alert('error loading xml file.')});
clientNames.on('load', function() { alert('loaded xml file.')});

the load event fires, but the load exception event does not fire, which tells me that the xml file is being called properly.

I can load the XML file directly without any problems in both IE and FF.

Here is the XML file.

<?xml version="1.0" encoding="UTF-8"?>
<Clients>
<Client>
<id>1</id>
<name>mk2</name>
<company>Company Name</company>
<url>http://www.website.com</url>
<registered>01/01/2007</registered>
<contact>contact name</contact>
<address>123 Somewhere st</address>
<city>Victoria</city>
<province>BC</province>
<country>Canada</country>
<postalCode>PostalCode</postalCode>
<phone>250.658.5555</phone>
<cell>250.658.5555</cell>
<fax>250.658.5555</fax>
<email>sales@website.com</email>
</Client>
<Client>
<id>2</id>
<name>mk22</name>
<company>Company Name</company>
<url>http://www.website.com</url>
<registered>01/01/2007</registered>
<contact>contact name</contact>
<address>123 Somewhere st</address>
<city>Victoria</city>
<province>BC</province>
<country>Canada</country>
<postalCode>PostalCode</postalCode>
<phone>250.658.5555</phone>
<cell>250.658.5555</cell>
<fax>250.658.5555</fax>
<email>sales@website.com</email>
</Client>
<Client>
<id>3</id>
<name>mk23</name>
<company>Company Name</company>
<url>http://www.website.com</url>
<registered>01/01/2007</registered>
<contact>contact name</contact>
<address>123 Somewhere st</address>
<city>Victoria</city>
<province>BC</province>
<country>Canada</country>
<postalCode>PostalCode</postalCode>
<phone>250.658.5555</phone>
<cell>250.658.5555</cell>
<fax>250.658.5555</fax>
<email>sales@website.com</email>
</Client>
<Client>
<id>4</id>
<name>mk24</name>
<company>Company Name</company>
<url>http://www.website.com</url>
<registered>01/01/2007</registered>
<contact>contact name</contact>
<address>123 Somewhere st</address>
<city>Victoria</city>
<province>BC</province>
<country>Canada</country>
<postalCode>PostalCode</postalCode>
<phone>250.658.5555</phone>
<cell>250.658.5555</cell>
<fax>250.658.5555</fax>
<email>sales@website.com</email>
</Client>
<Client>
<id>5</id>
<name>mk25</name>
<company>Company Name</company>
<url>http://www.website.com</url>
<registered>01/01/2007</registered>
<contact>contact name</contact>
<address>123 Somewhere st</address>
<city>Victoria</city>
<province>BC</province>
<country>Canada</country>
<postalCode>PostalCode</postalCode>
<phone>250.658.5555</phone>
<cell>250.658.5555</cell>
<fax>250.658.5555</fax>
<email>sales@website.com</email>
</Client>
</Clients>

hendricd

14 Nov 2007, 9:52 AM

Try giving it a valid XML PI:

<?xml version="1.0" encoding="ISO-8859-1"?>

hendricd

14 Nov 2007, 9:56 AM

2) IE requires that a server must send a Content-Type header of text/xml or application/xml. Are you doing that ? Use FF/FB to confirm the headers.

kronox

14 Nov 2007, 10:16 AM

I put <?xml version="1.0" encoding="ISO-8859-1"?> in the XML file and still a new go.

I have attached a pic of the screenshots from FF and IE7 and listed within the problems I am having between the 2 browsers.

http://www.mk2solutions.com/ie7_ff.gif

kronox

14 Nov 2007, 10:18 AM

Here is the FF FB header information:

Server Apache/2.2.4
Last-Modified Wed, 14 Nov 2007 17:59:40 GMT
Etag "2feae-9c8-545f58c8"
Accept-Ranges bytes
Content-Length 2504
Keep-Alive timeout=5, max=94
Connection Keep-Alive
Content-Type application/xml

hendricd

14 Nov 2007, 10:35 AM

What on earth is this for? :

setTimeout('clientSelect(\'clientSelect\')', 1000)

I think your making an assumption that the store will be loaded and parsed in less than 1 second. /:)

Your call to clientSelect should occur in the store's load event.

kronox

14 Nov 2007, 10:52 AM

Ya, according to FB, its taking 58ms .. but I have moved that into the on('load' ....