PDA

View Full Version : Facing problem hide scroll bar on the parent window of Hello World



urmilkapadia
17 Jul 2008, 8:04 AM
Hi,

I am using window example of "Hello world". I would like to hide scroll bar on the backend(parent) frame. see the attachment.

i used the .x-body-masked but I couldn't able to hide that. I have verion of extjs2.1 and I am using Internet Explorer.

I changed Hello World window to modal:true

Here is code
1. helloFrame.js


/*
* Ext JS Library 2.1
* Copyright(c) 2006-2008, Ext JS, LLC.
* [email protected]
*
* http://extjs.com/license
*/

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({
el:'hello-win',
layout:'fit',
width:500,
height:300,
closeAction:'hide',
plain: true,
modal:true,

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

buttons: [{
text:'Submit',
disabled:true
},{
text: 'Close',
handler: function(){
win.hide();
}
}]
});
}
win.show(button);
});
});2. helloFrame.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>Hello World Window Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="./helloFrame.css" />

<script language="javascript" src="helloFrame.js"></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 asSAsaSA SDFFSDF"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">hellos.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>3. helloFrame.css

.x-body-masked {
overflow-y:hidden;
}
.ext-el-mask {
overflow-y:hidden;
}

leolima
18 Jul 2008, 3:48 AM
I got this same problem in my code, but I move the window using x, y, and so, the modal frame also moves, I needed some way to the modal stay in the center page, and move just the Ext Window...

Animal
18 Jul 2008, 3:57 AM
Try using



<body style="overflow:hidden">

leolima
18 Jul 2008, 4:02 AM
This is my code:

winEditComponente = new Ext.Window({
applyTo: "janela-edit-componentes",
bodyStyle:'padding:0px 0px 0px 0px',
layout:'form',
closable:false,
width:665,
height:540,
x:Ext.get('div-checkbox-pagina').getLeft(false),
y:Ext.get('div-checkbox-pagina').getTop(true),
draggable: false,
plain: false,
modal:true,
scrolling:false,
title:'Editando Componente',
items:[
_formPanel
]
});
winEditComponente.show(this);

My problem is that the modal frame is starting, following the Ext Window position, I wished that it start following the body page, any one can give me a tip ?!

http://www.elogik.com.br/ext_forum/18-07-08_modal.jpg

Animal
18 Jul 2008, 4:15 AM
So, is it the mask element that's doing it?

leolima
18 Jul 2008, 4:21 AM
I think that probability yes, because, when I don

Animal
18 Jul 2008, 4:32 AM
Ext should size the mask correctly. You might have to step into ext-all-debug.com and see how it is sizing it.

urmilkapadia
18 Jul 2008, 9:45 AM
I tried this

<body style="overflow:hidden">

but it also hidden my scroll bar on the page load.