1. #1
    Ext JS Premium Member
    Join Date
    Sep 2007
    Location
    CT
    Posts
    462
    Vote Rating
    2
    ValterBorges is on a distinguished road

      0  

    Default ListView limit viewable rows

    ListView limit viewable rows


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

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Constrain its height.

  3. #3
    Ext JS Premium Member
    Join Date
    Sep 2007
    Location
    CT
    Posts
    462
    Vote Rating
    2
    ValterBorges is on a distinguished road

      0  

    Default Height where

    Height where


    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>
    Attached Files

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


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

  5. #5
    Ext JS Premium Member
    Join Date
    Sep 2007
    Location
    CT
    Posts
    462
    Vote Rating
    2
    ValterBorges is on a distinguished road

      0  

    Default Height problem

    Height problem


    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?

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    NO. You specify a height on the ListView.

  7. #7
    Ext JS Premium Member
    Join Date
    Sep 2007
    Location
    CT
    Posts
    462
    Vote Rating
    2
    ValterBorges is on a distinguished road

      0  

    Default ListView height

    ListView height


    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>

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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

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

  9. #9
    Ext JS Premium Member
    Join Date
    Sep 2007
    Location
    CT
    Posts
    462
    Vote Rating
    2
    ValterBorges is on a distinguished road

      0  

    Default ListView style override

    ListView style override


    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?

  10. #10
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Using a selector with an ID?

Thread Participants: 1