PDA

View Full Version : [4.0.1] Sandbox: Ext.window.Window -> resizeable



tobiu
8 Jun 2011, 5:48 AM
hi team,

when using the sandboxed version of ext js 4, the dotted border that is showing the new size of the window is completely missing.


best regards
tobiu

examples / window / layout.html


<!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>Window Layouts Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-sandbox.css" />
<script type="text/javascript" src="../../builds/ext-all-sandbox-debug.js"></script>

<script type="text/javascript" src="layout.js"></script>

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/example.css"/>

<style type="text/css">
.x-panel-body p {
margin: 10px;
font-size: 12px;
}
</style>
</head>
<body>
<!-- EXAMPLES -->
<h1>Windows with Layouts</h1>
<p>This example shows how Ext containers can be nested in windows to create advanced layouts.</p>
<input type="button" id="show-btn" value="Layout Window"/><br/><br/>
<p>Note that the js is not minified so it is readable. See <a href="layout.js">layout.js</a> for the full source code.</p>
</body>
</html>



examples / window / layout.js


Ext4.require([
'Ext4.tab.*',
'Ext4.window.*',
'Ext4.tip.*',
'Ext4.layout.container.Border'
]);
Ext4.onReady(function(){
var win,
button = Ext4.get('show-btn');

button.on('click', function(){

if (!win) {
win = Ext4.create('widget.window', {
title: 'Layout Window',
closable: true,
closeAction: 'hide',
//animateTarget: this,
width: 600,
height: 350,
layout: 'border',
bodyStyle: 'padding: 5px;',
buttonAlign : 'left',
buttons : [
{
text : "Save",
action : 'save'
}, {
text : 'Cancel',
scope : this,
handler : this.close
}
],
items: [{
region: 'west',
title: 'Navigation',
width: 200,
split: true,
collapsible: true,
floatable: false
}, {
region: 'center',
xtype: 'tabpanel',
items: [{
title: 'Bogus Tab',
html: 'Hello world 1'
}, {
title: 'Another Tab',
html: 'Hello world 2'
}, {
title: 'Closable Tab',
html: 'Hello world 3',
closable: true
}]
}]
});
}
button.dom.disabled = true;
if (win.isVisible()) {
win.hide(this, function() {
button.dom.disabled = false;
});
} else {
win.show(this, function() {
button.dom.disabled = false;
});
}
});
});