PDA

View Full Version : [2.0b1/rc1][Closed] IE7 Border Layout Dialog Issue



NBRed5
12 Oct 2007, 6:40 AM
Ext 2.0-beta1
ext-base.js
Windows XP Professional Service Pack 2
browser IE7

The following code produces the two different attached versions of the same dialog, the correct one I believe to be FireFox.

In IE7 the height of the nested south region in the center panel does not seem to be being set correctly, I am only defining a height for the south region and the center region above should size accordingly.




var saveButtonText ='Save';
if (config.fileName){
var saveButtonText ='Save As';
}
this.stree = new Ext.tree.TreePanel({
region: 'west',
split:true,
width:200,
minSize:200,
maxSize:200,
titlebar:true,
collapsible:true,
showPin:false,
cmargins:{
top:0,
left:0,
right:0,
bottom:0
},
animate:true,
loader: new Ext.tree.TreeLoader({dataUrl:'php/folders.php', clearOnLoad: true}),
enableDrag:false,
containerScroll: true,
pathSeparator: '|',
border: false
});
this.stree.getLoader().requestMethod = 'GET';
new Ext.tree.TreeSorter(this.stree, {folderSort:true});
this.sroot = new Ext.tree.AsyncTreeNode({
text: 'source',
draggable:false,
id:'source'
});
this.stree.setRootNode(this.sroot);
this.sroot.expand(false, false);
this.stree.on('click', function(node, e){
this.fileStore.load({
params: {node: node.id}
});
}.createDelegate(this))
this.fileStore = new Ext.data.JsonStore({
url: 'php/fileview.php',
root: 'files',
fields: ['filename', 'imgurl', 'qtip'],
method: 'GET'
});
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" qtip="{qtip}" qtitle="{filename}" id="view_{filename}">',
'<div class="thumb"><img src="{imgurl}" title="{filename}"></div>',
'<span>{shortName}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'
);
this.view = new Ext.DataView({
loadingText: 'Loading...',
cls:'ychooser-view',
region: 'center',
singleSelect: true,
store: this.fileStore,
emptyText : '<div style="padding:10px;">No files to display</div>',
tpl: tpl,
itemSelector: 'div.thumb-wrap'
});
this.view.prepareData = function(data){
data.shortName = Ext.util.Format.ellipsis(data.filename, 15);
return data;
};
this.view.on('dblclick', function(view,index,node){
this.textFileName.setValue(node.id.replace('view_',''));
this.saveButton.enable();
}, this);
this.textFileName = new Ext.form.TextField({

fieldLabel:'Filename',
name:'fileName',
allowBlank:false,
invalidText:'Please enter a Filename!'
});
this.textFileName.on('change', function(){
if (this.textFileName.isDirty()){
this.saveButton.enable();
}
}.createDelegate(this));
this.fileInput = new Ext.FormPanel({
region: 'south',
baseCls: 'x-plain',
split:false,
border: false,
height:42,
frame: true,
minSize:42,
maxSize:42,
collapsible:false,
animate:true,
cmargins:{
top:0,
left:0,
right:0,
bottom:0
},
labelWidth: 75,
bodyStyle:'padding:10px;background:transparent url(images/default/window/top-bottom.png) repeat-x',
labelPad: 10,
defaultType: 'textfield',
defaults: {
width: 230,
height: 22,
msgTarget: 'side'
},
layoutConfig: {
labelSeparator: ':'
},
items: this.textFileName
});
this.centerPanel = new Ext.Panel({
region: 'center',
baseCls: 'x-plain',
layout:'border',
border: false,
bodyBorder: false,
items: [
this.view,
this.fileInput
]
});
this.saveDialog = new Ext.Window({
id:'saveDialog',
modal: true,
width:600,
height:500,
shadow:true,
minWidth:600,
minHeight:450,
autoTabs:false,
proxyDrag:false,
collapsible:false,
title: 'Save',
bodyBorder: true,
resizable: false,
plain:true,
keys: {
key: 27,
fn: this.doCancel,
scope: this
},
layout: 'border',
layoutConfig : {
border: false,
bodyBorder: false
},
buttons: [
{
id: 'saveButton',
text: saveButtonText,
handler: this.doSave,
scope: this,
disabled: true
},
{
id: 'cancelButton',
text: 'Cancel',
handler: this.doCancel,
scope: this,
disabled: false
}
],
items: [
this.stree,
this.centerPanel
]
});

jsakalos
14 Oct 2007, 3:12 AM
Thank you for posting. We will take a look at and we will let you know.

jack.slocum
14 Oct 2007, 5:26 AM
I can't get this to happen. Can you please post a zip with a test case that we can unzip to the examples folder? Thanks.

NBRed5
15 Oct 2007, 1:09 AM
Jack,

I cannot post you an example in a zip file because zipped up the example exceeds the size allowed for attachments. I cannot really chanfge it too much to make it smaller for fear of removing the error.

Is there an email-address to which I can send the zip file. If so you can pm it rather than posting it in the forum.

Nick

jsakalos
15 Oct 2007, 1:52 AM
Jack's e-mail is in his signature: jack@extjs.com

NBRed5
22 Oct 2007, 12:19 AM
Any update on progress with this?

Nick

jsakalos
22 Oct 2007, 9:46 AM
Have you sent Jack that zip?

NBRed5
22 Oct 2007, 11:39 PM
Yes,

I sent Jack the zip file on Monday 15th October.

Nick

NBRed5
2 Nov 2007, 8:29 AM
I still have not had any update on the progress of this bug.

jsakalos
3 Nov 2007, 1:24 PM
I was trying to run your code fragment from the first post to free Jack's hands for Ext 2.0 final finishing. Getting errors, also, some php if missing. Could you please send your showcase you sent to Jack also to me (jozef@extjs.com) I'll take a look.

NBRed5
6 Nov 2007, 3:52 AM
At Jozef's request I have come up with a much simpler example of the issue I am experiencing.

Just run the following code in both IE7 and FF2 and see that the Form Panel in the south region in the nested border layout of the center panel does not have the correct height in IE7 whereas all is fine in FF2.

To run just copy and paste the following into a new html page and change the references to ext-all.css, ext-base.js and ext-all.js to your setup.

I hope somebody can help as this has been bugging me for a while now.

Nick



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
</head>
<body>
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'images/default/s.gif'
Ext.onReady(function(){
var stree = new Ext.Panel({
region: 'west',
split:true,
width:200,
minSize:200,
maxSize:200,
titlebar:true,
collapsible:true,
showPin:false,
cmargins:{
top:0,
left:0,
right:0,
bottom:0
},
title: 'Tree',
animate:true,
border: false
});
var view = new Ext.Panel({
cls:'ychooser-view',
region: 'center',
title: 'view'
});
var textFileName = new Ext.form.TextField({
fieldLabel:'Filename',
name:'fileName',
allowBlank:false,
invalidText:'Please enter a Filename!'
});
var fileInput = new Ext.FormPanel({
region: 'south',
baseCls: 'x-plain',
split:false,
border: false,
height:42,
frame: true,
minSize:42,
maxSize:42,
collapsible:false,
animate:true,
cmargins:{
top:0,
left:0,
right:0,
bottom:0
},
labelWidth: 75,
bodyStyle:'padding:10px;background:transparent url(images/default/window/top-bottom.png) repeat-x',
labelPad: 10,
defaultType: 'textfield',
defaults: {
width: 230,
height: 22,
msgTarget: 'side'
},
layoutConfig: {
labelSeparator: ':'
},
items: textFileName
});
var centerPanel = new Ext.Panel({
region: 'center',
baseCls: 'x-plain',
layout:'border',
border: false,
bodyBorder: false,
items: [
view,
fileInput
]
});
var saveDialog = new Ext.Window({
id:'saveDialog',
modal: true,
width:600,
height:500,
shadow:true,
minWidth:600,
minHeight:450,
autoTabs:false,
proxyDrag:false,
collapsible:false,
title: 'Save',
bodyBorder: true,
resizable: false,
plain:true,
layout: 'border',
layoutConfig : {
border: false,
bodyBorder: false
},
buttons: [
{
id: 'saveButton',
text: 'Save',
scope: this,
disabled: false
},
{
id: 'cancelButton',
text: 'Cancel',
scope: this,
disabled: false
}
],
items: [
stree,
centerPanel
]
});
saveDialog.show();
});
</script>
</body>
</html>

jsakalos
6 Nov 2007, 2:08 PM
Thanks! I'll take a look and I'll get in touch with you then.

jsakalos
6 Nov 2007, 2:26 PM
If you remove doctype it renders well. I tried 4.01 Transitional and xhtml 1.0 strict to no avail.

It renders well only w/o doctype. There were some more threads on doctype; if you try to search you can find some more, hopefully useful, information.

Tested with same results in IE6 and IE7

NBRed5
9 Nov 2007, 8:43 AM
Jozef,

Thanks that has solved it, I have no reason to include the doctype and removing does not seem to have affected my application in the testing I have completed so far.

Do you wish me to Close this bug or leave it open as it should work in IE with a doctype shouldn't it?

Nick

jsakalos
9 Nov 2007, 9:02 AM
Well, I think this is IE's bug not Ext's, however, it would be nice to have a workaround. Close it, somebody finds a workaround sooner or later... ;)

I'm glad it works.