PDA

View Full Version : IE 6-7 dataview rendering issue



sissonb
23 Feb 2011, 1:40 PM
I am having this issue with IE, http://screencast.com/t/6oMafZR5Oa
- update with DOM inspection http://screencast.com/t/iVX6707aacqg
I can see the the elements are not even in the DOM until the page resizes. This rules out CSS issues I believe.

The content panel starts off as this,

var contentPanel = {
title: 'Center Panel',
collapsible: false,
region: 'center',
margins: '0 0 0 0'
}
I then pass this panel to a function that adds the customer information like this,

var customer = {
xtype: 'dataview',
store: 'SummaryData',
tpl: CustomerCare.Templates.customer,
width: 150,
height: 150,
cls:'floatLeft'
};

// Make sure items is an array before we push to it
if (!panel.items) {
panel.items = [];
}

// push the bill dataview to the items of this panel
panel.items.push(customer);

I then take that same panel and pass it to a similar function(code smell will be fixed),

var bill = {
xtype: 'dataview',
store: 'SummaryData',
tpl: CustomerCare.Templates.bill,
width: 150,
height: 150,
cls:'floatLeft'
};

// Make sure items is an array before we push to it
if (!panel.items) {
panel.items = [];
}

// push the bill dataview to the items of this panel
panel.items.push(bill);
There are other panels that are created too, but I don't think they are too important for this issue. I pack all the panels into an array and pass it into the viewport like this,

new Ext.Viewport({
layout: 'border',
defaults: {
collapsible: true,
split: true,
bodyStyle: 'padding:5px'
},
items: panels
});

Can you see why IE only renders the data after resize? If you need more information please let me know.

Thanks
_________________________________________________________________________________

- Edit Added full source

home.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- Ext.js's CSS and JavaScript-->
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all-debug.js"></script>

<!-- Our CSS -->
<link rel="stylesheet" type="text/css" href="css/styles.css">

<!-- The data used for this page -->
<script type="text/javascript" src="js/home/data/SummaryData.js"></script>

<!-- The panel objects that help create the layout -->
<script type="text/javascript" src="js/object/panel/TopPanel.js"></script>
<script type="text/javascript" src="js/object/panel/CenterPanel.js"></script>
<script type="text/javascript" src="js/object/panel/LeftPanel.js"></script>
<script type="text/javascript" src="js/object/panel/RightPanel.js"></script>
<script type="text/javascript" src="js/object/panel/BottomPanel.js"></script>

<!-- Code for the top Ribbon -->
<script type="text/javascript" src="js/ribbon/Ribbon.js"></script>

<!-- Factory object for adding page specific content to the panels dynamically -->
<script type="text/javascript" src="js/object/PanelFactory.js"></script>

<!-- The templates for displaying data -->
<script type="text/javascript" src="js/object/Templates.js"></script>

<!-- The main code that puts the page together -->
<script type="text/javascript" src="js/home/main.js"></script>

</head>
<body>

</body>
</html>

SummaryData.js


SummaryData = Ext.extend(Ext.data.JsonStore, {
constructor: function(cfg) {
cfg = cfg || {};
SummaryData.superclass.constructor.call(this, Ext.apply({
storeId: 'SummaryData',
url: '../testData/getProfile-2_21_2011.json',
root:"summary",
autoLoad: true,
fields: [
{
name: 'accountBal'
},
{
name: 'firstName'
},,
{
name: 'lastName'
},
{
name: 'city'
},
{
name: 'streetName'
},
{
name: 'streetNumber'
},
{
name: 'zipCode',
mapping: 'zipcode'
},
{
name: 'totalAmountDue'
}
]
}, cfg));
}
});
new SummaryData();


TopPanel.js

// The global namespace for this application
Ext.namespace("CustomerCare");

// This object will contain the top panel
CustomerCare.TopPanel = {};

CustomerCare.TopPanel.getTopPanel = function() {
return {
region : 'north',
height : 150,
minSize : 75,
maxSize : 250,
cmargins : '0 0 5 0'
};
};

CenterPanel.js

CustomerCare.CenterPanel = {};

CustomerCare.CenterPanel.getCenterPanel = function() {
return {
title: 'Center Panel',
collapsible: false,
region: 'center',
margins: '0 0 0 0'
};
};

LeftPanel.js

CustomerCare.LeftMenu = {};

CustomerCare.LeftMenu.getLeftPanel = function() {
return {
title: 'West Panel',
region: 'west',
margins: '0 0 0 0',
cmargins: '0 5 0 0',
width: 175,
minSize: 100,
maxSize: 250
};
};

RightPanel.js

CustomerCare.RightPanel = {};

CustomerCare.RightPanel.getRightPanel = function() {
return {
title: 'East Panel',
region: 'east',
margins: '0 0 0 0',
cmargins: '0 0 0 5',
width: 175,
minSize: 100,
maxSize: 250
};
};

BottomPanel.js

CustomerCare.BottomPanel = {};

CustomerCare.BottomPanel.getBottomPanel = function() {
return {
title: 'South Panel',
region: 'south',
height: 150,
minSize: 75,
maxSize: 250,
cmargins: '5 0 0 0'
};
};

Ribbon.js

// This object creates our ribbon.
CustomerCare.Ribbon = {};

// Turns a blank panel into a ribbon
CustomerCare.Ribbon.createRibbon = function(panel, page) {
panel.xtype = 'tabpanel';
panel.activeTab = 0;
panel.items = [
{
xtype: 'panel',
title: 'Assist',
items: [
{
xtype: 'dataview',
itemSelector: 'div',
autoHeight: true,
html: "Assist"
}
]
},
{
xtype: 'panel',
title: 'Transfer',
items: [
{
xtype: 'dataview',
itemSelector: 'div',
autoHeight: true,
html: "Transfer"
}
]
},
{
xtype: 'panel',
title: 'Do Not Contact',
items: [
{
xtype: 'dataview',
itemSelector: 'div',
autoHeight: true,
html: "Do Not Contact"
}
]
},
{
xtype: 'panel',
title: 'Ghost Call',
items: [
{
xtype: 'dataview',
itemSelector: 'div',
autoHeight: true,
html: "Ghost Call"
}
]
},
{
xtype: 'panel',
title: 'Disposition',
items: [
{
xtype: 'dataview',
itemSelector: 'div',
autoHeight: true,
html: "Disposition"
}
]
}
];

CustomerCare.Ribbon.pageSpecific(panel, page);
};

CustomerCare.Ribbon.pageSpecific = function(panel, page) {

// Page specific additions to the ribbon
if (page !== null) {
if (page === "home") {
panel.items.push({
xtype: 'panel',
title: 'Home specific tab',
html:'Home specific content'
});
}
else if (page === "bill") {
panel.items.push({
xtype: 'panel',
title: 'Bill specific tab',
html:'Bill specific content'
});
}
}
};

PanelFactory.js

// Factory for adding page specific content for our panels
CustomerCare.PanelFactory = {};

// A dummy method that adds nested panels and changes the layout
CustomerCare.PanelFactory.addItems = function(panel) {

var nestedPanel1 = {
region: 'north',
height: 150
};
var nestedPanel2 = {
region: 'center'
};

panel.items = [nestedPanel1, nestedPanel2];
panel.layout = 'border';
panel.defaults = {
collapsible: true,
split:true,
bodyStyle:'padding:15px'
}
};

// Adds a customer dataview into a panel
CustomerCare.PanelFactory.customer = function(panel) {
var customer = {
xtype: 'dataview',
store: 'SummaryData',
tpl: CustomerCare.Templates.customer,
width: 150,
height: 150,
cls:'floatLeft'
};

// Make sure items is an array before we push to it
if (!panel.items) {
panel.items = [];
}

// push the bill dataview to the items of this panel
panel.items.push(customer);
};

// Adds a bill dataview into a panel
CustomerCare.PanelFactory.bill = function(panel) {
var bill = {
xtype: 'dataview',
store: 'SummaryData',
tpl: CustomerCare.Templates.bill,
width: 150,
height: 150,
cls:'floatLeft'
};

// Make sure items is an array before we push to it
if (!panel.items) {
panel.items = [];
}

// push the bill dataview to the items of this panel
panel.items.push(bill);

};

// Takes an array of panels and put it into a viewport
CustomerCare.PanelFactory.initLayout = function (panels) {

new Ext.Viewport({
layout: 'border',
defaults: {
collapsible: true,
split: true,
bodyStyle: 'padding:5px'
},
items: panels
});
};

Templates.js

CustomerCare.Templates = {};

CustomerCare.Templates.bill = new Ext.XTemplate(
'<div class="buildingBlockContainer">' +
'<div class="buildingBlockHeader">' +
'<table>' +
'<tr style="border-bottom:solid 2px #000;">' +
'<th><a href="bill.html">Bill</a></th>' +
'<td style="float:right;"><tpl for=".">${totalAmountDue}</tpl></td>' +
'</tr>' +
'</table>' +
'</div>'+
'<div class="buildingBlockData">' +
'<table>' +
'<tr>' +
'<tpl for=".">' +
'<th>Due Dates:</th>' +
'<td></td>' +
'<td></td>' +
'<td></td>' +
'</tpl>'+
'</tr>'+
'</table>' +
'</div>' +
'</div>'
);

CustomerCare.Templates.customer = new Ext.XTemplate(
'<div class="buildingBlockContainer">' +
'<div class="buildingBlockHeader">' +
'<table>' +
'<tr style="border-bottom:solid 2px #000;">' +
'<th>Caller</th>' +
'</tr>' +
'</table>' +
'</div>'+
'<div class="buildingBlockData">' +
'<table>' +
'<tr>' +
'<tpl for=".">' +
'<th>Name:</th>' +
'<td>{firstName:this.lowerCaseIt} {lastName:this.lowerCaseIt}</td>' +
'</tpl>' +
'</tr>' +
'<tr>' +
'<tpl for=".">' +
'<th>Address:</th>' +
'<td>{streetNumber:this.lowerCaseIt} {streetName:this.lowerCaseIt}</td>' +
'<tr>' +
'<td></td>' +
'<td>{city:this.lowerCaseIt}, {zipCode:this.lowerCaseIt}</td>' +
'</tr>' +
'</tpl>' +
'</tr>'+
'</table>' +
'</div>' +
'</div>',{
// XTemplate configuration:
compiled: true,

// A function to lower case the characters since css fails :(
lowerCaseIt: function(it) {
return it.toLowerCase();
}
});

main.js

/* The main code for the home page. */
// Create our layout panels
var topPanel = CustomerCare.TopPanel.getTopPanel();
var bottomPanel = CustomerCare.BottomPanel.getBottomPanel();
var leftPanel = CustomerCare.LeftMenu.getLeftPanel();
var rightPanel = CustomerCare.RightPanel.getRightPanel();
var centerPanel = CustomerCare.CenterPanel.getCenterPanel();

/* Modify the panels for this page */
CustomerCare.Ribbon.createRibbon(topPanel, "home");
CustomerCare.PanelFactory.addItems(leftPanel);
CustomerCare.PanelFactory.customer(centerPanel);
CustomerCare.PanelFactory.bill(centerPanel);

// pack the panels into an array and pass them to the initLayout method
var panels = [topPanel, leftPanel, centerPanel, rightPanel, bottomPanel];

// Wait for the dom to become ready, then inject our panels
Ext.onReady(function() {
CustomerCare.PanelFactory.initLayout(panels);
});

Condor
24 Feb 2011, 7:54 AM
Are you sure you don't get any javascript errors? (can't view the screencasts)

ps. Your dataview is missing an 'itemSelector'.

sissonb
24 Feb 2011, 9:43 AM
Missing an itemSelector was the issue. And there was an error being thrown in ie. Here's a screen shot for anyone else that might have this issue, http://screencast.com/t/EqsnRfC6

It says there is an error on line: 1125, char: 13, error: 'undefined' is null or not an object, code: 0, url: http://localhost/frontend/home.html

Thanks so much for looking at this for me. Guess i need an itemSelector even if it's not being used!