PDA

View Full Version : [OPEN] [CLOSED][3.0.0] ListView not scrolling vertically



vinnybozz
13 Jul 2009, 9:44 AM
In the recent Stable release of Ext JS 3.0.0, the ListView does not seem to be scrolling vertically anymore.

View sample example:

http://www.extjs.com/deploy/dev/examples/view/list-view.html

thx

mjlecomte
13 Jul 2009, 1:31 PM
Thanks for the report, updating thread to OPEN.

Animal
13 Jul 2009, 1:34 PM
The OP failed to include the fix!

Yo! Give them the fix vinny!

mjlecomte
13 Jul 2009, 1:43 PM
It's a bug in resources/css/structure/listview.css

The style for x-list-body needs



height: 100%;


You should file a bug report.

You can of course fix the style in your local stylesheet until the patched release is available.

I tracked it down.

evant
13 Jul 2009, 11:13 PM
It appears this has already been fixed in SVN, Aaron made a commit on the 11th and I'm not able to verify the behaviour on the latest build.

Going to mark this as closed unless any other new info comes up.

martinjrb
13 Aug 2009, 6:11 AM
Hi, I tried implementing this fix but I still get no scrollbars in IE6 or 7 in my listview. I'm using Ext 3.0.0. Here's an example:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>ListView Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<style type="text/css">
.x-list-body {
height: 100%;
}
</style>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"> </script>
<script type="text/javascript">
Ext.onReady(function () {

new Ext.TabPanel({
id: 'tabPanel',
region: 'center',
height: 200,
width:200,
activeTab:0,
layoutOnTabChange: true,
renderTo: 'content',
items: [{
xtype: 'listview',
title: 'Tab',
columns: [{
header: 'Column 1',
width: 0.5,
sortable: true,
dataIndex: 'Column1'
}, {
header: 'Column 2',
width: 0.5,
sortable: true,
dataIndex: 'Column2'
}],
store: new Ext.data.Store({
autoLoad: true,
data: {
Rows: [{
Id: '1',
Column1: 'row1',
Column2: 'row1'
}, {
Id: '2',
Column1: 'row2',
Column2: 'row2'
}, {
Id: '3',
Column1: 'row3',
Column2: 'row3'
}, {
Id: '4',
Column1: 'row4',
Column2: 'row4'
}, {
Id: '5',
Column1: 'row5',
Column2: 'row5'
}, {
Id: '6',
Column1: 'row6',
Column2: 'row6'
}, {
Id: '7',
Column1: 'row7',
Column2: 'row7'
}, {
Id: '8',
Column1: 'row8',
Column2: 'row8'
}, {
Id: '9',
Column1: 'row9',
Column2: 'row9'
}]
},
reader: new Ext.data.JsonReader({
root: 'Rows',
idProperty:'Id'
}, [{
name: 'Column1'
}, {
name: 'Column2'
},{
name: 'Id'
}])
})
}]
})
})
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js">
</script>
<!-- EXAMPLES --><h1>ListView Example</h1>
<div id="content">

</div>
</body>
</html>
Does anyone have any ideas?

Thanks,
Martin

mjlecomte
15 Aug 2009, 9:29 AM
I tested your example against svn and scrollbars appeared in IE7.

atr
24 Aug 2009, 11:51 PM
I added as recommended "height:100%" in my stylesheets, but now the listview is getting to big.

screenshot made in firefox 3

powellke
25 Aug 2009, 12:13 PM
I also added the height to the css file and the listview is too big. I have a panel with a vbox layout with three panels each with 'fit' layout and containing a listview. I've attached two screenshots. The second screenshot highlights the listview with the problem.

Here's a code snippet:



var commandList = new Ext.ListView({
multiSelect: true,
singleSelect: false,
store: this.commandStore,
reserveScrollOffset: true,
hideHeaders: true,
columns: [{
id: 'name',
dataIndex: 'name'
}]
});

var countryList = new Ext.ListView({
multiSelect: true,
singleSelect: false,
store: this.countryStore,
reserveScrollOffset: false,
hideHeaders: true,
columns: [{
id: 'name',
dataIndex: 'name'
}]
});

var statusList = new Ext.ListView({
multiSelect: true,
singleSelect: false,
store: this.statusStore,
reserveScrollOffset: false,
hideHeaders: true,
columns: [{
id: 'name',
dataIndex: 'name'
}]
});


var filterPanel = {
title: 'Filter',
collapsible: true,
margins: '5 5 5 0',
cmargins: '5 5 5 5',
split: true,
region: 'east',
width: 250,
bodyBorder: false,
tbar: [ 'Search: ' , searchField ],
layout: 'vbox',
layoutConfig: {
align: 'stretch'
},
items: [{
title: 'Commands',
items: commandList,
flex: 1
}, {
title: 'Countries',
items: countryList,
flex: 1
}, {
title: 'Status',
items: statusList,
flex: 1
}]
}

mjlecomte
25 Aug 2009, 4:49 PM
@powellke did you test against svn?

powellke
25 Aug 2009, 8:26 PM
@mjlecomte: No. I haven't been able to get connected to svn for awhile. I'm using tortoisesvn and the login credentials aren't working any more. I see that 3.0.1 is available on my support page. I'll try that.

atr
25 Aug 2009, 9:53 PM
I have a panel with a vbox layout with three panels each with 'fit' layout and containing a listview.

it's quite the same I am using. Please let me know if this is already fixed in SVN, thx

powellke
26 Aug 2009, 6:29 AM
Just got the latest from SVN and it DID NOT work.

powellke
26 Aug 2009, 7:05 AM
I was able to get it to work by adding the "height: 100%;" to .x-list-body in ext-all.css. The reason it wasn't working before is I was adding the height to "resources/css/structure/listview.css" instead of ext-all.css.

mjlecomte
26 Aug 2009, 5:13 PM
Just got the latest from SVN and it DID NOT work.

If you think a bug still exists please post a working test case in a new thread. Feel free to include a link back to this thread.

See here: http://extjs.com/forum/showthread.php?p=341947#post341947

UHF
15 Sep 2009, 1:48 AM
I got scrollbar appears in Opera 9.64 and FF 3 only this way:



.x-list-body {
height: 100%;
position: absolute;
}

Ext JS 3.0.0 Stable