PDA

View Full Version : Layout + Form scrolling problem in IE, fine in Firefox


Acelink
27 May 2007, 10:17 AM
Dear Ext users,

I'm still getting started with the library and I just tried to combine some samples together by using a BorderLayout and a Form ( mostly the last form example from ext documentation) together.

It looks fine even when the browser's window is a bit small in Firefox, however in IE the combobox are fixed and do not scroll with the rest of the form content when the browser window is a bit small. I'm sure I'm missing something which could make it work in both browsers. I let you have a look at the js file.

Thanks




Ext.onReady(function(){

// create the main layout
mainLayout = new Ext.BorderLayout(document.body, {
north: {
split:false,
initialSize: 40,
titlebar: false
},
west: {
split:false,
initialSize: 200,
titlebar: true,
autoScroll:true,
//useShim:true,
cmargins: {top:0,bottom:2,right:2,left:2}
},
east: {
split:true,
initialSize: 200,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true,
autoScroll:false,
useShim:true,
collapsed:true,
cmargins: {top:0,bottom:2,right:2,left:2}
},
south: {
split:false,
initialSize: 22,
titlebar: false,
collapsible: false,
animate: false
},
center: {
titlebar: false,
autoScroll:true,
tabPosition: 'top',
closeOnTab: true,
alwaysShowTabs: false,
resizeTabs: true
}
});

mainLayout.beginUpdate();

mainLayout.add('north', new Ext.ContentPanel('north-div', { fitToFrame: true, closable: false }));
mainLayout.add('south', new Ext.ContentPanel('south-div', { fitToFrame: true, closable: false }));
mainLayout.add('east', new Ext.ContentPanel('east-div', { fitToFrame: true, closable: false }));
mainLayout.add('west', new Ext.ContentPanel('west-div', { fitToFrame: true, closable: false }));
mainLayout.add('center', new Ext.ContentPanel('center-div', { fitToFrame: true }));

var folder_tree = new Ext.tree.TreePanel('west-div', {
animate:true,
autoCreate:true,
enableDD:true,
containerScroll: true,
ddGroup: 'organizerDD',
rootVisible:true
});
var root = new Ext.tree.TreeNode({
text: 'Albums',
allowDrag:false,
allowDrop:false
});
folder_tree.setRootNode(root);
folder_tree.render();

mainLayout.endUpdate();
//folder_tree.render();



///////////////////////////////////////////////////

var form = new Ext.form.Form({
labelAlign: 'right',
labelWidth: 75
});

form.column({width:342, labelWidth:75}); // open column, without auto close
form.fieldset(
{legend:'Contact Information'},
new Ext.form.TextField({
fieldLabel: 'Full Name',
name: 'fullName',
allowBlank:false,
value: 'Jack Slocum'
}),

new Ext.form.TextField({
fieldLabel: 'Job Title',
name: 'title',
value: 'Jr. Developer'
}),

new Ext.form.TextField({
fieldLabel: 'Company',
name: 'company',
value: 'Ext JS'
}),

new Ext.form.TextArea({
fieldLabel: 'Address',
name: 'address',
grow: true,
preventScrollbars:true,
value: '4 Redbulls Drive'
})
);
form.fieldset(
{legend:'Phone Numbers'},
new Ext.form.TextField({
fieldLabel: 'Home',
name: 'home',
value: '(888) 555-1212'
}),

new Ext.form.TextField({
fieldLabel: 'Business',
name: 'business'
}),

new Ext.form.TextField({
fieldLabel: 'Mobile',
name: 'mobile'
}),

new Ext.form.TextField({
fieldLabel: 'Fax',
name: 'fax'
})
);
form.end(); // closes the last container element (column, layout, fieldset, etc) and moves up 1 level in the stack


form.column(
{width:202, style:'margin-left:10px', clear:true}
);

form.fieldset(
{id:'photo', legend:'Photo'}
);
form.end();

form.fieldset(
{legend:'Options', hideLabels:true},
new Ext.form.Checkbox({
boxLabel:'Ext 1.0 User',
name:'extuser'
}),
new Ext.form.Checkbox({
boxLabel:'Ext Commercial User',
name:'extcomm'
}),
new Ext.form.Checkbox({
boxLabel:'Ext Premium Member',
name:'extprem'
}),
new Ext.form.Checkbox({
boxLabel:'Ext Team Member',
name:'extteam',
checked:true
})
);

form.end(); // close the column


form.applyIfToFields({
width:230
});

form.render('center-div');


})


And the accompagnying html file



<!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>CesarFTP browser</title>
<link rel="stylesheet" type="text/css" href="/ext/resources/css/ext-all.css"/>
<!-- GC -->
<script type="text/javascript" src="/ext/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="/ext/adapter/yui/ext-yui-adapter.js"></script> <!-- ENDLIBS -->
<script type="text/javascript" src="/ext/ext-all.js"></script>
<!-- LIBS -->
<link rel="stylesheet" type="text/css" href="admin.css" />
<script type="text/javascript" src="admin.js"></script>

</head>
<body>
<div id="north-div"></div>
<div id="south-div"></div>
<div id="east-div"></div>
<div id="west-div"></div>
<div id="center-div"></div>
</body>
</html>
liggett78
27 May 2007, 10:56 AM
I just went like 3 times through your code and didn't see any references to ComboBox. Which comboboxes are you talking about? Also I noticed that you render both your form and one of the ContentPanels into the center-div, which is not a good idea. You should probably create another child div to the center-div, which can act as a container for the form.
Acelink
27 May 2007, 11:10 AM
You're right sorry, no combobox, just textboxes.

I tried already changing the form.render call into this:



var center_form = Ext.get('center-div').createChild({tag:'div', id:'center_form'}) ;
form.render('center_form');


It doesn't seem to make any difference. Here attached is a screenshot of what I get with IE7
jsakalos
28 May 2007, 2:57 AM
Look if this Extra and missing Scrollbars, why? (http://extjs.com/forum/showthread.php?t=6356&highlight=box+model) doesn't help. Especially the part on different implementations of box model in FF and IE.

Hi,
Acelink
30 May 2007, 8:37 AM
Thanks for the pointer. I haven't found a solution to it though.
jd_porter
30 May 2007, 8:44 AM
I had the same problem with a scrolling form, and I found the answer here (http://extjs.com/forum/showthread.php?t=5821&highlight=combobox+position+relative).
Bottom-line: wrap your form in an element with position:relative.
Acelink
30 May 2007, 9:57 AM
Yep, it "solved" the problem in the sense that I don't have scrollbars anymore in IE, so no scrolling problem.

I used this to change the ContentPanel style, maybe there is a better way to do this.


Ext.DomHelper.applyStyles('center-div', "position: relative");


Thank you all !