CODEWITHSUNDEEP
extjsextjs4.2
user800014
user800014

Reputation:

Table layout: broken in Firefox & didn't use 100% width of panel?

I'm playing with the Table Layout of ExtJS 4.2.1. You can see the result in this fiddle.

Basically what I expected is to the table use 100% width of the panel to apply correctly the colspan.

Also if you look with Firefox it is broken so maybe I'm using this layout in the wrong way?

Example:

Ext.create('Ext.panel.Panel', {
    title: 'Table Layout',
    width: 300,
    height: 150,
    layout: {
        type: 'table',
        // The total column count must be specified here
        columns: 3
    },
    defaults: {
        // applied to each contained panel
        bodyStyle: 'padding:20px'
    },
    items: [{
        html: 'Cell B content',
        colspan: 2,
        xtype: 'panel'
    },{
        html: 'Cell C content',
        xtype: 'panel'
    },{
        html: 'Cell D content',
        xtype: 'panel'
    }],
    renderTo: Ext.getBody()
});

Upvotes: 3

Views: 1335

Answers (1)

Towler
Towler

Reputation: 1562

The ExtJS table layout is supposed to work just like an HTML table. If you create an HTML table with the config you supplied above, you get similar results. (see http://jsfiddle.net/h6J3J/1/)

<table border="1">
  <tr>
    <td colspan="2">Cell B content</td>
    <td>Cell C content</td>
  </tr>
  <tr>
    <td>Cell D content</td>
  </tr>
</table>

You see the results that you do because the first column in the first row (with colspan 2) does not have two columns in the row below it to span over.

To get the table to be 100% the width of the panel, you can use the tableAttrs property:

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.layout.container.Table-cfg-tableAttrs

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

Upvotes: 4

Related Questions