How to Apply Custom CSS to ExtJS Row Editor Grid

In this tutorial I’ll show you how to apply a custom css to an individual cell grid on an extjs editor grid. I wanted to be able to apply a different background color to certain cells in the grid where the user was required to fill in the data, just like you see on a form, where the background color for required fields are different from the generic fields.
After inumerous searches (yes, yet again extjs “support” to the open source community is rather lacking — if you call support answers like “look in the api”, “search the forum, if you find the answer it can’t be done” or “this has been asked before, look it up” — good support, yea right) I couldn’t find a simple answer, most answers I’ve found ranged from creating special functions and renderers to editing the framework itself. None of this was good enough for me, I just couldn’t believe that something so simple couldn’t be done with nothing less than just a few lines of code added to the grid.
Well, I was right, I was indeed able to do it without having to go through any special modifications to the framework, creating renderers or functions, and here’s how I did it:

First of all, here’s what an ordinary column model for an extjs editor grid looks like:

var cm =  [
 {header: "First Column", width: 20, sortable: true, dataIndex: 'field1', 
   editor: textField, align:'center'},
 {header: "First Column Date", dataIndex: "field1date", width: 35, 
   renderer: formatDate, editor: new Ext.form.DateField({format: 'm/d/y'}),
   align:'center'},
 {header: "Second Column", width: 20, sortable: true, dataIndex: 'field2',  
   editor: textField, align:'center'},
 {header: "Third Column", width: 20, sortable: true, dataIndex: 'field3', 
      editor: textField, align:'center'}
     ];

Now, here’s what the new column model looks like, if you wanted to make the first 2 fields required and apply a different background color so the the user could easily tell which fields are required:

var cm =  [
{header: "First Column", width: 20, sortable: true,  allowBlank: false,
  css:'background-color: #EEFFAA;border-style:solid;border-color:#0000ff;', 
  dataIndex: 'field1', editor: textField, align:'center'},
{header: "First Column Date", dataIndex: "field1date", width: 35,  
  allowBlank: false,  renderer: formatDate,
 css:'background-color: #EEFFAA;border-style:solid;border-color:#0000ff;', 
 editor: new Ext.form.DateField({format: 'm/d/y'}),align:'center'},
{header: "Second Column", width: 20, sortable: true, dataIndex: 'field2', 
  editor: textField, align:'center'},
{header: "Third Column", width: 20, sortable: true, dataIndex: 'field3', 
  editor: textField, align:'center'}
   ];

Quite easy wasn’t it, I just had to add the css parameters and there you have it, a grid with custom css for the required fields. All you need to do now is play around with the css parameters and see what looks best for you. Here’s the line I added with the css parameters:

css:'background-color: #EEFFAA;border-style:solid;border-color:#0000ff;'

And here’s what my example looks like (please click on the thumbnail for a larger view):

*** EDIT, ADDED CODE TO COLOR INDIVIDUAL GRID CELLS ***

You can also color an individual or all grid cell. It can be accomplished by using a cell renderer. You’ll first need to create the renderer then apply it to each cell you’d like to have it colored. Here is how I do it, first create the renderer and then after you have created it, just apply it to each cell you’d like to have colored in your columnmodel:

function epm_check(value, metaData, record, rowIndex, colIndex,store) {
		if (record.data.status == 'PASSED') 
                {
			return '<span style="color:green;">' + value + '</span>'; 
		}
		else if (record.data.status == 'FAILED') 
                {
			return '<span style="color:red;">' + value + '</span>'; 
		}
		else {
			return value;
		}
	}

Ext.grid.ColumnModel({																	  columns:[{header:"Functional Test", renderer:epm_check, width: 95,dataIndex: "testname"},
			{header: "Description", renderer:epm_check, width: 130, dataIndex: "description"}
                      ]
                           });

I hope this step by step tutorial has helped you some. Thank you for stopping by and please share with others, after all, code should be free.foscode.com | becasuse code should be free

16 thoughts on “How to Apply Custom CSS to ExtJS Row Editor Grid

  1. Pingback: Tweets that mention Apply Custom CSS To ExtJS Grid Cell | foscode -- Topsy.com

  2. excellent stuff! really valuable to see a snippet this short & neat.
    i have been looking at the forums too, and often got to pointers which required additional renderers and functions [and some people are actually making money tweaking ext-js - how neat] ;)

    thanks a lot!

  3. @amx: Thanks for stopping by, I’m pleased to know the stuff I posted was able to help you out. I feel the same way as you when it comes to extjs, their so called “community support” is rather lacking, to say the least. It is also quite interesting that we can accomplish a lot of the same with far less code, but they are not willing to help out (if they call responses like “read the api” help, then no thanks, but I don’t need that kind of help), which was one of the reasons why I came up with this site (plus I needed a way to remember all this stuff). Please feel free to share the code, after all, this is what open source community is all about.

  4. Hey great post, I agree with you about the Ext forum responses a lot of time useless. This is the kind of post that developers wants. Thanks for the info very useful!

  5. @Brunell25: Thanks for the kind words. I often find it very frustrating when I look for posts on their forum and all they do is either ridicule the question by assuming you haven’t already done all the search/ “homework” and found no answer; or just flat out assume people posting are lazy and don’t want to look for the answer. Personally, I got tired of it, reason why I created my own site, so whenever I found myself a solution (without their help) I could post it here, to help myself and others.
    I’ve had a couple of my posts removed from their site exactly because I brought up this same issue with them, so I finally had enough and I don’t post there any longer.
    Hopefully others are able to find my site and make use of some the information as much as you and others have. Thanks again for stopping by and I am very happy I was able to help you, please feel free to let others know about this site if you think it could help someone else.

  6. Thank’s a lot!
    I am new to extjs very impressed with the tool but disgusted with the support they offer.

  7. @Wal Welcome to the club Wal, I understand where you’re coming from. Thanks for stopping by, hopefully I was able to help a bit with some of my tutorials. Stay tuned for more to come.

  8. Thank you so much. I’ve been looking for this for days now, in disbelief that something so simple had to be so complicated. Is there an easy way that you know of to apply a CSS class to the cell? Also the column header?

  9. @Jau Thank you for the kind comments, I’m glad I was able to help you with this, I understand how frustrating it can be working with extjs, especially since the “experts” on their forum most of the time fail to help users, and like to make most think things are harder then what they should be. Yes there is also a way to color the grid cell individually, it can accomplished by using a cell renderer. You’ll first need to create the renderer then apply it to each cell you’d like to have it colored. I’ve appended the post above to include the steps to have this accomplished.

  10. Exactly what I was looking for. Worked great. Thanks a lot to the writer.

    ~Cheers

  11. @Jubayer Thanks for the compliments, glad I could help you out. Thanks for stopping by my site and come back soon :-)

  12. Need to change CSS for rowediting “update” and “Cancel” button with defferent color

Leave a Reply

Your email address will not be published. Required fields are marked *

*


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>