PDA

View Full Version : Aligning content to the middle of a Panel



BenMajor
14 Mar 2011, 12:42 AM
I wonder if you could help me? I have the following code which generates a grid of vBox and hBox components. What I would like to do is align the content of each cell (a Panel object) to the middle, but whatever settings I change, I cannot get the content to be centrally aligned. Here's the code I'm using right now:


var dashboardCfg = {
defaultCls: 'dashboardButton',
cols: 3,
rows: 3,
buttons: [
{ label: 'Profile', icon: 'assets/icons/dashboard/profile.png', handler: function() { alert('Profile tapped'); } },
{ label: 'Friends', icon: 'assets/icons/dashboard/friends.png', handler: function() { alert('Friends tapped'); } },
{ label: 'Networks', icon: 'assets/icons/dashboard/networks.png', handler: function() { alert('Networks tapped'); } },
{ label: 'Search', icon: 'assets/icons/dashboard/find_friends.png' },
{ label: 'Messages', icon: 'assets/icons/dashboard/messages.png' },
{ label: 'Settings', icon: 'assets/icons/dashboard/settings.png' },
{ label: 'Map', icon: 'assets/icons/dashboard/map.png' },
{ label: 'Freeze', icon: 'assets/icons/dashboard/lock_account.png' },
{ label: 'About', icon: 'assets/icons/dashboard/about.png' }
],
tpl: '<img src="{icon}" title="{label}" /><span>{label}</span>'
};

var Dashboard = function(args)
{
if(args.widgets == undefined || typeof(args.widgets) != 'object')
{
console.error('Dashboard widgets should be passed, and should be an object.');
return false;
}
(args.title == undefined) ? args.title = 'Dashboard1' : args.title;

var totalItems = args.widgets.buttons.length;
var maxBtnsPerPane = args.widgets.cols * args.widgets.rows;
var noPanes = Math.ceil(totalItems / maxBtnsPerPane);
var panes = [];
var itemIndex = 0;
var showIndicator;

// Create the panes:
for(var i = 0; i < noPanes; i++)
{
panes[i] = new Ext.Panel({
title: 'Dashboard' + (i + 1),
layout: { type: 'vbox', align: 'stretch' },
pack: 'center',
defaults: { flex: 1 , layout: { type: 'hbox', align: 'stretch' } }
});

var thisCount = i + maxBtnsPerPane;

// Loop through how many rows we need:
for(var rowCount = 0; rowCount < args.widgets.rows; rowCount++)
{
var thisRow = new Ext.Panel({ layout: { type: 'hbox', align: 'middle', pack: 'center' }, title: 'Row' + (rowCount + 1), defaults: { flex: 1 } });

// Now we need to add the cells:
for(var colCount = 0; colCount < args.widgets.cols; colCount++)
{
var cellLabel;
(itemIndex > (totalItems - 1)) ? cellLabel = '' : cellLabel = args.widgets.buttons[itemIndex].label;

var thisCell = new Ext.Panel({
title: 'Cell' + (itemIndex + 1),
cls: 'dashboardButton card',
layout: { align: 'middle' },
html: args.widgets.tpl.replace(/\{(\w+)\}/g, function(match, key) { return args.widgets.buttons[itemIndex][key]; }),
});

thisRow.add(thisCell);
itemIndex++;
}
panes[i].add(thisRow);
}
}

(noPanes == 1) ? showIndicator = false : showIndicator = true;

var dashboard = new Ext.Carousel({
title: args.title,
items: panes,
indicator: showIndicator
});

return dashboard;
}

And the result as follows:

25120

Any suggestions on how to align everything centrally would be greatly appreciated. For reference, changing align: and pack: inside the layout object seem to make no difference on the cell level...

Thanks,
Ben.