Extjs:gridpanel renderer:function () and Itemdblclick:function () method parameters

To use Gridpanel, you first define the store, and you must have model when you create the store, so we'll start by defining the model:

Ext.define ("Gpsdata", {    Extend: "Ext.data.Model", Fields    : [        {name: ' Gpstime ', type: ' String '},        {name : ' Gpstemp ', type: ' String '}    ]});

Then create the store:

var surfacestore = new Ext.data.Store ({      model: ' Gpsdata ',      pagesize:22,      proxy: {          type: ' Ajax ',          URL : ' Gpsdata/grid ',          reader: {              type: ' json ',              root: ' Dataofall ',            totalproperty: ' Total '        }      , Li Steners: {beforeload:function (store, operation, opts) {Ext.MessageBox.show ({title: ' Please wait ', msg: ' Data read ... '), width:240,p Rogress:true,closable:false}); Ext.MessageBox.wait (' Data read ... ', ', {duration:900000,interval:500,increment:10,scope:this,fn:function () {}});},lo  Ad:function (store, records, successful, opts) {if (successful) {Ext.MessageBox.hide ();} else {Ext.MessageBox.hide ();}}} });

Create Gridpanel

var Surfacegrid = ext.create (' Ext.grid.Panel ', {id: ' surface ', title: ' Data List display ', Store:surfacestore, Disableselection:true, Loadmask:true, Viewconfig: {trackover:false, stripe Rows:false}, columns:[new Ext.grid.RowNumberer (), {text: "Time", data Index: ' Gpstime ', sortable:true, flex:3},{text: "Water temperature" + ' (℃) ', Render Er:function (value, Cellmeta, record, RowIndex, ColumnIndex, store) {//value= "<span style= ' color: Red;font-weight:bold; '            > Red Man </span> ";            return value;  }, Dataindex: ' Gpstemp ', flex:2}], listeners: {itemdblclick:function (view,             Record, item, index, E, eopts) {var gpsname=record.get (' Gpsname ');        alert (gpsname); }}, Bbar:Ext.create (' Ext.pagingtoolbar ', {store:sUrfacestore, Displayinfo:true, displaymsg: ' Show monitoring data {0}-{1} of {2} ', emptymsg: ' No data ' })    });

Renderer:function (value, Cellmeta, record, RowIndex, ColumnIndex, store) {}

Analytical:
Value: is going to be like the values in the cell, that is, the value of Dataindex
Cellmeta: The related property of the cell, primarily the ID and CSS
Record: The data object for this row. To get the values of other columns by record.data[' ID ']
RowIndex: Line number
ColumnIndex: line number at the top of the column
Store: The DS that is passed when the table is constructed, that is, all the data in the table can be obtained through the store.

Listeners: {itemdblclick:function (view, record, item, index, E, eopts) {}}

Analytical:
View:Ext.view.View
Record:Ext.data.ModelThe record that belongs to the item
Item:htmlelementThe item ' s element
Index:numberThe item ' s index
E:ext.eventobjectThe Raw event object
Eopts:objectThe options Object passed to Ext.util.Observable.addListener.

extjs gridpanel column
ExtJS gridpanel columns have several types, such as: text columns, numeric columns, date columns, selection box columns, action columns, and so on. We can specify different column types through xtype.
The following are common configuration items for a column:
xtype: Column type
Text: column header display text
Dataindex: Bound field name
Width: Width
Flex: Auto Fit width
Sortable: sortable , the default is
Hideable: can be hidden, default is
Locked: Locks The column, locks the column at the beginning of the grid, which is useful when the grid appears with a scroll bar. The default is no
Lockable: Can be locked, default is no
Format: format string, commonly used for date, number formatting. Date: ' y-m-d '; DateTime: ' y-m-d h:i:s '; Number: ' 0,000.00 ' (with thousands separators, reserved two decimal places), ' 0.00 ' (two decimal places reserved), ' 0 ' (not reserved decimals)
Renderer: Custom Drawing method, Can be a defined method name in Ext.util.Format, or a custom no function, which receives the following parameters: value, metadata, record, RowIndex, Colindex, store, view, And you need a return value to display.
Editor: Editor, which works when editing plugins are used.

ExtJS Gridpanel Row Selection model (Selectionmodel)
The two configuration items that control the ExtJS Gridpanel row selection model are SelType and Selmodel. By default, SelType is Rowmodel, corresponding to the Ext.selection.Model. This selection model does not add a check box to the grid, it is selected by clicking the row, and the default is multi-select "MULTI".


If we want to use checkboxes to select rows, we need to use the following configuration:
SelType: "Checkboxmodel",
We can then configure the SelType with Selmodel:
Selmodel: {
injectcheckbox:0,
Mode: ' Simple ',//' single '/' Simple '/' MULTI '
Checkonly:true//Can only be selected by checkbox
},

ExtJS Gridpanel Line Selection
In addition to the interface operation to select rows, we can also choose the line by code:
Select a row and keep the other row's selection state
Grid.getselectionmodel (). Select (Records, TRUE);
Select All
Grid.getselectionmodel (). SelectAll ();
Select based on row index
Grid.getselectionmodel (). Selectrange (StartRow, Endrow, True)
ExtJS Gridpanel Get selected row
To get the selected row, you still need to do it through Selectionmodel:
var records = Grid.getselectionmodel (). GetSelection ();

Extjs:gridpanel renderer:function () and Itemdblclick:function () method parameters