1. #1
    Sencha User
    Join Date
    Oct 2010
    Posts
    45
    Vote Rating
    0
    peterkuli is on a distinguished road

      0  

    Default list behind dockedItems and not scrolling in TabPanel

    list behind dockedItems and not scrolling in TabPanel


    My list is not scrolling properly in a TabPanel. When I scroll down, the list is going back immediately to the startposition.

    Also, the list appears behind the (bottom) dockedItems, which in my case is a toolbar. It should 'stop' at the top of this toolbar, but isn't.

    Code:
    var list = new Ext.List({
    			itemTpl : '{starttime} - {endtime} - {activity}',
    			grouped : false,
    			indexBar: false,
    			store: store
    		});		
    
    		var tabPanel = new Ext.TabPanel({
    			fullscreen: true,
    			scroll: 'vertical',
    			dockedItems: [{
    				dock : 'top',
    				xtype: 'toolbar',
    				title: 'PFD 2011'
    			}],
    			layout: 'fit',
    			tabBar:{
    				dock: 'bottom',
    				ui: 'dark',
    				layout: {
    					pack: 'center'
    				}
    			},
    			items:[{
    					title: 'Schedule',
    					iconCls: 'info',
    					items:[list],
    					cls: 'card1'
    				},{
    					title: 'Route',
    					iconCls: 'favorites',
    					html: 'Route',
    					cls: 'card2'
    				}]
    		});

  2. #2
    Sencha User
    Join Date
    Jul 2009
    Posts
    48
    Vote Rating
    0
    ninoguba is on a distinguished road

      0  

    Default


    I'm faced with the same issue. Please post if you find a solution. Thanks.

  3. #3
    Sencha User
    Join Date
    Oct 2010
    Posts
    45
    Vote Rating
    0
    peterkuli is on a distinguished road

      0  

    Default


    Instead of using a list, I'm now using a dataview. With this dataview I don't have the 'behind bottom toolbar' issue, neither the 'scrolling' issue.

  4. #4
    Sencha Premium Member
    Join Date
    Feb 2011
    Posts
    60
    Vote Rating
    0
    venumobile is on a distinguished road

      0  

    Default


    I haven't tested this, but try this instead (I had the same problem until I did it this way):

    Code:
    var list = new Ext.List({
    			itemTpl : '{starttime} - {endtime} - {activity}',
                            fullscreen: true,
                            scroll: false,
                            layout: 'fit',
    			grouped : false,
    			indexBar: false,
    			store: store
    		});		
    
    		var tabPanel = new Ext.TabPanel({
    			fullscreen: true,
    			dockedItems: [{
    				dock : 'top',
    				xtype: 'toolbar',
    				title: 'PFD 2011'
    			}],
    			layout: 'fit',
    			tabBar:{
    				dock: 'bottom',
    				ui: 'dark',
    				layout: {
    					pack: 'center'
    				}
    			},
    			items:[{
    					title: 'Schedule',
    			                scroll: 'vertical',
                                            fullscreen: true,
                                            layout: 'fit',
    					iconCls: 'info',
    					items:[list],
    					cls: 'card1'
    				},{
    					title: 'Route',
    					iconCls: 'favorites',
    					html: 'Route',
    					cls: 'card2'
    				}]
    		});

  5. #5
    Sencha User
    Join Date
    Jul 2009
    Posts
    48
    Vote Rating
    0
    ninoguba is on a distinguished road

      0  

    Default


    Quote Originally Posted by ninoguba View Post
    I'm faced with the same issue. Please post if you find a solution. Thanks.
    Found the solution. Basically you need to specify layout: 'fit' on the panel containing your scrollable list.

  6. #6
    Sencha User
    Join Date
    Oct 2010
    Posts
    45
    Vote Rating
    0
    peterkuli is on a distinguished road

      0  

    Default


    @venumobile

    I didn't test your code, but accidentally I found out that if you specifiy 'fullscreen: true' on both the list and tabPanel, I don't face the problems mentioned in my first post.

    Edit: the list is still behind the bottom toolbar...but it's scrollable.

    @ ninoguba
    I have layout:'fit' specified on my tabPanel which contains the list...but still behind the toolbar...

    Edit2:
    In the items config of your tabPanel, do the following:
    Code:
                    items:[{
    					title: 'title',
    					iconCls: 'info',
    					items:[listPanel],
    					layout: 'fit',
    					cls: 'card1'
    				}

  7. #7
    Sencha User
    Join Date
    Jun 2011
    Posts
    15
    Vote Rating
    0
    Old McStopher is on a distinguished road

      0  

    Default


    Code:
    layout: 'fit'
    This does fix the issue, but be warned. If you have a toolbar as an item in your panel, be sure it is in your dockedItems: instead of your basic items:. This made my toolbar take up my whole screen and the list to not be displayed at all. Upon moving the toolbar to the dockedItems:, this layout fix worked for me.

  8. #8
    Sencha User
    Join Date
    Nov 2011
    Posts
    2
    Vote Rating
    0
    raj.gauravmca@gmail.com is on a distinguished road

      0  

    Default Raj

    Raj


    In My case I cannot use layout fit for the Panel because there is condition use it as vbox then hoe can i resolve the same problem


    "My list is not scrolling properly in a TabPanel. When I scroll down, the list is going back immediately to the startposition." Thanks
    Last edited by raj.gauravmca@gmail.com; 15 Dec 2011 at 5:18 AM. Reason: spelled wrong and Formating issue

Similar Threads

  1. Problem with Ext.List scrolling
    By logicmedia in forum Sencha Touch 1.x: Discussion
    Replies: 8
    Last Post: 27 Jul 2011, 6:25 AM
  2. Scrolling list of images
    By Tom Tayon in forum Ext GWT: Discussion
    Replies: 2
    Last Post: 8 Feb 2011, 11:54 AM
  3. List not scrolling
    By m@uce in forum Sencha Touch 1.x: Discussion
    Replies: 7
    Last Post: 4 Feb 2011, 1:39 PM
  4. Problem scrolling a list
    By xgdlm in forum Sencha Touch 1.x: Discussion
    Replies: 3
    Last Post: 7 Jul 2010, 11:39 PM
  5. Adding too many panel to a Scrolling Tabpanel. The scrolling icon disappear
    By tomchen1000 in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 20 Mar 2008, 4:26 AM

Thread Participants: 4