PDA

View Full Version : Panel toolbar okay in Firefox -- invisible in Internet Explorer



JeffDrummond
27 Jan 2011, 1:03 PM
Hello:

I have a simple panel with a top toolbar.
The panel and toolbar display perfectly in Firefox,
but the toolbar is invisible in IE.

When inspecting the HTML, the width of the toolbar
has style="width: 1426px;" in Firefox and style="width: 0px;"
in IE. See attached pics.

Please examine my code. Thanks.



// Create the contents of the Documents tab.

function populateDocumentsTab() {

// The documents toolbar.
var documentsToolbar = new Ext.Toolbar({
id: 'documentsToolbar',
items: [{
text: 'Add document',
itemId: 'addButton',
tooltip: 'Add document',
scope: this,
handler: function () {

showDocumentUploadPanel();
},
disabled: false,
border: true
},
{
xtype: 'tbseparator'
},
{
text: 'Refresh',
itemId: 'refreshButton',
tooltip: 'Refresh',
scope: this,
handler: function () {

var listViewStore = Ext.getCmp('documentsList').getStore();
listViewStore.load();
},
disabled: false,
border: true
}]

}); // eof documentsToolbar

var documentPanel = new Ext.Panel({
id: 'documentPanel',
height: 300,
layout: 'fit',
tbar: documentsToolbar,
items: [{
region: 'center',
margins: '5 0 0 0',
items: [
buildDocumentsList()]
}

]
});

documentPanel.render('divDocuments');

} // eof populateDocumentsTab

dduffy
28 Jan 2011, 3:06 AM
have you run your JS code through JSLINT?

JeffDrummond
28 Jan 2011, 6:29 AM
Yes, there are no errant commas. The javascript is clean.

Seana
28 Jan 2011, 6:57 AM
Yes, there are no errant commas. The javascript is clean.

With only commenting out the functions that I don't have the above function works as expected in Firefox 3.6.13, IE: 8, Safari 5.0.3(windows), Chrome 8.0.552.237 and Opera 11.00.

The only thing that may be at issue here is that your parent Panel doesn't set a width, if your DIV that contains it does then that is not an issue. In the past with IE:6 I had issues with width and some ext components.

dduffy
28 Jan 2011, 7:52 AM
I tested the following code in FF & IE 8 & Safari - and it works; I commented out the following section, why are you setting region when not using a border layout? Anyway the toolbar is working fine, I suspect there is an issue in the "buildDocumentList()" component which i cant comment on.




items: [{
region: 'center',
margins: '5 0 0 0',
items: [
buildDocumentsList()]
}]






function checkOut () {

// Create the contents of the Documents tab.



// The documents toolbar.
var documentsToolbar = new Ext.Toolbar({
id: 'documentsToolbar',
items: [{
text: 'Add document',
itemId: 'addButton',
tooltip: 'Add document',
scope: this,
handler: function () {

showDocumentUploadPanel();
},
disabled: false,
border: true
},
{
xtype: 'tbseparator'
},
{
text: 'Refresh',
itemId: 'refreshButton',
tooltip: 'Refresh',
scope: this,
handler: function () {

var listViewStore = Ext.getCmp('documentsList').getStore();
listViewStore.load();
},
disabled: false,
border: true
}]

}); // eof documentsToolbar

var documentPanel = new Ext.Panel({
id: 'documentPanel',
height: 300,
layout: 'fit',
tbar: documentsToolbar
});

documentPanel.render('container_div');

} // eof checkout