ExtJs4 Learning (10) Grid cell color change and row color change

ExtJs4 Learning (10) Grid cell color change and row color change
Http://www.bkjia.com/kf/201412/365462.html previous
Grid Cell color change

 

{Text: 'category', dataIndex: 'type', align: 'center', renderer: logging = 'x-grid-record-gray '; return "logout system ";} else if(value1_1_11_1_metadata.css = 'x-grid-record-green'; return "Logon System ";}}}

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

      CSS style name added to this row

    •