CODEWITHSUNDEEP
internet-explorerextjs
Tim Mitchell
Tim Mitchell

Reputation: 653

In Ext.JS, how do you create a table that automatically re-sizes the cells to fit the overall size?

I have an Ext.JS project in which I have two separate tables with a different number of columns - one table has 10 columns, and the other has 11 columns. Both tables need to be the exact same width - and the cells need to automatically size themselves to fit.

I can get them pretty close by adjusting the size of the individual cells like so...

var table1 = new Ext.Panel({
    renderTo: Ext.getBody(),
    layout:'table',
    width: '1000',
    layoutConfig: {columns:10},
    // applied to child components
    defaults: {frame:false, width:100, height:25},

***etc***


var table2 = new Ext.Panel({
    baseCls:'x-plain',
    renderTo: Ext.getBody(),
    layout:'table',
    layoutConfig: {columns:11},
    width: '1000',
    // applied to child components
    defaults: {frame:false, width:91, height:25},

***etc***

But it's not exact. And if I remove the default widths from the individual cells, the cells just shrink to take up as little room as possible.

Any suggestions (It's on an IE platform).

Thanks in advance, Tim

PS: the version is 3.3.0

Upvotes: 1

Views: 81

Answers (1)

Michael Watson
Michael Watson

Reputation: 318

If I understand what you asking correctly, put

flex: 1

into all of your columns. The number after flex signifies the ratio of the total space you want that column to share. So if you had two columns and you wanted the first to take up 2/3rds of the space and the second to take up 1/3rd, you could use flex: 2 and flex: 1 respectively.

In your case, just use flex: 1 for all 10/11 columns and it should space evenly.

ex:

{
    header: 'Column 1',
    dataIndex: 'column1_data',
    flex: 1
}

edit: make sure if you try this that you take out the default width stuff

Upvotes: 1

Related Questions