Sunday, May 20, 2012

Styling the text of a column in the Grid in Extjs(Extended JavaScript Library)

If you want to style a particular column, say for example you want the text in a column to appear bold or you want it to color the text,the renderer function of the grid column can be used.
In the renderer function you can apply style to the value(text) of the column and return it.
Here is an example of how to do it :-

 {header: "Name", width:75, dataIndex: 'Name',align:'right',hideable:false, sortable: true,
  renderer: showBold}   
 
  function showBold(val, meta, record, rowIndex, colIndex, store){
       return '<span class= "bold-display"' + val + '</span>';      
  }
 
  Ofcourse you have the style defined in the styleClass
  <style>
    .bold-display{
        font-weight:bold;
    }
  </style>
 
  You can define certain conditions as well in the renderer function based on the requirement.

1 comment:

  1. Thank you for very nice and simple example. However, you may have mistakenly omitted a closing > in span.

    class= "bold-display"' + val
    -->
    class= "bold-display">' + val


    ReplyDelete