PDA

View Full Version : Hbox not spanning fullscreen



imsCol
25 May 2011, 11:15 AM
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


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


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
});
}
});
}

lotsofquestions
31 May 2011, 8:35 AM
This is the source of my entire app - the HBox layout wont span the entire screen - annoying...?!


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]
});

}
});

imsCol
31 May 2011, 9:06 AM
I ended up getting a solution... kind of...

I ended up using someone else's (https://github.com/nelstrom/Sencha-Touch-tabs-and-toolbars-demo) template and modifiying the code to work for me.