PDA

View Full Version : [UNKNOWN][3.1] ItemSelector has no vertical scroll bar when using in a Window



Qtx
23 Dec 2009, 1:52 PM
In the Example multiselect-demo, the ItemSelector has a vertical scroll bar, if not all items are visible within the height.

When the form containing the ItemSelector is a part of a Window, the vertical scroll bar does not appear even if it is necessary in all browsers. See the screen shots and the example code.

Place this code into a html file and place it into the folder "examples\multiselect". Open the file and show the Window.


<!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" />

<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="../ux/MultiSelect.js"></script>
<script type="text/javascript" src="../ux/ItemSelector.js"></script>

<script language="javascript">

Ext.onReady(function(){
var win;
var button = Ext.get('show-btn');

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

var ds = new Ext.data.ArrayStore({
data: [[123,'One Hundred Twenty Three'],
['1', 'One'], ['2', 'Two'], ['3', 'Three'], ['4', 'Four'], ['5', 'Five'],
['6', 'Six'], ['7', 'Seven'], ['8', 'Eight'], ['9', 'Nine']],
fields: ['value','text']
});

var user_form = new Ext.FormPanel({

border: false,
layout: 'form',

defaults: { hideLabel: true },
items: [
{
xtype: 'itemselector',
name: 'itemselector',
fieldLabel: 'ItemSelector',
imagePath: '../ux/images/',
multiselects: [{
width: 250,
height: 180,
store: ds,
displayField: 'text',
valueField: 'value'
},{
width: 250,
height: 180,
store: [['10','Ten']]
}
]
}
]
});

user_window = new Ext.Window({
title: 'Test',
width: 570,
height: 300,
closeAction: 'close',
items: user_form
});

user_window.show();
});
});
</script>
</head>
<body>

<input type="button" id="show-btn" value="Show Window" />
</body>
</html>

Condor
23 Dec 2009, 10:40 PM
I tried you example with Ext 3.1 on various browsers, but all showed a scrollbar.

However, the size of the scrollable area in IE standards mode is wrong (and different for IE6, 7 and 8!).

Qtx
24 Dec 2009, 3:51 AM
Strange! If I place my example into ext3.0 Examples, the scroll bars are there. If into ext3.1, no scroll bars.

Maybe, it is due to my new Windows 7 and its theme. I will investigate.

Qtx
24 Dec 2009, 10:01 AM
I compared the result code of the examples in the firebug. I found the source of the problem. In the 3.0.0 the code is like

<div id="ext-gen27" class="x-fieldset-body" style="overflow: auto; width: 248px; height: 165px;">

In the 3.1.0

<div id="ext-gen27" class="x-fieldset-body ux-mselect" style="width: 248px; height: 165px;">

And the CSS MultiSelect.css is not included.

Qtx
24 Dec 2009, 10:03 AM
However, the size of the scrollable area in IE standards mode is wrong (and different for IE6, 7 and 8!). Yes, I faced that problem also, it makes my life harder, but it is tolerable. Of cause, it would be great if it will be fixed.