Scroll in a view with a list


I’ve got a view with three rows. First and second have a fixed height, last one is a list, that has variable number of items. Initially you can only view three items of list in the screen. When the list has a lot of items,you can only scroll in the list space, and the first and second row are fixed in screen. But I’d like that if list has a lot of items, when scrolling, the first and second row disappear, so you scroll all the screen.

My code:

var filmView = { id:"selectedFilm", css:"basicBG", rows:[ { id:"filmInfo", view:"template", css:"transparent", height:140, template:function(obj,common){ var html = '<div class="selected_film"><div class="selected_img_cont"><img class="selected_img" src="'+window.getImage(obj)+'"/></div>'; html += '<div class="selected_text">'; html += '<div class="">'+obj.title+'</div>'; html += '<div class="">Sala: '+obj.sala+'<br/>Duraci&oacute;n: '+obj.duracion+'<br/>Director: '+obj.director+'<br/>Género: '+obj.genre+'</div>'; html += '</div></div>'; return html; } }, { id:"filmDescription", view:"template", css:"film_description transparent", height:100, template:function(obj,common) { var html = obj.descrip; return html; } }, { id:"filmShows", view:"list", type:"Sessions", url:"data/sessions.js", datatype:"json" } ] };

How can I make all the screen scrollable?


dhx.Touch.disable(); //will re-enable full page scrolling ... //and later in config { id:"filmShows", view:"list", type:"Sessions", height:"auto", //added url:"data/sessions.js", datatype:"json" }

Hi Stanislav,

thank you for your answer. But if I put dhx.Touch.disable(); , you can’t scroll in first page where a collection of items are showed, using the same efect you have in Books Sample, like coverflow. You can’t scroll horizontally.

Then if you enter to view an item’s details, you can scroll all the page, but in the list you only view 4 items, and the other 4 are not visible, and can’t scroll to them.

Thank you,

Second solution will be to

  • still have height:“auto” for the list
  • include filmView in the scrollview with y scroll


you mean give scroll y to the view wich contains filmview?

var generalView = { id:"cartelera", view:"multiview", scroll: "y", //added cells:[ productsView, specialsView, filmView ] };

Thank you,

Like next

var generalView = { id:"cartelera", view:"multiview", scroll: "y", //added cells:[ productsView, specialsView, { view:"scrollview", scroll:"y", body:filmView } ] };

Hi Stanislav,

thank you, but it doesn’t work. If I click on one film, the app does’nt go to filmView. Like Books Sample, I use a function to show film’s detail from productsView. It shows filmView, but now it doesn’t work if I use

cells:[ productsView, specialsView, { view:"scrollview", scroll:"y", body:filmView } ]
instead of

cells:[ productsView, specialsView, filmView ]

The function is

function showDescription(id,title){ var data = this.item(id); $$("filmInfo").data = dhx.copy(data); $$("filmInfo").refresh(); $$("filmDescription").data = dhx.copy(data); $$("filmDescription").refresh(); $$("filmShows").filter("#film#",id); showToolbarBatch("back"); $$("selectedFilm").show(); $$("viewname").setValue(title); return true; }

where selectedFilm is the id for filmView. The part of the function that changes the top bar is working, so maybe the problem is with $$(“selectedFilm”).show();?

Thnak you for your help,

Probably you need to have it as

cells:[ productsView, specialsView, { view:"scrollview", scroll:"y", body:filmView, id:"scrollFilmView" } ]

and replace

Hi Stanislav,

now it works! Thanks.

But a small issue with scrolling. When you enter film’s details, you view 80% of film details. If you want to scroll down (you move the finger up), you cannot. First you have to move the finger down a bit, and then the scroll moving the finger up works, but sometimes does’nt detect the finger’s movement. I’ve tested with iPhone.


So far, this is a first report of such problem.
If possible - can you provide any kind of sample or demo link where issue can be reconstructed
( you can send it directly to )

Hi Stanislav,

I’ve sended a link to you by mail.

Thank you,

add scroll:false to the list in the filmView

Currently both scrollview and list have vertical scroll, which result in described problem, if scroll in list will be disabled, top-level scroll will work as expected.

Hi Stanislav,

using scroll:false in list, it works great!

Thank you for your help,