1. #1
    Sencha User
    Join Date
    Jul 2012
    Location
    New Jersey
    Posts
    116
    Answers
    6
    Vote Rating
    5
    Mike6679 is on a distinguished road

      0  

    Default Answered: Cannot make Panel inside Container scrollable

    Answered: Cannot make Panel inside Container scrollable


    I'm trying to make the inner panel below scrollable but everytime I set it to scrollable all the content disappears. I have a height set on my panel but it still doesn't show it. What am I missing here?

    Code:
    Ext.define('epiduo_ped.view.Pi', {
    	extend: 'Ext.Container',
    	
            me_pi:'',
            id:   'slide_panel_pi',
            left: 988,
            height: 786,
           
            config: {
    		
    		items: [
                             {
                                xtype:   'image',
                                src:     'resources/images/tabs/tab-pi.png',
                                height:  '786px',
                                width:   '999px',
                                top:     '0px'
                             },
                             {  
                                xtype:'hotspotSlidingPanel',
                                width:70,
                                height:70,
                                top:30,
                                left:1885,
                                id: 'hotspot_pi_close'
                             }
                             ,
                             {  
                                xtype:'hotspotSlidingPanel',
                                width:45,
                                height:35,
                                top:15,
                                left:940,
                                id: 'hotspot_pi_closeX'
                             },
                             {
                                 xtype: 'panel',
                                 top:     60,
                                 left:    10,
                                 height:  600,
                                 scrollable: {
                                    direction: 'vertical',
                                    directionLock: true
                                 },
                                 items:[
                                   {
                                      xtype:   'image',
                                      src:     'resources/images/tabs/tab-pi_01.png',
                                      height:  594,
                                      width:   1700,
                                      top:     '0px',
                                      left:    '0px'
                                   },
                                   {
                                      xtype:   'image',
                                      src:     'resources/images/tabs/tab-pi_02.png',
                                      height:  521,
                                      width:   1700,
                                      top:     '595px',
                                      left:    '0px'
                                   }
                                     
                                 ]
                              
                          }
                             
                           ]
    	},
             initialize: function(){  //add all the buttons dynamically - based on store config
                
                me_pi = this;
             }
            
    });

  2. Try using a vbox layout on the panel that houses the images. I'm thinking, if these images are so big and you'd need to scroll the individual images, you should not stack them and only show one at a time using a card layout or something. I also noticed your panel that houses the images doesn't have a width. You should add a width config, layout: 'vbox' config, and scrollable: 'vertical' config


    Edit: If you can show me a sketch or design of what you want to achieve, I could help you clean up your code more. You have a lot of floating panels because you use the 'top' and 'left' config all over the place :P

  3. #2
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    Can you show me an example of this? I'd like to know why your widths and heights are so large
    I'm looking at your code now.

  4. #3
    Sencha User
    Join Date
    Jul 2012
    Location
    New Jersey
    Posts
    116
    Answers
    6
    Vote Rating
    5
    Mike6679 is on a distinguished road

      0  

    Default


    They are high resolution images that why everything is so large.

  5. #4
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    You seem to have a bunch of floating components, some of them are off the screen when I try testing it. Do you at least have a sketched result of what you want to achieve?

  6. #5
    Sencha User
    Join Date
    Jul 2012
    Location
    New Jersey
    Posts
    116
    Answers
    6
    Vote Rating
    5
    Mike6679 is on a distinguished road

      0  

    Default


    well, its a container that houses a background image, a hotspot image and a panel. The panel will contain several images one on top of the other (vertically stacked)...these vertically stacked images need to be scrolled. If you still need a sketch I can do that.....

  7. #6
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    Try using a vbox layout on the panel that houses the images. I'm thinking, if these images are so big and you'd need to scroll the individual images, you should not stack them and only show one at a time using a card layout or something. I also noticed your panel that houses the images doesn't have a width. You should add a width config, layout: 'vbox' config, and scrollable: 'vertical' config


    Edit: If you can show me a sketch or design of what you want to achieve, I could help you clean up your code more. You have a lot of floating panels because you use the 'top' and 'left' config all over the place :P

  8. #7
    Sencha User
    Join Date
    Jul 2012
    Location
    New Jersey
    Posts
    116
    Answers
    6
    Vote Rating
    5
    Mike6679 is on a distinguished road

      0  

    Default


    I changed the panel to a container. Should I get rid of my container all together and use a VBox OR put a VBox in my container?

    BTW: setting the width fixed the visibility issue but the content doesn't really scroll it just snaps back.

  9. #8
    Sencha User
    Join Date
    Jul 2012
    Location
    New Jersey
    Posts
    116
    Answers
    6
    Vote Rating
    5
    Mike6679 is on a distinguished road

      0  

    Default


    Here is my latest. I added a vbox layout but my 2 images are right on top of each other, hmmmm




    Code:
    Ext.define('epiduo_ped.view.Pi', {
    	extend: 'Ext.Container',
    	
            me_pi:'',
            id:   'slide_panel_pi',
            left: '988px',
            height: '786',
           
            config: {
    		
    		items: [
                             {
                                xtype:   'image',
                                src:     'resources/images/tabs/tab-pi.png',
                                height:  '786px',
                                width:   '999px',
                                top:     '0px'
                             },
                             {  
                                xtype:'hotspotSlidingPanel',
                                width:70,
                                height:70,
                                top:30,
                                left:1885,
                                id: 'hotspot_pi_close'
                             }
                             ,
                             {  
                                xtype:'hotspotSlidingPanel',
                                width:45,
                                height:35,
                                top:15,
                                left:940,
                                id: 'hotspot_pi_closeX'
                             }
                             ,
                             {
                                 xtype: 'container',
                                 top:     60,
                                 left:    60,
                                 height:   650,
                                 width:    900,
                                 
                                 config:{
                                   layout: 'vbox'  
                                     
                                 }, 
                                
                                 
                                 scrollable: true,
                                 scroll: 'vertical',
                                 
                                 items:[
                                   {
                                      xtype:   'image',
                                      src:     'resources/images/tabs/tab-pi_01.png',
                                      height:  '594px',
                                      width:   '700px',
                                      top:     '0px',
                                      left:    '0px'
                                  },
                                  {
                                      xtype:   'image',
                                      src:     'resources/images/tabs/tab-pi_02.png',
                                      height:  '594px',
                                      width:   '700px',
                                      top:     '0px',
                                      left:    '0px'
                                  }
                                     
                                 ]
                              
                          }
                             
                           ]
    	},
             initialize: function(){  //add all the buttons dynamically - based on store config
                
                me_pi = this;
             }
            
    });

  10. #9
    Sencha User
    Join Date
    Jul 2012
    Location
    New Jersey
    Posts
    116
    Answers
    6
    Vote Rating
    5
    Mike6679 is on a distinguished road

      0  

    Default


    Ahh I got it. I had a top and left set for my items and once I removed that it worked:


    Code:
    Ext.define('epiduo_ped.view.Pi', {
        extend: 'Ext.Container',
        
            me_pi:'',
            id:   'slide_panel_pi',
            left: '988px',
            height: '786',
           
            config: {
            
            items: [
                             {
                                xtype:   'image',
                                src:     'resources/images/tabs/tab-pi.png',
                                height:  '786px',
                                width:   '999px',
                                top:     '0px'
                             },
                             {  
                                xtype:'hotspotSlidingPanel',
                                width:70,
                                height:70,
                                top:30,
                                left:1885,
                                id: 'hotspot_pi_close'
                             }
                             ,
                             {  
                                xtype:'hotspotSlidingPanel',
                                width:45,
                                height:35,
                                top:15,
                                left:940,
                                id: 'hotspot_pi_closeX'
                             }
                             ,
                             {
                                 xtype: 'container',
                                 top:     60,
                                 left:    60,
                                 height:   650,
                                 width:    900,
                                 
                                 layout: 'vbox',  
                                     
                                 scrollable: true,
                                 scroll: 'vertical',
                                 
                                 items:[
                                   {
                                      xtype:   'image',
                                      src:     'resources/images/tabs/tab-pi_01.png',
                                      height:  '594px',
                                      width:   '700px'
                                      
                                  },
                                  {
                                      xtype:   'image',
                                      src:     'resources/images/tabs/tab-pi_02.png',
                                      height:  '594px',
                                      width:   '700px'
                                      
                                  }
                                     
                                 ]
                              
                          }
                             
                           ]
        },
             initialize: function(){  //add all the buttons dynamically - based on store config
                
                me_pi = this;
             }
            
    });
    thanks again Jerome76...

  11. #10
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    Sure thing

Thread Participants: 1

Tags for this Thread

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..." hd porno faketaxi