PDA

View Full Version : ListView limit viewable rows



ValterBorges
14 Jul 2009, 8:03 AM
How do you configure a listview to show only 3 rows at a time and show scroll bars for the rest?

Animal
14 Jul 2009, 9:08 AM
Constrain its height.

ValterBorges
14 Jul 2009, 9:53 AM
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
14 Jul 2009, 9:59 AM
Where you render it to sohuld not constrain it. It scrolls within itself.

ValterBorges
14 Jul 2009, 11:06 AM
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
14 Jul 2009, 11:11 AM
NO. You specify a height on the ListView.

ValterBorges
14 Jul 2009, 11:22 AM
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-style:solid;">
</div>

Animal
14 Jul 2009, 11:30 AM
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
14 Jul 2009, 11:56 AM
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
14 Jul 2009, 11:58 AM
Using a selector with an ID?

ValterBorges
14 Jul 2009, 12:09 PM
Hi Animal,
Thanks again I was looking at one of my 1.1x examples and found the solution to this.

if you have one or more listviews and you want to constrain the row sizes different here is what you do. This shows 3 rows for Companies and 4 rows for Stocks.

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

#dStocks .x-list-body {
height: 80px;
}

</style>


<div id="dCompanies" style="">
</div>


<div id="dStocks" style="">
</div>

Animal
14 Jul 2009, 12:11 PM
Yes. That's what I said.

ValterBorges
14 Jul 2009, 12:13 PM
Yes, I was looking at one of my 1.1x examples and that's exactly right.

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

#dStocks .x-list-body {
height: 80px;
}

</style>

<div id="dCompanies" style="">
</div>

<div id="dStocks" style="">
</div>

ValterBorges
14 Jul 2009, 12:15 PM
Are you in the states? Are you looking for work?

Animal
14 Jul 2009, 12:40 PM
No. I have a lot of work!