PDA

View Full Version : Table layout columns divided equally on available space?



gtsafas
8 Oct 2014, 1:26 PM
I've been looking in the forums/google. Im sorry if this has been answered already.

I am trying to create a table that I can specify how many columns. This part is easy. What I am struggling with is if I do not define a height/width they do not render.

I would think you could define a row height and then col width would be calculated based on total available space. It seems kind of silly to say colspan=2 and then still need to define a width, no?

If I am missing something please let me know



Ext.create("Ext.panel.Panel", {
'layout': {
'type': 'table',
'columns': 2
},
'items': [{
'xtype': Ext.create("Ext.panel.Panel", {
'layout': {
'align': 'stretch',
'type': 'hbox'
},
'items': [{
'xtype': Ext.create("Ext.panel.Panel", {
'layout': {
'align': 'stretch',
'type': 'vbox'
},
'items': [{
'xtype': Ext.create("Ext.form.TextField", {
'value': 'test',
'border': 1,
'inputType': 'text'
})
}],
})
}],
})
}],
})

glopes
8 Oct 2014, 3:36 PM
This should create a fullscreen panel with panels filling all the width:



Ext.create('Ext.container.Viewport', {
layout: 'fit',
renderTo: Ext.getBody(),
items: [
{
xtype: 'panel',
defaults: {
bodyStyle: 'padding:20px'
},
title: '',
layout: {
type: 'table',
columns: 2,
tableAttrs: {
style: {
width: '100%'
}
}
},
items: [
{
title: 'My Panel'
},
{
title: 'My Panel'
},
{
title: 'My Panel'
},
{
xtype: 'panel',
title: 'My Panel'
},
{
colspan: 2,
title: 'My Panel'
}
]
}
]


});

gtsafas
10 Oct 2014, 10:30 AM
Ah, looks like it works when I run your code. For some reason when I run it with mine it is making the first column span 100%. I am debugging now, thanks for the snippet.

gtsafas
10 Oct 2014, 10:48 AM
Ok so if I initialize the table control with the components it works as expected. If I append them later then I get first el taking almost 100% and the second el is just a sliver. If I do a table.hide(), table.show() it doesnt appear again. But if I change tabs on the tab panel its layout out correctly. Tried table.doLayout() but that didnt work either. Any thoughts?

glopes
10 Oct 2014, 11:26 AM
Try running a panel.updateLayout() everytime you add a component to it.

gtsafas
10 Oct 2014, 12:11 PM
Try running a panel.updateLayout() everytime you add a component to it.

Hi glopes, thanks for the suggestion. Unfortunately that did not work. I am working around it currently by adding the entire table with children instead of appending them on demand. Something isn't updating properly.

I had another question, I got the layouts working how I wanted based on your example.

When I mix certain colspan/rowspans it seems to not react how I would expect. I attached screenshots, let me know if you have any suggestions. Thanks again for all the help.


All default to rowspan:1 colspan:1

Below shows colspan:3 rowspan:1
50633


Now if I change that to colspan:3 rowspan:2 I would expect it to just double in height. But it gives me some weird layout behavior.

50634

gtsafas
10 Oct 2014, 12:14 PM
So actually I just tried disabling tdAttrs:{'style':{'padding': '5px'}} and the issue appears to no longer occur.

glopes
10 Oct 2014, 12:36 PM
Nice that its working, try adding your tdAttrs like this:



tdAttrs:{
style: {
padding: '5px'
}
}