ListView limit viewable rows

[ValterBorges]

How do you configure a listview to show only 3 rows at a time and show scroll bars for the rest?

[Animal]

Constrain its height.

[ValterBorges]

Hi Animal,
First off thanks for all the help.

I was rendering the Listview to a basic div with height/width specified which was not working. I've attached the html sample as a .txt file if you don't mind taking a look.

<div id="companiesListView" style="height:100px;width:550px;overflow:auto"></div>

//the list view definition

var listViewCompanies = new Ext.ListView({
store: storeCompanies,
width: 500,
height: 50,
autoHeight: false,
multiSelect: true,
columnResize: true,
columnSort: true,
hideHeaders: false,
emptyText: 'No Companies to display',
loadingText: 'loading...',
reserveScrollOffset: true,
columns: columnsCompanies
});

listViewCompanies.render("companiesListView",1);



//If I encapsulate the div inside another like this i get a scroll bar but I don't want the header to scroll, how do i do this the right way?

//This forces the height
<div id="dCompanies" style="width:520px;height:100px;overflow:auto">
<div id="companiesListView" style="">
</div>
</div>

[Animal]

Where you render it to sohuld not constrain it. It scrolls within itself.

[ValterBorges]

That's the issue it's not making any difference when i specify the height.

Do I need to use a panel in order to get this to work so that the header doesn't scroll?

[Animal]

NO. You specify a height on the ListView.

[ValterBorges]

I'm trying that and it's frustrating because it doesn't seem to work. No matter what i specify for height it always renders all the rows without a scroll....


var listViewCompanies = new Ext.ListView({
store: storeCompanies,
width: 500,
height: 20,
autoHeight: false,
multiSelect: true,
columnResize: true,
columnSort: true,
hideHeaders: false,
emptyText: 'No Companies to display',
loadingText: 'loading...',
reserveScrollOffset: false,
columns: columnsCompanies
});

listViewCompanies.render("dCompanies",1);

<div id="dCompanies" style="border-color:black;border-width:thin;border-styleolid;">
</div>

[Animal]

Well obviously you'll not want reserveScrollOffset: false

You want space for a scrollbar don't you?

Also, just until the next release, you will have to add the style rule

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

[ValterBorges]

Animal, Thanks for the help so far.

When i set height:100% it still would not limit the number of rows but once i made it 60px now i get three rows and then a scroll.

<style type="text/css">
.x-list-body {
height: 60px;
}

How would i apply this on an individual listview without affecting all the other listviews on the page?

[Animal]

Using a selector with an ID?