/** * @class Ext.layout.TableLayout * @extends Ext.layout.ContainerLayout *This layout allows you to easily render content into an HTML table. The total number of columns can be * specified, and rowspan and colspan can be used to create complex layouts within the table. * This class is intended to be extended or created via the layout:'table' {@link Ext.Container#layout} config, * and should generally not need to be created directly via the new keyword.
*Note that when creating a layout via config, the layout-specific config properties must be passed in via * the {@link Ext.Container#layoutConfig} object which will then be applied internally to the layout. In the * case of TableLayout, the only valid layout config property is {@link #columns}. However, the items added to a * TableLayout can supply the following table-specific config properties:
*
The basic concept of building up a TableLayout is conceptually very similar to building up a standard * HTML table. You simply add each panel (or "cell") that you want to include along with any span attributes * specified as the special config properties of rowspan and colspan which work exactly like their HTML counterparts. * Rather than explicitly creating and nesting rows and columns as you would in HTML, you simply specify the * total column count in the layoutConfig and start adding panels in their natural order from left to right, * top to bottom. The layout will automatically figure out, based on the column count, rowspans and colspans, * how to position each panel within the table. Just like with HTML tables, your rowspans and colspans must add * up correctly in your overall layout or you'll end up with missing and/or extra cells! Example usage:
*
// This code will generate a layout table that is 3 columns by 2 rows
// with some spanning included. The basic layout will be:
// +--------+-----------------+
// | A | B |
// | |--------+--------|
// | | C | D |
// +--------+--------+--------+
var table = new Ext.Panel({
title: 'Table Layout',
layout:'table',
defaults: {
// applied to each contained panel
bodyStyle:'padding:20px'
},
layoutConfig: {
// The total column count must be specified here
columns: 3
},
items: [{
html: '<p>Cell A content</p>',
rowspan: 2
},{
html: '<p>Cell B content</p>',
colspan: 2
},{
html: '<p>Cell C content</p>',
cellCls: 'highlight'
},{
html: '<p>Cell D content</p>'
}]
});
*/
Ext.layout.TableLayout = Ext.extend(Ext.layout.ContainerLayout, {
/**
* @cfg {Number} columns
* The total number of columns to create in the table for this layout. If not specified, all Components added to
* this layout will be rendered into a single row using one column per Component.
*/
// private
monitorResize:false,
/**
* @cfg {Object} tableAttrs
* An object containing properties which are added to the {@link Ext.DomHelper DomHelper} specification * used to create the layout's <table> element. Example:
{
xtype: 'panel',
layout: 'table',
layoutConfig: {
tableAttrs: {
style: {
width: '100%'
}
},
columns: 3
}
}
*/
tableAttrs:null,
// private
setContainer : function(ct){
Ext.layout.TableLayout.superclass.setContainer.call(this, ct);
this.currentRow = 0;
this.currentColumn = 0;
this.cells = [];
},
// private
onLayout : function(ct, target){
var cs = ct.items.items, len = cs.length, c, i;
if(!this.table){
target.addClass('x-table-layout-ct');
this.table = target.createChild(
Ext.apply({tag:'table', cls:'x-table-layout', cellspacing: 0, cn: {tag: 'tbody'}}, this.tableAttrs), null, true);
}
this.renderAll(ct, target);
},
// private
getRow : function(index){
var row = this.table.tBodies[0].childNodes[index];
if(!row){
row = document.createElement('tr');
this.table.tBodies[0].appendChild(row);
}
return row;
},
// private
getNextCell : function(c){
var cell = this.getNextNonSpan(this.currentColumn, this.currentRow);
var curCol = this.currentColumn = cell[0], curRow = this.currentRow = cell[1];
for(var rowIndex = curRow; rowIndex < curRow + (c.rowspan || 1); rowIndex++){
if(!this.cells[rowIndex]){
this.cells[rowIndex] = [];
}
for(var colIndex = curCol; colIndex < curCol + (c.colspan || 1); colIndex++){
this.cells[rowIndex][colIndex] = true;
}
}
var td = document.createElement('td');
if(c.cellId){
td.id = c.cellId;
}
var cls = 'x-table-layout-cell';
if(c.cellCls){
cls += ' ' + c.cellCls;
}
td.className = cls;
if(c.colspan){
td.colSpan = c.colspan;
}
if(c.rowspan){
td.rowSpan = c.rowspan;
}
this.getRow(curRow).appendChild(td);
return td;
},
// private
getNextNonSpan: function(colIndex, rowIndex){
var cols = this.columns;
while((cols && colIndex >= cols) || (this.cells[rowIndex] && this.cells[rowIndex][colIndex])) {
if(cols && colIndex >= cols){
rowIndex++;
colIndex = 0;
}else{
colIndex++;
}
}
return [colIndex, rowIndex];
},
// private
renderItem : function(c, position, target){
if(c && !c.rendered){
c.render(this.getNextCell(c));
if(this.extraCls){
var t = c.getPositionEl ? c.getPositionEl() : c;
t.addClass(this.extraCls);
}
}
},
// private
isValidParent : function(c, target){
return true;
}
/**
* @property activeItem
* @hide
*/
});
Ext.Container.LAYOUTS['table'] = Ext.layout.TableLayout;