1. #1
    Touch Premium Member
    Join Date
    Jan 2011
    Location
    Sydney, Australia
    Posts
    25
    Vote Rating
    0
    Frances is on a distinguished road

      0  

    Default vbox layout issue

    vbox layout issue


    Hi all, I have a vbox with a carousel in the top half, and a dataview in the bottom half (in a tab panel, so there's actually three dataviews, one for each tab). I want the entire page to scroll to reveal the extra rows in the dataview - instead of having just the dataview in the bottom half scrolling. (this is for phone only)

    The only I seem to accomplish this is by setting a fixed height on the dataview, otherwise scrolling the page up doesn't reveal anything past the already visible rows. Obviously I would want the height to be set dynamically according to how many rows are generated, I must be missing some simple thing ...

    Code below show the carousel panel (top half), the tabs panel (bottom half), the first dataview as an example, and the home panel where all this lives.

    Your help much appreciated

    Cheers

    Code:
    var carouselPanel = new Ext.Carousel({
    	 items: [item1, item2, item3],
    	cls: 'carousel-wrapper',
    	flex:   !Ext.is.Phone ? Ext.getOrientation() == "portrait" ? 1.5: 1: '',
    	height: 280 //this is actually in the css, here for illustration only
    });
    
    
    
    var tabsPanel = new Ext.TabPanel({
    	fullscreen: false,
    	sortable: true,
    	cls: 'tab-wrapper',
    	tabBar:  tabBarM,
    	items: [tabHomepageLatest, tabHomepageViewed, tabHomepageChannels],
    	flex: !Ext.is.Phone ? 1 : '',
    });
    
    
    
    var tabHomepageLatest =  new Ext.DataView({
    	id: 'tabHomepageLatest',
    	title: 'Latest',
    	store: storeTabLatest,
    	tpl: templates.tabbedViewTplPortrait,
    	scroll:  false,
    	height: 1000, //this is actually in the css, here for illustration only
    	itemSelector: 'li.menu-item',
    	fullscreen: false,
    	listeners: {			
    		itemTap: doSomething,
    	}				
    });
    
    var homePanel = new Ext.Panel({
    	id: 'homePanel',
    	layout: 'card',
    	fullscreen: true,
    	items: [{
    		itemId: 'homeLayout',
    		fullscreen : true,
    		scroll: Ext.is.Phone ? 'vertical' : false,
    		layout: {
    			type: "vbox",
    			align: "stretch"
    		},
    		items: [carouselPanel, tabsPanel]
    	}],dockedItems: dockedItems
    });

  2. #2
    Sencha User siebmanb's Avatar
    Join Date
    Aug 2011
    Location
    Geneva (CH) - Grenoble (FR)
    Posts
    253
    Vote Rating
    16
    siebmanb will become famous soon enough

      0  

    Default


    Ping !
    This is an interesting problem I am always facing when working with vbox and dataview. Any idea from the forum ?

    Thanks

  3. #3
    Sencha User siebmanb's Avatar
    Join Date
    Aug 2011
    Location
    Geneva (CH) - Grenoble (FR)
    Posts
    253
    Vote Rating
    16
    siebmanb will become famous soon enough

      0  

    Default


    Did you try the layout auto instead of vbox ?

Similar Threads

  1. Replies: 3
    Last Post: 30 Jun 2010, 8:50 AM
  2. issue with column layout within vbox
    By gordon in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 8 Apr 2010, 6:16 AM
  3. [CLOSED] 3.2RC1: vbox layout inside cardlayout issue
    By Max_nl in forum Ext 3.x: Bugs
    Replies: 21
    Last Post: 4 Apr 2010, 4:10 PM
  4. [SOLVED]3.1.1 vbox layout resizing issue
    By axpa in forum Ext 3.x: Help & Discussion
    Replies: 13
    Last Post: 24 Feb 2010, 3:31 AM

Thread Participants: 1