PDA

View Full Version : problem with mask on setHeight window



rafael_kaz
18 Oct 2009, 12:59 AM
<!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>Hello World Window Example</title>
<link rel="stylesheet" type="text/css" href="../../../user/util/ext-3.0.0/resources/css/ext-all.css" />

<!-- LIBS -->
<script type="text/javascript" src="../../../user/util/ext-3.0.0/adapter/ext/ext-base.js"></script>

<!-- ENDLIBS -->

<script type="text/javascript" src="../../../user/util/ext-3.0.0/ext-all.js"></script>

<script language="javascript" >
Ext.onReady(function(){
var win;
var button = Ext.get('show-btn');

button.on('click', function(){
// create the window on the first click and reuse on subsequent clicks
if(!win){
win = new Ext.Window({
applyTo:'hello-win',
layout:'fit',
width:900,
height:680,
modal: true,
closeAction:'hide',
plain: true,

items: new Ext.TabPanel({
applyTo: 'hello-tabs',
autoTabs:true,
activeTab:0,
deferredRender:false,
border:false
}),

buttons: [{
text:'Submit',
handler: function(){
win.setHeight(780);
}
},{
text: 'Close',
handler: function(){
win.hide();
}
}]
});
}
win.show(this);
});
});
</script>

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

<style type="text/css">
.x-panel-body p {
margin:10px;
font-size:12px;
}
</style>

</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->

<h1>Hello World Window</h1>
<p>This example shows how to create a very simple modal Window with "autoTabs" from existing markup.</p>
<input type="button" id="show-btn" value="Hello World" /><br /><br />
<p>Note that the js is not minified so it is readable. See <a href="hello.js">hello.js</a> for the full source code.</p>

<div id="hello-win" class="x-hidden">

<div class="x-window-header">Hello Dialog</div>
<div id="hello-tabs">
<!-- Auto create tab 1 -->
<div class="x-tab" title="Hello World 1">
<p>Hello...</p>
</div>
<!-- Auto create tab 2 -->
<div class="x-tab" title="Hello World 2">

<p>... World!</p>
</div>
</div>
</div>
</body>
</html>