Results 1 to 2 of 2

Thread: How to use scrollable Div

  1. #1
    Sencha User
    Join Date
    Apr 2012
    Vote Rating

    Default How to use scrollable Div

    Hi Guys,

    I am new to sencha touch and am having problem with adding scrollable div. I am currently developing a mapping application for mobile in sencha touch 2.0.1 with open-layers.
    I have different annotations on a map, when the user clicks on an annotation a speech bubble is shown with some text ( Please see attached image) . The content of the speech bubble may very from 50 characters to 1000 characters therefore I want to add a vertically scrollbar if the content is too long.

    How do I do that ? Suppose I have the following div :
    var speechBubble = '<div id="SpeechBubble">bla bla bla</div>'

    Should I use a div or switch to a panel. If I use a panel how do I use it. The following doesn't work :
    var speechBubble = '<div id="SpeechBubble">'+new Ext.Panel({height: 100, scroll: 'vertical', layout: {type: 'fit', align: 'stretch'}, html: _SomeHtml}+'</div>'

    Please note that the app will be a native app and will wrapped with phonegap 2.5.



  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL
    Vote Rating


    Sencha Touch uses it's own scroller not the device's so if a <div> is scrollable it won't scroll as you would expect. You would need to use a container and make it scrollable.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts