Hello,
When creating a form using EXTJS and placing that form in a
modal dialog if the
modal dialog has a
scroll bar, when scrolling it causes the form elemets to stay fixed (move with the
scroll bar) This is only IE 6.0 and 7
here is the code to duplicate the problem.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="/common/js/ext-1.0.1/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/common/js/ext-1.0.1/resources/css/ytheme-aero.css" />
<script type="text/javascript" src="/common/js/ext-1.0.1/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="/common/js/ext-1.0.1/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="/common/js/ext-1.0.1/ext-all.js"></script>
<script type="text/javascript" src="/common/js/ext-1.0.1/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = 'https://www.domain.com/common/js/ext-1.0.1/blank.gif';
Ext.SSL_URL = 'https://www.domain.com/common/js/ext-1.0.1/blank.html';
Ext.onReady(function(){
Ext.QuickTips.init();
});
</script>
</head>
<body>
<script type="text/javascript">
var artistView = function(){
// everything in this space is private and only accessible in the artistView block
// define some private variables
var dialog, showBtn;
// return a public interface
return {
init : function(){
showBtn = Ext.get('show-artistView-dlg');
// attach to click event
showBtn.on('click', this.showDialog, this);
},
showDialog : function(){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new Ext.BasicDialog("artistView-dlg", {
modal:true,
autoTabs:false,
width:400,
height:150,
shadow:true,
minWidth:400,
minHeight:400,
proxyDrag: true
});
dialog.addKeyListener(27, dialog.hide, dialog);
//dialog.addButton('Submit', dialog.hide, dialog).disable();
//dialog.addButton('Close', dialog.hide, dialog);
}
dialog.show(showBtn.dom);
}
};
}();
Ext.onReady(artistView.init, artistView, true);
Ext.onReady(function(){
var fs = new Ext.form.Form({
labelAlign: 'right',
labelWidth: 75
});
fs.fieldset(
{legend:'Contact Information'},
new Ext.form.TextField({
fieldLabel: 'First Name',
name: 'first',
width:190
}),
new Ext.form.TextField({
fieldLabel: 'Last Name',
name: 'last',
width:190
}),
new Ext.form.TextField({
fieldLabel: 'Company',
name: 'company',
width:190
}),
new Ext.form.TextField({
fieldLabel: 'Email',
name: 'email',
vtype:'email',
width:190
}),
new Ext.form.DateField({
fieldLabel: 'Date of Birth',
name: 'dob',
width:190,
allowBlank:false
})
);
fs.addButton('Search');
fs.render('TheSearchForm');
//end on ready statement
});
</script>
<button name="show-artistView-dlg" id="show-artistView-dlg">Tester</button>
<div id="show-artistView-dlg" style="display:none;"></div>
<div id="artistView-dlg" style="visibility:hidden;position:absolute;top:0px;">
<div class="x-dlg-hd" id="artistView-dlg-title" sytle="height: 25px;">Search</div>
<div class="x-dlg-bd">
<div style="padding:10px;">
<div id="TheSearchForm">
</div>
</div>
</div>
</div>
05-21-2007, 07:19 PM
Form elements float in IE, fine in firefox
