Summarize various attributes and methods of gridpanel in extjs

I have been searching for a long time. This is not bad, but it is recorded below:

1. Ext. Grid. gridpanel
Main configuration items:
Store: Table Dataset
Columns: configuration array of table column mode. columnmodel column mode can be automatically created.
Autoexpandcolumn: automatically fills the columns that are not used in the table. The parameter is the column ID, and the ID cannot be 0.
Striperows: whether the table is color-changing across rows. The default value is false.
Cm and colmodel: the column mode of the table. This configuration item must be set during table rendering.
SM and selmodel: Table selection mode. The default value is Ext. Grid. rowselectionmodel.
Enablehdmenu: whether to display the context menu of the header. The default value is true.
Enablecolumnhide: whether to allow columns to be hidden from the context menu in the title. The default value is true.
Loadmask: whether to display the mask effect when loading data. The default value is false.
View: Table view. The default value is Ext. Grid. gridview.
Viewconfig: configuration object of table View
Autoexpandmax: the maximum width of the automatically expanded column. The default value is 1000.
Autoexpandmin: The minimum width of the automatically expanded column. The default value is 50.
Columnlines: whether to display the column segmentation line. The default value is false.
Disableselection: whether to disable row selection. The default value is false.
Enablecolumnmove: whether to allow drag and drop columns. The default value is true.
Enablecolumnresize: whether to change the column width. The default value is true.
Hideheaders: Indicates whether to hide the header. The default value is false.
Maxheight: maximum height
Mincolumnwidth: Minimum column width. The default value is 25.
Trackmouseover: whether to highlight the row where the mouse is located. The default value is true.
Main Methods:
Getcolumnmodel (): obtains the column mode.
Getselectionmodel (): gets the selection mode
Getstore (): Get a dataset
Getview (): Get view object
Reconfigure (ext. Data. Store, ext. Grid. columnmodel colmodel): reconfigure the table component using a new dataset and column mode.
2. Ext. Grid. Column
Main configuration items:
ID: column ID
Header: Header text
Dataindex: Set the correspondence between columns and data records in the dataset. The value is the field name in the data record. If this item is not set, the column index is used to match the index of the field in the data record.
Width: column width
Align: Align of column data
Hidden: Indicates whether to hide columns. The default value is false.
Fixed: Specifies whether the column width is fixed. The default value is false.
Menudisabled: Specifies whether to disable the context menu of a column. The default value is false.
Resizable: whether to change the column width. The default value is true.
Sortable: whether to allow sorting. The default value is true.
Renderer: Set the column's custom cell rendering Function
The input function parameters include:
Value: the original value of the data.
Metadata: Metadata object, used to set the style and attributes of cells. The object contains the following attributes:
CSS: The style name applied to the TD element of the cell.
ATTR: an HTML attribute definition string, for example, 'style = "color: Blue "'
Record: Current Data Record object
Rowindex: Row index of cells
Colindex: column index of a cell
Store: DataSet object
Xtype: Specifies the column Renderer type. The default value is gridcolumn. Other optional values include booleancolumn, numbercolumn, datecolumn, and templatecolumn.
Editable: whether to edit. The default value is true.
Editor: Editor
Groupname:
Emptygrouptext:
Groupable:
3. Ext. Grid. columnmodel
Main configuration items:
Columns: field array
Defaultsortable: whether to sort data by default. The default value is false.
Defaultwidth: default width
Main Methods:
Findcolumnindex (string col): queries the column index based on the given dataindex
Getcolumnbyid (string ID): Get the column corresponding to the specified ID
Getcolumncount (Boolean visibleonly): obtains the total number of columns.
Getcolumnheader (number col): Get the column header
Getcolumnid (number index): obtains the column ID.
Getdataindex (number col): obtains the data field name corresponding to the column.
Getindexbyid (string ID): obtains the column index.
Gettotalwidth (Boolean includehidden)
Iscelleditable (number colindex, number rowindex)
Isfixed ()
Ishidden (number colindex)
Setcolumnheader (number Col, string header)
Setcolumnwidth (number Col, number width, Boolean suppressevent)
Setdataindex (number Col, string dataindex)
Seteditable (number Col, Boolean editable)
Seteditor (number Col, object editor)
Sethidden (number colindex, Boolean hidden)
Setrenderer (number Col, function FN)
4. Ext. Grid. abstractselectionmodel
Main Methods:
Lock (): Lock the selected region
Unlock (): Unlock the selected region
Islocked (): whether the selected region is locked
5. Ext. Grid. cellselectionmodel
Main Methods:
Clearselections (Boolean preventnotify): clears the selected region.
Getselectedcell (): gets the selected cell and returns an array in the format of [rowindex, colindex]
Hasselection (): whether the selected region exists.
Select (number rowindex, number colindex, [Boolean preventviewnotify], [Boolean preventfocus], [Ext. Data. Record R]): select the specified Cell
6. Ext. Grid. rowselectionmodel
Main configuration items:
Singleselect: whether to use the single-choice mode. The default value is false. Multiple data entries can be selected.
Main Methods:
Clearselections ([Boolean fast]): clears all selected regions
Deselectrange (number startrow, number endrow): cancels row selection within the range
Deselectrow (number row, [Boolean preventviewnotify]): cancels the selection status of the specified row.
Each (function FN, [object scope]): traverses all selected rows and calls the specified function. The currently selected row is passed in to this function.
Getcount (): Get the total number of rows selected
Getselected (): Get the first selected record.
Getselections (): Get the array of all selected records
Hasnext (): determines whether there are records to be selected after the selected row
Hasprevious (): determines whether there are records to be selected before the selected row
Hasselection (): whether data is selected
Isidselected (string ID): determines whether the record with the specified ID is selected
Isselected (number/record index): determines whether the data of the specified record or record index is selected
Selectall (): select all rows
Selectfirstrow (): select the first row
Selectlastrow ([Boolean keepexisting]): select the last row.
Keepexisting: whether to retain existing options
Selectnext ([Boolean keepexisting]): select the next row of the currently selected row
Selectprevious ([Boolean keepexisting]): select the previous row of the currently selected row
Selectrange (number startrow, number endrow, [Boolean keepexisting]): select all rows in the range
Selectrecords (Array records, [Boolean keepexisting]): select a group of specified records.
Selectrow (number row, [Boolean keepexisting], [Boolean preventview1_y]): select a row
Row: Row Index
Selectrows (array rows, [Boolean keepexisting]): Select multiple rows.
Rows: Row Index Array
7. Ext. Grid. checkboxselectionmodel
Main configuration items:
Singleselect: whether to use the single-choice mode. The default value is false. Multiple data entries can be selected.
Checkonly: whether to select only by clicking the checkbox column. The default value is false.
Sortable: whether to allow sorting of checkbox columns. The default value is false.
Width: the width of the checkbox column. The default value is 20.
8. Ext. Grid. rownumberer
Main configuration items:
Header: content displayed in the line number list Header
Width: column width. The default value is 23.
9. Ext. Grid. gridview
Main configuration items:
Enablerowbody: whether the row body is included
Sortasctext: the ascending text description in the table Title menu.
Sortdesctext: the descending text description in the table Title menu.
Columnstext: text description of the columns in the table Title menu
AutoFill: whether to automatically expand columns to fill the entire table. The default value is false.
Forcefit: whether to force adjust the table column width to apply the overall width of the table to prevent horizontal scroll bars. The default value is false.
Main Methods:
Focuscell (number row, number col): Move the focus to the specified Cell
Focusrow (number row): Move the focus to the specified row
Getcell (number row, number col): obtains the TD element of the specified cell.
Getheadercell (number index): obtains the TD element corresponding to the specified header.
Getrow (number index): gets the tr element corresponding to the specified row
Getrowclass (record, number index, object rowparams, store): Get the style name appended to the table row.
Record: the data record object of the current row.
Index: Index of the current row
Rowparams: Specifies the configuration object passed in to the row template during rendering. You can customize a style for the row body. This object takes effect only when enablerowbody is set to true. The possible attributes are as follows:
Body: HTML code snippet rendered to the row body
Bodystyle: String applied to the style attribute of the tr element of the row body
Cols: The value applied to the colspan attribute of the TD element of the row body. The default value is the total number of columns.
Store: Table Dataset
Refresh ([Boolean headerstoo]): refreshes the table component.
Scrolltotop (): Scroll the table to the top
Example:
Let the gridpanel scroll to the last record automatically (insert data dynamically ):
Grid. getview (). focusrow (vehiclepassinfogrid. getstore (). getcount ()-1 );
2: Clear the selected status of rows in the gridpanel:
Grid. getselectionmodel (). clearselections ();
You can use the store removeall method to clear data. The gridpanel will automatically refresh

 

 

Here is an example for reference:

VaR customcheckboxselectionmodel_t = ext. extend (ext. grid. checkboxselectionmodel, {HD: NULL, checkonly: True, onhdmousedown: function (C, A) {If (this. grid. getstore (). getcount (). tostring () = '0') {return false;} if (. classname = "x-grid3-hd-checker") {C. stopevent (); var B = ext. fly (. parentnode); var d = B. hasclass ("x-grid3-hd-checker-on"); If (d) {B. removeclass ("x-grid3-hd-checker-on"); this. Clearselections ();} else {B. addclass ("x-grid3-hd-checker-on"); this. selectall () ;}} if (. classname = "x-grid3-hd-checker x-grid3-hd-checker-on") {C. stopevent (); var B = ext. fly (. parentnode); var d = B. hasclass ("x-grid3-hd-checker-on"); If (d) {B. removeclass ("x-grid3-hd-checker-on"); this. clearselections ();} else {B. addclass ("x-grid3-hd-checker-on"); this. selectall () ;}return true ;}, Onmousedown: interceptonmousedown, handleselect: function () {If (this. Grid. Store. getcount ()! = This. Selections. Length) return; var Hd = ext. Fly (this. Grid. getview (). innerhd). Child ('div. x-grid3-hd-checker '); If (! HD. hasclass ('x-grid3-hd-checker-on ') HD. addclass ('x-grid3-hd-checker-on ');}, handledeselect: function () {If (this. grid. store. getcount ()! = This. selections. length + 1) return; var Hd = ext. fly (this. grid. getview (). innerhd ). child ('div. x-grid3-hd-checker '); If (HD. hasclass ('x-grid3-hd-checker-on ') HD. removeclass ('x-grid3-hd-checker-on ');}, clearcheckeon: function () {If (this. grid. getview (). innerhd === null | this. grid. getview (). innerhd === undefined) {return;} var Hd = ext. fly (this. grid. getview (). innerhd ). child ('div. x-grid3-hd-checker '); If (HD. hasclass ('x-grid3-hd-checker-on ') {HD. removeclass ('x-grid3-hd-checker-on ') ;}, initevents: function () {Ext. grid. checkboxselectionmodel. superclass. initevents. call (this); this. grid. on ('render', function () {var view = This. grid. getview (); view. mainbody. on ('mouseunder', this. onmousedown, this); Ext. fly (view. innerhd ). on ('mouseunder', this. onhdmousedown, this) ;}, this); // This. grid. getstore (). on ('add', this. clearcheckeon, this); this. grid. getstore (). on ('delete', this. clearcheckeon, this); this. grid. getstore (). on ('clear', this. clearcheckeon, this); this. grid. getstore (). on ('load', this. clearcheckeon, this );}});

var interceptOnMouseDown = Ext.grid.CheckboxSelectionModel.prototype.onMouseDown.createInterceptor(function(e, t){this.on('rowdeselect', this.handleDeselect, this);     this.on('rowselect', this.handleSelect, this); });

 

 

Original: http://bbs.csdn.net/topics/390384157