Results 1 to 3 of 3

Thread: Hbox not spanning fullscreen

  1. #1
    Sencha User
    Join Date
    May 2011
    Location
    Ontario, Canada
    Posts
    10

    Default Hbox not spanning fullscreen

    I am fairly new to Sencha and I am having difficulty forcing a vbox to span my entire panel.

    I have tried adjusting the padding of various elements, and have not success.

    Simple panel layout
    Code:
    var lastTripSummary = new Ext.Panel({
    	flex: 3,
    	style:"background-color:green;",
    	html: "<p>Last Trip</p>",
    }); 
    
    var alerts = new Ext.Panel({
    	flex: 1,
    	style:"background-color:red;",
    	html: "<p>Alerts</p>",
    }); 
    
    var allTripSummary = new Ext.Panel({
    	flex: 3,
    	style:"background-color:blue;",
    	html: "<p>All Trips</p>",
    }); 
    
    dsMobile.views.Home = Ext.extend(Ext.Panel, {
    	fullscreen: true,
    	layout:{
    		type:'vbox',
    		align: 'stretch'
    	},
    	items: [lastTripSummary, alerts, allTripSummary]
    });
    
    Ext.reg('home', dsMobile.views.Home);
    The tab switcher
    Code:
    Ext.ns('dsMobile', 'dsMobile.views');
    
    function StartApp()
    {
    
    var aListItems = [{
    				title: 'Trips',
    				xtype: 'trip',
    				iconCls: 'compass1',
    				cls: 'card1'
    			}, {
    				title: 'Events',
    				html: '<h1>Events Card</h1>',
    				iconCls: 'warning_black',
    				cls: 'card2',
    			}, {
    				title: 'Home',
    				xtype: 'home',
    				iconCls: 'home2',
    			}, {
    				title: 'Go Green',
    				
    				xtype: 'goGreen',
    				iconCls: 'globe2',
    			}, {
    				title: 'Settings',
    				html: '<h1>Settings</h1><object data="resources/svg/tree.svg" width="300" height="400" type="image/svg+xml">',
    				iconCls: 'settings6',
    				cls: 'card5'
    			}];
    
    	Ext.setup({
    	icon: 'icon.png',
    	tabletStartupScreen: 'tablet_startup.png',
    	phoneStartupScreen: 'phone_startup.png',
    	glossOnIcon: false,
    	
    	onReady: function() {
    		var tabpanel = new Ext.TabPanel({
    			tabBar: {
    				dock: 'bottom',
    				layout: {
    					pack: 'center'
    				}
    			},
    			layout: 'card',
    			fullscreen: true,
    			ui: 'light',
    			cardSwitchAnimation: {
    				type: 'slide',
    				cover: true
    			},
    			
    			defaults: {
    				scroll: 'vertical'
    			},
    			items: aListItems,
    			// activeTab: 2, --BUG next release
    			// http://www.sencha.com/forum/showthread.php?130988-CLOSED-DUP-TabPanel-activeTab-problems
    			activeItem: 2
    		});
    	}
    	});
    }
    Attached Images Attached Images

  2. #2
    Ext JS Premium Member lotsofquestions's Avatar
    Join Date
    Aug 2009
    Location
    Hook, Hampshire, UK
    Posts
    23

    Exclamation HBox not spanning screen

    This is the source of my entire app - the HBox layout wont span the entire screen - annoying...?!

    Code:
    new Ext.Application({
    
        launch: function() {
            var panel;
            var homeToolbar;
            var products;
            var iconTemplate;
    
            products = [{
                title: 'Dairy',
                icon: 'dairy.png'
            }];
    
            homeToolbar = new Ext.Toolbar({
                dock : 'top',
                title: 'Shoffer',
                items: [
                    {
                        text: 'About'
                    }
                ]
            });
    
            iconTemplate = new Ext.XTemplate.from('product-template');
    
            panel = new Ext.TabPanel({
    
                fullscreen: true,
    
                tabBar: {
                    dock: 'bottom',
                    layout: {
                        pack: 'center'
                    }
                },
    
                items: [{
                    title: 'Home',
                    iconCls: 'home',
                    layout: {
                        type: 'hbox',
                        align: 'stretch',
                        pack: 'center'
                    },
                    items: [{
                        html: 'one',
                        style: "background-color: red;"
                    },{
                        html: 'two',
                        style: "background-color: blue;"
                    },{
                        html: 'three',
                        style: "background-color: green;"
                    }]
    
                },{
                    title: 'Map',
                    iconCls: 'locate'
                },{
                    title: 'Checklist',
                    iconCls: 'list'
                },{
                    title: 'Share',
                    iconCls: 'action'
                }],
    
                dockedItems: [homeToolbar]
            });
    
        }
    });

  3. #3
    Sencha User
    Join Date
    May 2011
    Location
    Ontario, Canada
    Posts
    10

    Default

    I ended up getting a solution... kind of...

    I ended up using someone else's template and modifiying the code to work for me.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •