ExtJs4 Learning (10) Grid cell color changing and row color changing methods, extjs4grid

ExtJs4 Learning (10) Grid cell color changing and row color changing methods, extjs4grid
Grid Cell color change

{Text: 'category', dataIndex: 'type', align: 'center', renderer: function(value,metadata=lele.log(metadata=if(value=0###metadata.css = 'x-grid-record-gray '; return "<span style = 'color: # FFF; font-weight: bold; '> log out of the system </span> ";} else if(value1_1_11_1_metadata.css = 'x-grid-record-green'; return "<span style = 'color: # FFF; font-weight: bold; '> log on to the system </span> ";}}}

Css style

.x-grid-record-gray{background-color:gray !important;}.x-grid-record-green{background-color:green !important;}

I have seen many cases on the Internet, but I did not succeed. I finally found that the style I wrote was eventually overwritten by extjs and does not work, if you want to increase the style write priority, you must add it! Important Method Introduction

Renderer:

The renderer function is an interceptor mode used to change the values and styles rendered to cells. For example:

{    renderer: function(value){        if (value === 1) {            return '1 person';        }        return value + ' people';    }}

You can use the ext. util. format method to name another string.

{    renderer: 'uppercase'}

Default Value:false

Available since: 3.4.0

• Value: Object

  Data Value of the current cell

• MetaData: Object

  Current cell object; can be used or modified

• Record: Ext. data. Model

  Current row corresponding to this record

• RowIndex: Number

  Index of the current row

• ColIndex: Number

  Index of the current column

• Store: Ext. data. Store

  The store bound to the grid.

• View: Ext. view. View

  Current View

• Return: String

  The HTML string to be rendered.

Line color change

ViewConfig: {stripeRows: false, // whether to color the getRowClass: function (record, rowIndex, rowParams, store) {var type = record. get ('type'); switch (type) {case '0': return 'x-grid-row-blue '; case '1 ': return 'x-grid-row-red ';}}}

Css style

.x-grid-row-blue .x-grid-cell{background-color:blue;}.x-grid-row-red .x-grid-cell{background-color:red;}

Method Introduction

GetRowClass(Ext. data. Model record, Number index, Object rowParams, Ext. data. Store store): String

Rewrite this function to apply the custom CSS style during rendering. The function returns the CSS style name (or an empty string '') added to the div of the row ''). To apply multiple style names, separate them by spaces in the returned string (for example, 'My-class another-class ').

Example usage:

viewConfig: {    getRowClass: function(record, rowIndex, rowParams, store){        return record.get("valid") ? "row-valid" : "row-error";    }}

Parameters

• Record: Ext. data. Model

  The current row corresponding to the record.

• Index: Number

  Row Index

• RowParams: Object

  DEPRECATED. (not recommended) is used for the rowbody function of the row body using the getAdditionalData method.

• Store: Ext. data. Store

  The store bound to the grid.

Returns

• String

  The CSS style name added to the row.