EXT js-renderer function

The renderer function is an interceptor pattern that changes the value and style of rendering to a cell.

Http://docs-devel.sencha.com/extjs/4.2.2/#!/api/Ext.grid.column.Column-cfg-renderer EXT JS 4.2 official documentation

Defaults to:false

• Value:object

  the value of the data value for the current cell

• Metadata:object

  A collection of metadata about the current cell; Can is used or modified by the renderer. Recognized properties Are:tdcls, tdattr, and style.

  The metadata collection of the current cell, through which the renderer can directly use or modify some of its property values, the commonly used attributes are: Tdcls, tdattr, style.

• Record:Ext.data.Model

  all data records (record) of the current row of the record for the

• Rowindex:number

  The index of the current row number

• Colindex:number

  The index of the current column number

• Store:Ext.data.Store

  the data store's current grid dataset (store)

• View:Ext.view.View

  The current view of the existing grid

• Return:string

  The HTML string to is rendered. returns an HTML text string that is rendered

Actual case: Gridpanel, the Columns to render, the effect is as follows:

JSP page CSS (Ext page is through the current JSP page, the introduction of a JS file, ext code written in this JS, the construction of EXT interface)

<style type= "Text/css" >/** Enterprise Credit Evaluation results published review rating name: Yellow card blue cards and other */.x-grid-cell.greencard {background-color: #B6FFA8;}. X-grid-cell.bluecard {background-color: #D7E7FC;}. X-grid-cell.yellowcard {background-color: #FEFAD7;}. X-grid-cell.redcard {background-color: #F4B6B6;}. X-grid-cell.blackcard {background-color: #000000; color:white;} </style>

The renderer function of Ext.grid.Panel

{text: ' processing result ', Dataindex: ' FHDJMC ',//review level name Flex:1,renderer:function (value, MetaData, record) {if (value = = NULL | | val UE = = ') {return ' no card ';} Tdcls:x-grid-cell style//For example: X-grid-cell.greencard {background-color: #B6FFA8;} Metadata.tdcls = value = = ' Green card '? ' Greencard ': (value = = ' Blue Card '? ' BlueCard ': (value = = ' yellow card '?) ' Yellowcard ': (Value = = ' red card ')? ' REDcard ': ' Blackcard '); return value;}}

　　

EXT js-renderer function