[CLOSED] how to add a css class to a cell of gridpanel?

[hdsoso]

I want to show a gridpanel , when a cell of gridpanel is empty or null , the cell's border color is red.
i try to use render for the column

   <ext:GridPanel runat="server" ID="gdHouseCenter"  Title="XXX"  ForceFit="True"  >
...
 <ext:Column runat="server" DataIndex="Unit" Text="所属单元"   CellCls=""    >
                                             <Renderer Fn="emptyShow"></Renderer>
                                             <Editor>
                                                 <ext:TextField runat="server"></ext:TextField>
                                             </Editor>
                                         </ext:Column>

  var emptyShow =  function(value,metadata,record,rowIndex,colIndex,store,view) { 
            if (value === null) {
                var dataIndex = App.gdHouseCenter.colModel.getDataIndex(colIndex);// here is error , how to correct it?
                 var color = record.data.colors[dataIndex];
                 color.colorCls = 'empcls';  //here set a class for the cell , is it right?
            }
            return value;
        }

[EnZo]

Hi hdsoso

You were on the right track. Update your emptyShow function to this

var emptyShow = function (cellValue, metadata, record, rowIndex, colIndex, store, view) {
    if (cellValue == "")
        metadata.tdCls = "x-grid-cell-custom";

    return cellValue;
}

You could remove the unwanted parameters if there is no need for them.

Also, the following css class

.x-grid-cell-custom {
    border-color: red red red red !important;
    border-width: 1px 1px 1px 1px !important;
}