ExtJS: Adding a grid panel to a table layout messes up the table column widths

Question

Using ExtJS 4.2, if I create a table layout panel with 2 columns and the inner panels have minimal content, then the column widths are all equal and the proportions are respected.

layout : {
        type : 'table',
        columns : 2,
        tableAttrs : {
            style : {
                width : '100%',
                height : '100%'
            }
        }
    },

Here's what that looks like:

http://jsfiddle.net/blackfrancis75/yscjjbLf/1/

but if I then go adding content to the panels, say an Ext.grid.Panel, then the proportions of the columns get all messed up; they are no longer 50/50; it looks like this:

http://jsfiddle.net/blackfrancis75/kh8zr80h/1/

I've tried approaches like inner-panels, and autoScroll but I don't seem to be getting anywhere. What's the best way to 'force' the table layout to proportionally set the column widths regardless of their content?

Answer 1

Try setting :-

 tdAttrs: {
      style: {
           width: '50%'
      }
 }

jsFiddle