Hi,
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ó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?
Thanks,
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,
Ruben
Second solution will be to
- still have height:“auto” for the list
- include filmView in the scrollview with y scroll
Hi,
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,
Ruben
Probably you need to have it as
cells:[
productsView,
specialsView,
{ view:"scrollview", scroll:"y", body:filmView, id:"scrollFilmView" }
]
and replace
$$(“selectedFilm”).show();
with
$$(“scrollFilmView”).show();
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.
Ruben
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 support@dhtmlx.com )
Hi Stanislav,
I’ve sended a link to you by mail.
Thank you,
Ruben
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,
Ruben