Results 1 to 2 of 2

Thread: How to use scrollable Div

  1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    5
    Vote Rating
    0
      0  

    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.

    Thankyou

    2013-05-21_1315.png

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      1  

    Default

    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
    https://github.com/mitchellsimoens

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
  •