Results 1 to 6 of 6

Thread: Feautre suggestion: TableLayout align/valign

  1. #1
    Sencha Premium Member
    Join Date
    Oct 2007
    Location
    Germany
    Posts
    70
    Vote Rating
    0
      0  

    Default 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
      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
      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
    118
      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,608
    Vote Rating
    59
      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
      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!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •