1. #1
    Sencha Premium Member
    Join Date
    Oct 2007
    Location
    Germany
    Posts
    70
    Vote Rating
    0
    dyndan is on a distinguished road

      0  

    Default Feautre suggestion: TableLayout align/valign

    Feautre suggestion: TableLayout align/valign


    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:

    Code:
    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!

  2. #2
    Sencha Premium Member
    Join Date
    Oct 2007
    Location
    Germany
    Posts
    70
    Vote Rating
    0
    dyndan is on a distinguished road

      0  

    Default


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

    Code:
    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);
        }
    };

  3. #3
    Sencha User Lobos's Avatar
    Join Date
    Oct 2007
    Location
    Sao Paulo, Brazil
    Posts
    461
    Vote Rating
    -1
    Lobos is an unknown quantity at this point

      0  

    Default


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

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

    However, a cellStyle config option would be a nice addition, e.g.
    Code:
    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;
    	}
    });

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


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

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

  6. #6
    Ext User
    Join Date
    Jul 2008
    Posts
    1
    Vote Rating
    0
    xsq618 is on a distinguished road

      0  

    Default


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

    Quote Originally Posted by dyndan View Post
    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:

    Code:
    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!