PDA

View Full Version : Feautre suggestion: TableLayout align/valign



dyndan
22 Feb 2008, 6:18 AM
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
25 Feb 2008, 1:39 AM
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
15 Oct 2008, 6:57 AM
this works great, thanks a lot! maybe should be moved to examples and extras?

Condor
15 Oct 2008, 7:04 AM
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
15 Oct 2008, 7:22 AM
<span class="eeyore">Yes.... would be nice wouldn't it?...

http://extjs.com/forum/showthread.php?p=128561#post128561
</span>

xsq618
25 Dec 2010, 12:44 AM
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!