Summary of the attributes of Gridpanel

1, Gridpanel inherited the panel, its xtype for grid, the table column information has class Ext.grid.ColumnModel () definition, table data storage by Ext.data.Store (), memory according to the resolution of different data, Can be divided into jsonstore,simplestore,groupingstore and other

2, the column information in cm includes header display text header, column corresponding Recordset field dataindex, column is sorted sortable, column render function renderer, Width breadth, formatted information format, etc.

3, DS can be any format of the data into the form of gird can be used, there are two parts of proxy and reader,proxy refers to the way to obtain data, reader refers to how to parse the heap of data. This is where JavaScript variables are specifically parsed with Ext.data.MemoryProxy. Needs to be initialized at once store.load. Remote read data uses Scripttagproxy.

4, in Ext.data.ArrayReader ({},[

{name: ' ID ', mapping:2}//description to change the serial number to the third column

])

5. When creating a grid, you can define properties Enablecolumnmove:false and Enablecolumnresize:false to disable grid default drag-and-drop columns and to change column widths.

6, Striperows:true to achieve the effect of zebra crossing

Loadmask:true The mask and hint function when reading data, is a loaded box, but Store.load () after building the grid

Viewconfig:{forcefit:true} makes each column automatically populated with grid, and if the column width is set, it is calculated proportionally.

Autoexpandcolumn: ' DESCN ' allows you to extend the width of the specified column DESCN automatically, but you must specify the ID in the column in cm: ' DESCN ', only one column extension

Add Sortinfo:{field: ' Name ' in DS, direction: ' ASC '} will sort by name this column forward

7, in the DS reader set type: ' Date ' and DateFormat: ' Y-m-dth:i: S ', where type is the reader parsing the column as a Date class processing, DateFormat is to convert the resulting string to the appropriate date format, but also need to add a row of configuration in cm, configure the Renderer property to format date format data, Renderer:ext . util. Format.daterenderer (' y-m-d '), plus type: ' Date ' property

8, value is the cell's values, Cellmeta is the cell's related properties, the main ID and Css;record are the objects of this row of data, if you want to get the value of other columns, can be obtained by record.data[' id '; rowindex is the line number, ColumnIndex is the column number; The store is the DS that is passed when the table is constructed, which means that all the data in the table is available through the store

9, the implementation of automatic line number can be added to cm in a line of code, placed on the top line, new Ext.grid.RowNumberer ()

10, delete a row, you can create a button with the ID remove, and then use the Code ext.get (' Remove '). On (' onclick ', function () {

Store.remove (Store.getat (1));//delete second row

Gird.view.refresh ()//Refresh line number

})

11, Grid. Gridpanel default is the row selection model, the row selection model defaults to support multiple selection, the mouse clicks hold down SHIFT or CTRL key can select multiple lines, if you want to select only one line, you need to set up in the grid sm:new Ext.grid.RowSelectionModel ({singleselect:true}), another selection model is the Cellselectionmodel cell selection model, which allows only one cell to be selected at a time. The cell selection model is used by default in Editorgrid.

12, Var Selections=grid.getselectionmodel (). Getselections ();

First get Selectionmodel from grid, then get the currently selected data from the selection model, Selecitons.length is the number of record bars selected. If you need to decide whether to select a record, only need to selections.length is equal to 0.

Note: There are also two selection models in the tree object, by default Defaultselectionmodel can only select one node at a time, and another Multiselectionmodel, It can use the CTRL key to select multiple nodes (Note: You are not allowed to use the SHIFT key)

13, Grid.getview () must be called after the creation of the Ext.grid.GridPanel, it can only obtain a grid-created GridView instance. Set the parameters in Viewconfig, columnstext,sortasctext,sortdesntext these three parameters are used to set the text displayed in the 3 sections of the Drop-down menu for each column in the table, ' Displayed columns ', ' ascending ', and ' descending '. SCROLLOFFSET:30 Displays the width reserved on the right scroll bar of the table, and the default is 20px;

14, if you want to appear scroll bar, you need to define the grid height.

15, pagination toolbar with pagesize description of a page to display a few data, displayinfo whether the display of data information, displaymsg only when the DisplayInfo is true, to display the message when there is data, {0},{1},{2} is automatically replaced with the corresponding data, emptymsg the information displayed when there is no data. Note The paging toolbar needs to be store.load () after the grid is constructed.

16, to read from the local data, which requires the memoryproxy to Pagingmemoryproxy

17. To make a remote sort, you need to set up remotesort:true in the DS.

18. To edit the table, you need to add the attribute editor:new Ext.grid.GridEditor (new Ext.form.TextField ({allowblank:false}) in cm. It is also necessary to change the Gridpanel into Editorgridpanel. The default is to double-click the cell to edit, you can change the grid to add property clickstoedit:1, which means that click can be modified.