PDA

View Full Version : Adding Scroller for div



tomalex0
19 Oct 2010, 4:00 AM
Hi,

How could we add Custom scrollers.
This is just an example i was trying to make work.



new Ext.Panel({
scroll:false,
title:'Test',
html:'<div id="mainid">
<div class="header"></div>
<div class="div-body"">There will be many contents here.</div>
</div>'
});



new Ext.util.Scroller(Ext.getDom(Ext.DomQuery.select("#mainid .div-body")), {
vertical : true,
listeners : {
scope : this,
scrollstart : function(){
console.log("start");
},
scrollend : function(){
console.log("end");
}
}
});

jay@moduscreate.com
19 Oct 2010, 8:10 AM
why not make the panel scrollable?

tomalex0
19 Oct 2010, 8:27 AM
I'm rendering an external calendar, to a div which has its own header and body part. So i give scroll false for the panel, which prevented total scroll. Now i'm trying to provide scroll for body part of the calendar.

withanx
30 Dec 2010, 11:59 AM
Bump. Is this possible?

tomalex0
1 Feb 2011, 4:51 AM
Its possible :),
Considering above condition

Specify scroller like this



new Ext.util.Scroller(Ext.getDom(Ext.DomQuery.select("#mainid .div-body"))[0], {
vertical : true,
listeners : {
scope : this,
scrollstart : function(){
console.log("start");
},
scrollend : function(){
console.log("end");
}
}
});

joseeight
1 Feb 2011, 2:34 PM
Why are you doing that? Are you looking to have a fixed header and then body that scrolls on it's own? Like my app: http://renaissancenavigator.com (must be viewed on iPhone or Android 2.0+)

If so, then you need to change the layout. Be a more clear and we can help, it should be possible in any case.

tomalex0
1 Feb 2011, 8:15 PM
I was using an external calendar component(build on jquery) to sencha-touch App , and i want custom scroll for its inner DIV. Above was just a test case i was considering.

Anyway i like the way you done the App :)

joseeight
1 Feb 2011, 8:38 PM
You can use a "Container" and the "renderTo" property to add it to a DIV, and enable the "scrollable" property. Insert your calendar to the "Container" as HTML. This should make is scrollable via touch, and no need to worry about the scrollbar, there are no scrollbars in touch ;)

tomalex0
1 Feb 2011, 9:26 PM
Yea but my calendar have its own header and content section, so i want header to be static and only want scrollbars for content.

Thanks for the reply

joseeight
2 Feb 2011, 1:37 PM
I think this is what you are looking for, although not sure since I don't know what you are building:

http://eightyearproject.com/sencha/forum/renderto/

Do you have a link to your app/site or wireframes? I did the above, but I'm pretty sure you should be doing this via a layout adjustment. Since I wasn't sure, I just slapped that together quickly hoping it would help.

Cheers

tomalex0
2 Feb 2011, 8:50 PM
If you check this thread

http://www.sencha.com/forum/showthread.php?104976-Calendar-based-on-Full-Calendar/page2

in screenshot itself you can see Day View with Header part from Sun to Mon,

I was trying to keep those header static and give scrollbar for Days.

Curruntly i have scrollbar for whole.

woutertinbergen
12 Jun 2013, 7:10 AM
Hi there
I'm on sencha 2.1 and try to scroll only the body of my custom html container ( with a faked static menu on top and bottom.

Where should i place this code to specify the scroller? ( cause i think this could do it :))

Wouter


Its possible :),
Considering above condition

Specify scroller like this



new Ext.util.Scroller(Ext.getDom(Ext.DomQuery.select("#mainid .div-body"))[0], {
vertical : true,
listeners : {
scope : this,
scrollstart : function(){
console.log("start");
},
scrollend : function(){
console.log("end");
}
}
});