ExtJS4.1.1 Set Table background color Modify text color insert a picture in a table

As the ExtJS version is constantly updated, the various rendering methods have changed, most of the current books are still in the 3 version, for the ExtJS4.1.1 version of the table rendering, the way to set the table row background color is as follows:

First, define the style of the row:

1.yellow-row. X-grid-cell{2 background-color: #FFFF00!important;3}4. White-row. x-grid-cell{5 Background-col Or: #FFFFFF!important;6}7. Blue-row. X-grid-cell{8 background-color: #00AAFF!important;9}

The style definition should precede the introduction of the JS file.
Then, reference the style in the JS file. The 12th to 28th line in the following file is a reference to the style:

1     var gridpanel = new ext.grid.panel ({ 2          title :  ' contacts ', 3          store : ext.data.storemanager.lookup (' Simpsonsstore '),12          viewConfig : {13              getrowclass: function (Record, rowindex, rowparams, store) {14                  var cls; 15                 switch (ROWINDEX&NBSP;%&NBSP;2) {16                      case 1:17                         cls =  ' White-row ';     18                          break;19                      case 0:20                           cls =   ' Yellow-row ';21                           break;22                  }23                  if (Record.get (' NAMe ')  ==  ' Zhang Mao ') {24                      cls =   ' Blue-row ';25                  }26                  return cls;27              }28          },29         columns : [{30                       text :  ' name ',31                      dataIndex :  ' name ',32                      sortable : true,  //cannot be sorted 33                       hideable: false   //cannot be hidden 34                      //flex: 1    //Stretch 35                 as far as possible  }, {36                      text :  ' phone ',37                      dataIndex :  ' PhoneNumber ' 38                      //renderer : rendercol39                      //flex : 140                      //hidden:  true41                  },{42                      text:  ' Sex ',43                      dataIndex:  ' Sex ',44                       Renderer: function (value) {45                   &nbsP;      if (value ==  ' man ') {46                               return  "<span style= ' color:blue; ' > Male </span> ';47                          }else{48                               return  "<span style= ' color:red; ' > Female </span> ';49                          }50                      }51                  },{52                       text:  ' Date of birth ',53                      dataIndex:  ' Birthday ',54                      type:  ' Date ',55                      renderer: ext.util.format.daterenderer (' Y year m D Day ') 56                  }],57          height : 200,58         width : 400,59          renderto : document.getelementbyid (' grid '),60          listeners: {61              click: {62                  element:  ' el ', //bind to the  underlying el property on the panel63                  fn: function () {64                      var  Selections = gridpanel.getselectionmodel (). GetSelection ();65                       ext.messagebox.alert (' AAAA ', Selections[0].get (' name ')); 66                  }67              }68          }69     });

In the above file, line 44th to 50th is to add a picture to the table and modify the text color.

The above setting for the background color is only for the row, the following is the function of the background rendering of the column, called in the above JS code in 38 lines.

1 function Rendercol (value, MetaData, record, RowIndex, ColumnIndex, store, view) {2 Metadata.style = "Backgro Und-color: #F5C0C0 "; 3 return Value;4}

ExtJS4.1.1 Set Table background color Modify text color insert a picture in a table