Feautre suggestion: TableLayout align/valign

[dyndan]

Hi there,

currently there's no possibility to align contents in table cells created via TableLayout cause the "bodyStyle" always is applied to the contained item instead of the cell itself.

I suggest to introduce

align
valign
tdStyle

as config options for table cell items. These would be applied directly to the table cell.

Here comes my code to apply these options:

Ext.layout.TableLayout.prototype.renderItem = function(c, position, target){
    if(c && !c.rendered){
        var td=this.getNextCell(c);
        if (c.align) td.setAttribute("align",c.align);
        if (c.valign) td.setAttribute("valign",c.valign);
        if (c.tdStyle) td.setAttribute("style",c.tdStyle);
        c.render(td);
    }
};

I suggest to build in this feature directly into Ext.layout.TableLayout.

@ Jack / development team: I love your incredibly clear code!

[dyndan]

And this piece of code works in Internet Explorer, too:

Ext.layout.TableLayout.prototype.renderItem = function(c, position, target){
    if(c && !c.rendered){
        var td=this.getNextCell(c);
        var el=Ext.get(td);
        if (c.align) el.applyStyles("text-align:"+c.align);
        if (c.valign) el.applyStyles("vertical-align:"+c.valign);
        if (c.tdStyle) el.applyStyles(c.tdStyle);
        c.render(td);
    }
};

[Lobos]

this works great, thanks a lot! maybe should be moved to examples and extras?

[Condor]

Ext.layout.TableLayout already has a cellCls config option for items.

However, a cellStyle config option would be a nice addition, e.g.

Ext.override(Ext.layout.TableLayout, {
	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.cellStyle){
			Ext.DomHelper.applyStyles(td, c.cellStyle);
		}
		if(c.colspan){
			td.colSpan = c.colspan;
		}
		if(c.rowspan){
			td.rowSpan = c.rowspan;
		}
		this.getRow(curRow).appendChild(td);
		return td;
	}
});

[Animal]

<span class="eeyore">Yes.... would be nice wouldn't it?...

http://extjs.com/forum/showthread.ph...561#post128561
</span>

[xsq618]

what's the version of your Extjs?
I apply it in Extjs 2.2.1,but has no effect.
Thank you!

Hi there,

currently there's no possibility to align contents in table cells created via TableLayout cause the "bodyStyle" always is applied to the contained item instead of the cell itself.

I suggest to introduce

align
valign
tdStyle

as config options for table cell items. These would be applied directly to the table cell.

Here comes my code to apply these options:

Ext.layout.TableLayout.prototype.renderItem = function(c, position, target){
    if(c && !c.rendered){
        var td=this.getNextCell(c);
        if (c.align) td.setAttribute("align",c.align);
        if (c.valign) td.setAttribute("valign",c.valign);
        if (c.tdStyle) td.setAttribute("style",c.tdStyle);
        c.render(td);
    }
};

I suggest to build in this feature directly into Ext.layout.TableLayout.

@ Jack / development team: I love your incredibly clear code!