Results 1 to 4 of 4

Thread: Access grid's table cell's style/class

  1. #1

    Default Access grid's table cell's style/class

    Is it possible to manipulate the style and/or class of a grid's table cell (td) in a non-hackery way? I need to set vertical-align, as an img tag in one column makes the text in the other columns look off.

  2. #2
    Sencha - Services Team
    Join Date
    Mar 2007
    Location
    Foristell, MO
    Posts
    1,121

    Default

    You can do it with a custom renderer for the column. So, when you define your column model for a column, include a function reference to your own custom renderer function.

    Then, when your function is called, there will be 6 parameters passed to it. The second is the cell object and it has 4 propeties at your disposal: 'attr', 'cellId', 'css', and 'id'.

    What ends up happening is that these values are used to build the td element for the cell in this format:

    Code:
    <td class="x-grid-col x=grid-td-{id} {cellId} {css}" tabIndex="0">
       <div class="x-grid-col-{id} x-grid-cell-inner">
          <div class="x-grid-cell-text" unselectable="on" {attr}>
             {value}
          </div>
       </div>
    </td>
    The ones you would be interested in are 'attr' and 'css'. Whatever you enter for 'css' gets added as a class in the td element. And whatever you enter for 'attr' gets added 'as is' in the div surrounding the value that you return.

    So, for example, let's say you want to add the class 'my-class' to the td and a custom style of 'background: red;' to the div surrounding your value. You would do the following in your custom renderer function.

    Code:
    function myCustomRenderer(value, cell, row, rowIndex, colIndex, ds) {
      
       cell.attr = 'style="background:red;"';
       cell.css = 'my-class';
       return 'my new value';
    
    }
    The resulting td for row 0, column 0, will now look like this:

    Code:
    <td class="x-grid-col x=grid-td-0 x-grid-cell-0-0 my-class" tabIndex="0">
       <div class="x-grid-col-0 x-grid-cell-inner">
          <div class="x-grid-cell-text" unselectable="on" style='background:red;'>
             my new value
          </div>
       </div>
    </td>
    Hope this helps.

  3. #3

    Default

    Doh! I've been using renderers for quite a while and never pondered what the second argument is. Thanks for enlightening me

  4. #4

    Default

    Quote Originally Posted by jratcliff View Post
    You can do it with a custom renderer for the column.
    jratcliff, do you know if it's possible to set a class of a cell outside of the renderer? I'm using jsakalos's [URL=

Similar Threads

  1. Dynamically Set Class/Style of a Grid Row
    By andreychek in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 10 Oct 2018, 2:55 PM
  2. Button in Grid's cell
    By boydapa3 in forum Ext 2.x: Help & Discussion
    Replies: 33
    Last Post: 19 Jun 2012, 5:19 AM
  3. Clear grid's sort arrow icon
    By SLerman in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 5 Oct 2011, 5:49 AM
  4. YAHOO.ext.ContentPanel own style class ?
    By antonfunk in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 8 Mar 2007, 10:43 AM
  5. Cloning a Grid's column/dataModel
    By tradiate in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 2 Mar 2007, 8:11 AM

Posting Permissions

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