Foggy
6 Oct 2008, 12:23 AM
Hehe, ext works well in a windows active desktop.
Unfortunally any dd process wont work, so your windows should'nt be resizable, dragable.
Closable wont work too.
So here is my code wich works well, for date fields i need some small modifications in css:
CSS modifications for dateField:
.x-form-field-wrap input {
float: left !important;
position:relative !important
}
.x-form-field-wrap .x-form-date-trigger {
float: left !important;
position:relative !important;
}
.x-date-menu {
width: 175px !important;
}
HTML/JS Code: (important: just use absolute paths to your css/js files)
<!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=utf-8" />
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" type="text/css" href="file:///D:/desktop-hg/ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="file:///D:/desktop-hg/ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="file:///D:/desktop-hg/ext-2.2/ext-all-debug.js"></script>
<script language="javascript" type="text/javascript">
Ext.onReady(function() {
var button = new Ext.Button({
text: 'Open win',
renderTo: 'ext-elements',
handler: function() {
var win = Ext.get('my-test-win');
if (!win) {
var form = new Ext.FormPanel({
id: 'test-form',
labelAlign: 'left',
bodyStyle:'padding:5px',
border: false,
labelWidth: 140,
defaults: {
width: 140
},
baseCls: 'x-plain',
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'company'
},{
xtype: 'textfield',
fieldLabel: 'Price',
name: 'price'
},{
xtype: 'textfield',
fieldLabel: '% Change',
name: 'pctChange'
},{
xtype: 'datefield',
fieldLabel: 'Last Updated',
name: 'lastChange'
},{
xtype: 'textfield',
fieldLabel: 'Test',
name: 'test'
}]
});
win = new Ext.Window({
title: 'Testwindow',
id: 'my-test-win',
x: 140,
y: 140,
height: 300,
width: 400,
plain: true,
resizable: false,
draggable: false,
closable: false,
items: [form],
buttons: [
{
text: 'close',
handler: function() {
var win = Ext.getCmp('my-test-win');
win.close();
}
}
]
});
}
win.show();
}
});
//
});
</script>
<link href="file:///D:/desktop-hg/style.css" rel="stylesheet" media="screen, projection" type="text/css" />
</head>
<body>
<div id="ext-elements"></div>
</body>
</html>
And of course a Screenshot of the result :)
Unfortunally any dd process wont work, so your windows should'nt be resizable, dragable.
Closable wont work too.
So here is my code wich works well, for date fields i need some small modifications in css:
CSS modifications for dateField:
.x-form-field-wrap input {
float: left !important;
position:relative !important
}
.x-form-field-wrap .x-form-date-trigger {
float: left !important;
position:relative !important;
}
.x-date-menu {
width: 175px !important;
}
HTML/JS Code: (important: just use absolute paths to your css/js files)
<!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=utf-8" />
<title>Unbenanntes Dokument</title>
<link rel="stylesheet" type="text/css" href="file:///D:/desktop-hg/ext-2.2/resources/css/ext-all.css" />
<script type="text/javascript" src="file:///D:/desktop-hg/ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="file:///D:/desktop-hg/ext-2.2/ext-all-debug.js"></script>
<script language="javascript" type="text/javascript">
Ext.onReady(function() {
var button = new Ext.Button({
text: 'Open win',
renderTo: 'ext-elements',
handler: function() {
var win = Ext.get('my-test-win');
if (!win) {
var form = new Ext.FormPanel({
id: 'test-form',
labelAlign: 'left',
bodyStyle:'padding:5px',
border: false,
labelWidth: 140,
defaults: {
width: 140
},
baseCls: 'x-plain',
items: [{
xtype: 'textfield',
fieldLabel: 'Name',
name: 'company'
},{
xtype: 'textfield',
fieldLabel: 'Price',
name: 'price'
},{
xtype: 'textfield',
fieldLabel: '% Change',
name: 'pctChange'
},{
xtype: 'datefield',
fieldLabel: 'Last Updated',
name: 'lastChange'
},{
xtype: 'textfield',
fieldLabel: 'Test',
name: 'test'
}]
});
win = new Ext.Window({
title: 'Testwindow',
id: 'my-test-win',
x: 140,
y: 140,
height: 300,
width: 400,
plain: true,
resizable: false,
draggable: false,
closable: false,
items: [form],
buttons: [
{
text: 'close',
handler: function() {
var win = Ext.getCmp('my-test-win');
win.close();
}
}
]
});
}
win.show();
}
});
//
});
</script>
<link href="file:///D:/desktop-hg/style.css" rel="stylesheet" media="screen, projection" type="text/css" />
</head>
<body>
<div id="ext-elements"></div>
</body>
</html>
And of course a Screenshot of the result :)