PDA

View Full Version : Layout table cell



extjser12
7 Mar 2012, 10:27 AM
Hello together

How do I've to change my code, so that the "Cell A" is aligned on top and has always the same height as "Cell B and Cell C" together. This means that "Cell A" has always the same height as the whole table.


Ext.onReady(function() {
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'north',
autoHeight: true,
border: false,
margins: '0 0 5 0'
}, {
region: 'west',
collapsible: true,
title: 'Navigation',
width: 180,
split: true,
layout: 'fit'
}, {
region: 'center',
border: false,
layout: {
type: 'table',
// The total column count must be specified here
columns: 2
},
items: [{
html: 'Cell A content',
rowspan: 2
},{
html: 'Cell B content'
},{
html: 'Cell C content',
cellCls: 'highlight'
}]
}]
});
})

I don't know how I can achieve this in Ext JS. Can somebody help me?

Thanks a lot!

Regards
extjser12

mitchellsimoens
7 Mar 2012, 11:01 AM
The <td> does have rowspan but the panel in that <td> is still going to have the height defined by it's children/html

extjser12
7 Mar 2012, 12:01 PM
Thanks for you answer.

Ok. How can I change this, so that the panel has the size of his <td> with rowspan?

senchatized
17 Feb 2014, 5:38 AM
Any solution to the last question? I also have this problem.
I see that Table has tdAttrs config, how do I set it properly to have vertical-align: 'top' style.

tdAttrs: { valign: 'top' }

Is there a way of doing this without using cellCls? (I want to directly specify it on the code as in tdAttrs not in css for some reason)