ExtJS 4.2 Data Control grid those things

Recently in study Extjs4.2, accumulate articles, see Well, again this stay year:

//tabular data At least has columns, data, conversion of raw data 3 itemsExt.onready (function () {//Defining Columns    varcolumns =[{header:'numbering', Dataindex:'ID', Width: -},//Sortable:true to set whether to sort the column{header:'name', Dataindex:'name', Width: the}, {header:'Description', Dataindex:'DESCN', Width: the}, {header:'Status', Dataindex:'Status', Width: the, Renderer:function (value) {if(value=='available'){                  return "<span style= ' color:green;font-weight:bold ';> available </span>"; } Else {                  return "<span style= ' color:red;font-weight:bold ';> disable </span>";      }          }}        ]; //Defining Data    vardata =[          ['1','Xiao Wang','Description','available'],          ['2','John Doe','Description','Disabled'],          ['3','Zhang San','Description of the Geneva','available'],          ['4','Beam Yangyang','Thinker Diary Network','available'],          ['5','Goofy','Description','Disabled']      ]; //Convert raw data to ext data that can be displayed    varstore =NewExt.data.ArrayStore ({data:data, fields:[{name:'ID'},//mapping:0 This allows you to specify the position of the column display, 0 for the 1th column, and optionally to set the position of the column display{Name:'name'}, {name:'DESCN'}, {name:'Status'}          ]      }); //Loading Datastore.load (); //The Table control uses Rowmodel by default, you can select multiple rows by holding down the shift or CTRL key, and if you want to select only one row, you can use Singleselect:true//I found that when I was writing, without the case, I tried to find that the default is not multi-choice//var sm = new Ext.grid.RowModel ({singleselect:true}); //Create a table    varGrid =NewExt.grid.GridPanel ({renderto:'Grid',//Render PositionWidth the, Height: Max,          //Selmodel:sm,Store:store,//the converted dataColumns:columns,//Show ColumnsStriperows:true,//Zebra Effect//Enablecolumnmove:false,//prohibit drag and drop columns//Enablecolumnresize:false,//prohibit changing column widthsLoadmask:true,//show matte and hint function, load loading ...//forcefit:true//fill the table automaticallyviewconfig:{Columnstext:'the columns displayed', Scrolloffset: -,//the right side of the table is the width reserved for the scroll bar, which defaults toSortasctext:'Positive Order', Sortdesctext:'Reverse', Forcefit:true //The table automatically stretches the length of each column, filling the entire table with content        }      });  }); 

1. renderer method for customizing grids

A.function rendermotif

/ Change Column Color custom Renderner method  function rendermotif (data, cell, record, RowIndex, ColumnIndex, store) {        var value = record. Get ('name');      Cell.style="background-color:"+value;       return data;  }  

column in the reference:

{header:' name ', dataindex:'name', Width:renderer, : Rendermotif},  

B.function RENDERDESCN

{header:' description ', dataindex:'descn', Width:112 , RENDERER:RENDERDESCN}  

//Customizing the Renderner methodfunction Renderdescn (value, Cellmeta, record, RowIndex, ColumnIndex, store) {varStr="<input type= ' button ' value= ' query details ' onclick= ' alert (""+          "The value of this cell is:"+value +"N"+"The configuration of this cell is: {cellid:"+cellmeta.cellid+", ID:"+cellmeta.id+", CSS:"+cellmeta.css+"}n"+"The record for the corresponding row of this cell is:"+record +", a row of data is in the inside N"+"This is the first"+rowindex+"Row N"+"This is the first"+columnindex +"column N"+"This table corresponds to the Ext.data.Store here:"+ Store +", use whatever you want. "+"")'/> ";     returnstr; }  

Description

We can get multiple parameters in the render function, as follows:

1. Value: The values that will be displayed to the cell;
2. Cellmeta: The related property of the cell, mainly has the ID and the CSS;
3. Record: The data object of this row, if need to get the value of other columns, can be obtained by record.data["id", this property is very important, we often use;
4. RowIndex: line number, where the line number refers to the order of all records in the current page;
5. ColumnIndex: The column number of the forefront;
6. Store: The DS that is passed when the table is constructed. All the data in the table can be obtained from the store.

3. Automatic display of line numbers and check boxes is an extension of renderer. First, the line number is displayed automatically, the RowNumber object is added to the column model columns, the following code

New // automatically display line numbers

ExtJS 4.2 Data Control grid those things