PDA

View Full Version : Panel - Table Layout - Padding Issues



charlie17
26 Sep 2011, 6:14 PM
I am having a problem with padding between "rows" within a panel with a table layout. The table has 2 columns and various components are filling the "cells". In each of the left (column 1) cells I have a button. The problem: When I try to insert padding between each "row", it not only adds the padding, but it also increases the height of each button, distorting the way it looks. I would have expected the padding to simply insert blank space, not affect any of the components.

Any ideas?


Ext.create('Ext.panel.Panel', {
title: 'Container Panel',
id: 'containerpanel',
width: 400,
height: 300,
renderTo: Ext.getBody(),
layout: {
type: 'table',
columns: 2
},
defaults: {
style: 'padding-bottom: 10'
},


Answered per below. But another has arisen, here:
http://www.sencha.com/forum/showthread.php?149446-Rendering-panel-collapsed-makes-it-disappear&p=655627

Erikvip
26 Sep 2011, 6:24 PM
Try bodyPadding:



defaults: {
bodyPadding: '0 0 50 0'
},

charlie17
26 Sep 2011, 6:37 PM
Much appreciate the quick response. However, that is having no effect. By that I mean it is doing nothing at all...even when I set those bodyPadding figures to outrageous values, it doesn't change anything in the layout.

skirtle
27 Sep 2011, 2:30 AM
I never use table layout. I haven't yet seen a real use case where it wasn't better to use an alternative layout (usually VBox and HBox in some combination). All sorts of strange things happen using a table layout.

The defaults config option specifies options that are to be applied to all child items. If your buttons are children of this panel then the padding will be applied to them. Padding is internal, margins are external. You might have more luck using margins. Table layout supports a cellCls option that I suspect may prove an even better alternative.

charlie17
27 Sep 2011, 1:01 PM
skirtle -- that's an interesting POV on tables. So what layout would you advise for this situation? It's a pretty simple need really -- a panel containing components, lined up within the panel as follows:

<button 1> <component x>
<button 2> <component x>
<button 3> <component x>
...

But I want to have pretty fine control over spacing between the components in a given row, and over the spacing between rows.

netemp
27 Sep 2011, 9:02 PM
I had a similar issue and probably this link could prove to be of help to you:

http://stackoverflow.com/questions/7121063/html-form-to-extjs-form

a (http://stackoverflow.com/questions/7121063/html-form-to-extjs-form)s for the padding thing, I shall suggest to use 'container' for every horizontal section of your page and then give these containers top/bottom margins.

skirtle
27 Sep 2011, 10:47 PM
For that layout I'd do something like:


{
items: [
{
xtype: 'container',
items: [
{/*button*/},
{/*component x*/}
],
layout: {
align: 'stretch',
type: 'hbox'
}
}, {
...
}
],
layout: {
align: 'stretch',
type: 'vbox'
}
}

It's then just a case of tweaking the various options to get it looking just the way you want. The demos for hbox and vbox are quite helpful and the API docs should fill in the gaps.

An Absolute layout may provide another alternative.

charlie17
3 Oct 2011, 8:24 AM
skirtle - improvising around your approach worked well. Thanks a bunch. I'm closing this one out. However now I have another issue -- see here: http://www.sencha.com/forum/showthread.php?149446-Rendering-panel-collapsed-makes-it-disappear&p=655627