ExtJS: renderer of GridPanel: function () and itemdblclick: function () method parameters, extjsgridpanel

ExtJS: renderer of GridPanel: function () and itemdblclick: function () method parameters, extjsgridpanel

To use GridPanel, you must first define the Store and create a Model when creating the Store. Therefore, we must first define the Model:

Ext.define("Gpsdata", {    extend: "Ext.data.Model",    fields: [        { name: 'gpstime', type: 'string' },        { name: 'gpstemp', type: 'string' }    ]});

Then create a Store:

Var surfacestore = new Ext. data. store ({model: 'gpsdata', pageSize: 22, proxy: {type: 'ajax ', url: 'gpsdata/grid', reader: {type: 'json ', root: 'dataofall', totalProperty: 'Total'}, listeners: {beforeload: function (store, operation, opts) {Ext. messageBox. show ({title: 'Please wait, msg: 'Data Reading ...... ', Width: 240, progress: true, closable: false}); Ext. MessageBox. wait ('data reading ...... ', '', {Duration: 900000, interval: 500, increment: 10, scope: this, fn: function () {}}) ;}, load: 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, stripeRows: false}, columns: [new Ext. grid. rowNumberer (), {text: "time", dataIndex: 'gpstime', sortable: true, flex: 3 },{ text: "water temperature" + '(℃ )', renderer: function (value, cellmeta, record, rowIndex, columnIndex, store) {// value = "<span style = 'color: red; font-weight: bold; '> male </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:' display monitoring data {0}-{1} of {2} ', emptyMsg: "No data "})});

Renderer: function (value, cellmeta, record, rowIndex, columnIndex, store ){}

Resolution:
Value: indicates the value in a cell, that is, the value of dataIndex.
Cellmeta: Cell-related attributes, mainly id and CSS
Record: The data object of this row. Use record. data ['id'] to obtain values of other columns
RowIndex: row number
ColumnIndex: row number of the current column
Store: ds passed during table construction. That is to say, all data in the table can be obtained through store.

Listeners: {itemdblclick: function (view, record, item, index, e, eOpts ){}}

Resolution:
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.

Columns of Extjs GridPanel
Extjs GridPanel columns are of various types, such as text columns, numeric columns, date columns, select box columns, and Operation columns. We can use xtype to specify different column types.
The following are common configuration items of the column:
Xtype: column type
Text: text displayed in the column header
DataIndex: name of the bound field
Width: width
Flex: auto-adaptive width
Sortable: indicates whether the table can be sorted. The default value is
Hideable: Indicates whether to hide data. The default value is yes.
Locked: Lock the column to lock the column at the beginning of the grid. This attribute is useful when the grid has a scroll bar. No by default
Lockable: whether it can be locked. The default value is no.
Format: format a string. It is often used to format dates and numbers. Date: 'Y-m-d'; Date and Time: 'Y-m-d H: I: s'; number: '123' (with thousands separator, retain two decimal places), '0. 00' (retain two decimal places), '0' (do not retain decimal places)
Renderer: the custom drawing method, which can be Ext. util. the method name defined in Format can also be a custom function. This method receives the following parameters: value, metadata, record, rowIndex, colIndex, store, and view, A return value is required for display.
Editor: editor. It takes effect only when the editing plug-in is used.

Extjs GridPanel row Selection Model (SelectionModel)
Two configuration items for controlling the Extjs GridPanel row selection model are selType and selModel. By default, selType is rowmodel, which corresponds to Ext. selection. Model. This selection model does not add a check box to the grid. It is selected by clicking a row. By default, "MULTI" is selected for multiple models ".


If we want to use the check box to select rows, we need to use the following Configuration:
SelType: "checkboxmodel ",
Then, we can use selModel to configure selType:
SelModel :{
InjectCheckbox: 0,
Mode: "SIMPLE", // "SINGLE"/"SIMPLE"/"MULTI"
CheckOnly: true // select only through checkbox
},

Extjs GridPanel row Selection
In addition to interface operations to select rows, we can also use code to select rows:
// Select rows and keep other rows in the selected status
Grid. getSelectionModel (). select (records, true );
// Select all
Grid. getSelectionModel (). selectAll ();
// Select based on row index
Grid. getSelectionModel (). selectRange (startRow, endRow, true)
Extjs GridPanel
To obtain the selected row, you still need to use SelectionModel:
Var records = grid. getSelectionModel (). getSelection ();