1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    19
    Vote Rating
    0
    pradipkumar is on a distinguished road

      0  

    Default Unanswered: Scrollbar Issue.

    Unanswered: Scrollbar Issue.


    Hi,
    In sencha touch application the scrollbar is not working properly.I used the code like this.
    1>scrollable: { direction: 'vertical',
    directionLock: true
    }
    scrollbar is showing but it is not fully working.I also tried like this: scroll: true, but this also not working ..


    Thanks in advance .

  2. #2
    Touch Premium Member suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    446
    Answers
    21
    Vote Rating
    62
    suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough

      0  

    Default


    Hi,
    Post is probably better place in the touch forums - someone from Sencha may move it.

    Have a look at this - http://docs.sencha.com/touch/2-1/#!/...r-event-scroll
    This has an example of placing a scroll on a container.

    To help you we need a full code sample of the "component" etc... that you are trying to make scrollable.
    When you say "it is not fully working" what exactly do you mean?

    What version of Touch are you using?

  3. #3
    Sencha User
    Join Date
    Nov 2012
    Posts
    19
    Vote Rating
    0
    pradipkumar is on a distinguished road

      0  

    Default scrollbar issue on the following code.

    scrollbar issue on the following code.


    Hi,
    Please check the below code.

    Ext.define('MyApp.view.DetailsScreen',{ extend:'Ext.Panel',
    xtype:'detailsscreencard',

    config:{
    fullscreen: true,
    layout:'card',
    scrollable: {
    direction: 'vertical',
    directionLock: true
    },
    items:[{
    xtype:'titlebar',
    title:'Deal Name',
    id:'titlebar_detailscreen',
    docked:'top',
    items:{xtype: 'spacer'},
    items:{
    xtype:'button',
    text:'back',
    align:'left'
    }
    },
    {
    xtype:'panel',
    docked:'top',
    layout:'hbox',
    cls:'details_first',
    style:'background-color: #FFCAC3;',
    height:'120px',
    items:[
    {
    flex:3,
    xtype:'panel',
    margin:'5px',
    id:'itemimage'

    },
    {
    flex:7,
    xtype:'img',
    margin:'5px',
    height:'90px',
    width:'180px',
    border :'1px solid black',
    id:'mapview',
    useCurrentLocation: true,
    },


    ]
    },
    {
    xtype:'panel',
    docked:'top',
    layout:'hbox',
    style:'background-color:white;',
    items:[{
    flex:1,
    xtype:'button',
    iconCls: 'timeremain',
    id:'time_remaining',
    iconMask: true,
    text:'refresh',
    },
    {
    flex:1,
    xtype:'button',
    iconCls: 'discount_per',
    id:'discount',
    iconMask: true,
    text:'refresh',
    },
    {
    flex:1,
    xtype:'button',
    id:'distance',
    iconCls: 'distane_val',
    iconMask: true,
    text:'refresh',
    }]
    },
    {
    xtype: 'label',
    html: 'HIGHLIGHTS',
    docked:'top',
    cls:'dec_test',


    },
    {
    xtype:'panel',
    id:'highlights',
    docked:'top',
    cls:'descr',
    html:['<div>',
    '<h4>SPA TREATMENT</h4>',
    '<p>Have it all at Oasis Day Spa : a skin-perfecting facial,<br/>rejuventating ,essage, body scrub</p>',
    '</div>'
    ].join('')
    },
    {
    xtype: 'label',
    html: 'TERMS AND CONDITIONS',
    docked:'top',
    cls:'dec_test',


    },
    {
    xtype:'panel',
    id:'dealterms',
    docked:'top',
    cls:'descr',
    html:['<div>',
    '<h4>SPA TREATMENT</h4>',
    '<p>Have it all at Oasis Day Spa : a skin-perfecting facial,<br/>rejuventating ,essage, body scrub</p>',
    '</div>'
    ].join('')
    },
    {
    xtype: 'label',
    docked:'top',
    html: 'DESCRIPTION',
    cls:'dec_test',
    },
    {
    xtype:'panel',
    docked:'top',
    id:'description',
    cls:'descr',
    html:['<div>',
    '<h4>SPA TREATMENT</h4>',
    '<p>Have it all at Oasis Day Spa : a skin-perfecting facial,<br/>rejuventating ,essage, body scrub</p>',
    '</div>'
    ].join('')
    }
    {
    xtype:'grabbuttons',
    cls:'tab_fixed',
    docked:'bottom',
    }]
    }
    });


    Here the scrollbar is coming on the last panel but i need the scrollbar will come whole panel.Please give any solution for this.

    Thanks for giving your valuable time.

  4. #4
    Touch Premium Member suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    446
    Answers
    21
    Vote Rating
    62
    suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough

      0  

    Default


    You'll need to wrap your code in code tags to make it readable.

    Do you want the whole screen to scroll? If so apply the scrollable setting to the viewport not the panel with card layout.

  5. #5
    Sencha User
    Join Date
    Nov 2012
    Posts
    19
    Vote Rating
    0
    pradipkumar is on a distinguished road

      0  

    Default Please check this screen.....

    Please check this screen.....


    Hi,
    I have attached the screen shot,kindly check once. scrollbar is showing on the bottom panel.,how i put this scrollbar whole my screen.I have marked as box.Please find it. Many many thanks sir for your help.
    2012-11-19_1420.jpg

  6. #6
    Touch Premium Member suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    446
    Answers
    21
    Vote Rating
    62
    suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough

      0  

    Default


    ok your highlights, terms and conditions and description panels should be just child containers inside a parent container with a vbox layout (not panels that are docked top)
    Apply the scrollable config to this new parent container.

    Then highlights, terms and conditions and description area will hiave the scroll which is what I assume you want

  7. #7
    Sencha User
    Join Date
    Nov 2012
    Posts
    19
    Vote Rating
    0
    pradipkumar is on a distinguished road

      0  

    Default scrollbar issue

    scrollbar issue


    Hi Sir,

    What you told i am not getting.Please update my code, otherwise write some sample code which is better understandable for me.Thanks in advance.


    Thanks & Regards,
    Pradip Kumar

  8. #8
    Touch Premium Member suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    446
    Answers
    21
    Vote Rating
    62
    suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough

      0  

    Default


    OK quick sample

    Code:
    {
     //This is the parent container that is scroll-able and wraps all the child containers
      xtype : container,
      scrollable : true,
      //Layout vbox stack child containers
      layout : {
        type : 'vbox',
        pack : 'start',
        align : 'stretch;
      }
      items : [{
          xtype : 'container',
          html : 'I am a child container first in the vbox stack' 
        },{
          xtype : 'container',
          html : 'I am a child container second in the vbox stack'
        }]
    }
    Layout Samples:
    http://docs.sencha.com/touch/2-1/#!/guide/layouts
    ExtJS (relevant)
    http://docs.sencha.com/ext-js/4-1/#!...t-browser.html

    Scrollable sample:
    http://docs.sencha.com/touch/2-1/#!/...croll.Scroller

  9. #9
    Sencha User
    Join Date
    Nov 2012
    Posts
    19
    Vote Rating
    0
    pradipkumar is on a distinguished road

      0  

    Default scrollbar issue

    scrollbar issue


    Hi Sir,
    with reference your code i modify my code but i am getting the same issue what screen shot i sent.Please check the below code if anything wrong on that please update it.

    xtype:'container',
    scrollable: true,
    layout : {
    type : 'vbox',
    pack : 'start',
    align : 'stretch'
    },


    items:[
    {
    xtype: 'label',
    html: 'HIGHLIGHTS',
    docked:'top',
    cls:'dec_test',


    },
    {
    xtype:'panel',
    id:'highlights',
    docked:'top',
    cls:'descr',
    html:['<div>',
    '<h4>SPA TREATMENT</h4>',
    '<p>Have it all at Oasis Day Spa : a skin-perfecting facial,<br/>rejuventating ,essage, body scrub</p>',
    '</div>'
    ].join('')
    },
    {
    xtype: 'label',
    html: 'TERMS AND CONDITIONS',
    docked:'top',
    cls:'dec_test',


    },
    {
    xtype:'panel',
    id:'dealterms',
    docked:'top',
    cls:'descr',
    html:['<div>',
    '<h4>SPA TREATMENT</h4>',
    '<p>Have it all at Oasis Day Spa : a skin-perfecting facial,<br/>rejuventating ,essage, body scrub</p>',
    '</div>'
    ].join('')
    },
    {
    xtype: 'label',
    docked:'top',
    html: 'DESCRIPTION',
    cls:'dec_test',
    },
    {
    xtype:'panel',
    docked:'top',
    id:'description',
    cls:'descr',
    html:['<div>',
    '<h4>SPA TREATMENT</h4>',
    '<p>Have it all at Oasis Day Spa : a skin-perfecting facial,<br/>rejuventating ,essage, body scrub</p>',
    '</div>'
    ].join('')
    }]

    Please change the source code.

    Thanks & Regards,
    PradipKumar

  10. #10
    Touch Premium Member suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    446
    Answers
    21
    Vote Rating
    62
    suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough

      0  

    Default


    Sorry was in a hurry when I typed the sample and missed some quotes and put in a semi colon.

    ok, First of all when your post code samples please wrap your code in code blocks.
    Code:
    Ext.application({
      name : 'Test',
      launch : function() {
                            
      var cont = Ext.create('Ext.Container', {
        //This is the parent container that is scrollable and 
        //wraps all the child containers
        scrollable : true,
        //Layout vbox stack child containers
        layout : {
          type : 'vbox',
          pack : 'start',
          align : 'stretch',
        },
        items : [{
          xtype : 'container',
          html : 'I am a child container first in the vbox stack'
        },{
          xtype : 'container',
          html : 'I am a child container second in the vbox stack'
        }]
      });
      Ext.Viewport.add(cont);
    });

Thread Participants: 1

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..."