[Reprinted] ext core API details Ext. widgets (19th)-grid (1)

Ext. Grid. columnmodel
Columns used to define the grid
Use Cases
VaR colmodel = new Ext. Grid. columnmodel ([
{Header: "ticker", width: 60, sortable: true },
{Header: "company name", width: 150, sortable: true}
]);

Return to columnmodel. Its constructor is an array composed of config, where config is defined {
Align: Align in string // css
Dataindex: String // record field name of the store to be bound
Fixed: Boolean // The width of a true Column cannot be changed.
Header: String // The name displayed in the header
Hidden: Boolean // hide this column
ID: String // This attribute is used for style selection. If this attribute is defined, the cell in which the column is located defines the class as X-grid-TD-id.
Renderer: function // you can use this constructor to format data.
Resizable: Boolean // adjustable size
Sortable: Boolean // sortable
Width: Number // width
}
In addition, although not declared, config actually supports Editor: ext. form. field attribute. grid. in the editorgridpanel, we can see that in order to expand the performance of the grid, we usually also need to customize columns, by the way, an interesting column, ext. grid. rownumberer: this is a simple column extended by Ext. Its structure is very simple and there are no other methods or attributes. Ext. grid. rownumberer ({header: String, sortable: Boolean, width: Number })
VaR colmodel = new Ext. Grid. columnmodel ([
New Ext. Grid. rownumberer (),
{Header: "ticker", width: 60, sortable: true },
{Header: "company name", width: 150, sortable: true}
]);
Attribute
Defaultsortable: Boolean // sorted by default
Defaultwidth: Number // default width
Setconfig: Object // return the config parameter of the constructor.

Method
Columnmodel (Object config)
Structure

Getcelleditor (number colindex, number rowindex): Object
Obtains the editor of the specified row and column.
Getcolumnbyid (string ID): Object
Obtains the column object of the specified ID.
Getcolumncount (): Number
Number of Columns
Getcolumnheader (number col): String
Get the column header text
Getcolumnid (number index): String
Obtain the column ID.
Getcolumntooltip (number col): String
Column prompt
Getcolumnwidth (number col): Number
Column width
Getcolumnsby (function FN, [object scope]): Array
Use FN to find the specified Column
Getdataindex (number col): Number
Obtains the sequence number of the data-bound object in the specified column in the store.
Getindexbyid (string ID): Number
Search for serial numbers by ID
Getrenderer (number col): Function
Get the painter
Gettotalwidth (Boolean includehidden): Number
Total Width
Haslistener (string eventname): Boolean
Is there an event listener?
Iscelleditable (number colindex, number rowindex): Boolean
Editable columns?
Isfixed (): void
Boolean should be returned, full?
Ishidden (number colindex): Boolean
Specifies column hiding?
Isresizable (): Boolean
Rewritable definition size
Issortable (number col): Boolean
Sortable?
Setcolumnheader (number Col, string header): void
Set the specified column header
Setcolumntooltip (number Col, string tooltip): void
Set the specified column prompt
Setcolumnwidth (number Col, number width): void
Set the specified column width
Setconfig (array config): void
Resetting config
Setdataindex (number Col, number dataindex): void
Set the data source of the specified Column
Seteditable (number Col, Boolean editable): void
Sets whether the specified column can be edited.
Seteditor (number Col, object Editor): void
Set editor for specified Columns
Sethidden (number colindex, Boolean hidden): void
Set specified column hiding
Setrenderer (number Col, function FN): void
Set the output method for the specified Column

Event
Columnmoved: (columnmodel this, number oldindex, number newindex)
Configchanged: (columnmodel this)
Headerchange: (columnmodel this, number columnindex, string newtext)
Hiddenchange: (columnmodel this, number columnindex, Boolean hidden)
Widthchange: (columnmodel this, number columnindex, number newwidth)

Ext. Grid. propertycolumnmodel
Inherited from Ext. Grid. columnmodel, designed for Ext. Grid. propertygrid. The structure is a bit different. However, this API document does not know who wrote it, and ext2 does not seem to have a grid,
Propertycolumnmodel (ext. Grid. Grid grid, object source)

Ext. Grid. gridview
View support for gridpanel
Config {
AutoFill: Boolean
Enablerowbody: Boolean
Forcefit: Boolean
}

Attribute
Columnstext: String // column text
Scroloffset: Number // rolling walk
Sortasctext: String // positive text
Sortclasses: array // the style used by the header columns in the forward and backward directions. The default value is ["sort-ASC", "Sort-Desc"].
Sortdesctext: String // inverted text

Method
Gridview (Object config)
Structure
Focuscell (number row, number col): void
Specify the col column of the row to get the focus
Focusrow (number row): void
Select row
Getcell (number row, number col): htmlelement
Obtains the htmlelement object of the specified row and column.
Getheadercell (number index): htmlelement
Obtains the Table Single-header object of the specified column.
Getrow (number index): htmlelement
Obtains the htmlelement object of the specified row.
Getrowclass (record, number index, object rowparams, store DS): void
// Get the style of the specified row? It is depressing that the definition of this method cannot be found in gridview. js.
Refresh ([Boolean headerstoo]): void
Latest New Display
Scrolltotop (): void
Scroll to the header

Ext. Grid. groupingview
Inherited from Ext. Grid. gridview, used for Data grouping and applied
Config {
Emptygrouptext: String // empty group display text
Enablegroupingmenu: Boolean // allow group menu
Enablenogroups: Boolean // enable/disable group display
Grouptexttpl: String // This is a template. The content of group items is displayed accordingly. For syntax, see template,
Hidegroupedcolumn: Boolean // hide Group Columns
Startcollapsed: Boolean // collapsed at the start. The default value is false.
}
In addition, although not described in the API, the attributes of groupbytext and showgroupstext can also be specified in config.
Method
Groupingview (Object config)
Structure
Getgroupid (string value): void
Obtain the group ID of the specified value, the method prepared for togglegroup
Toggleallgroups ([Boolean expanded]): void
Collapse or expand all Groups
Togglegroup (string groupid, [Boolean expanded]): void
Expand or collapse the specified group, for example, grid. View. togglegroup (grid. View. getgroupid ('horticulturalist'). Expand or collapse the group whose field value is 'horticulturalist '.
Ext. onready (function (){
// Define an array
VaR arr = [['bill ', 'gardener'], ['ben', 'horticulturalist'], ['you', 'gardener'], ['others ', 'gardener'], ['I', 'horticulturalist'];
VaR reader = new Ext. Data. arrayreader (

{},
// Define the ing between arrays and record
[
{Name: 'name '},
{Name: 'occupation', mapping: 1}
]
);
// Generate metadata
VaR store = new Ext. Data. Store ({
Reader: Reader
});
Store. loaddata (ARR );

// Configure column information now
VaR Col = new Ext. Grid. columnmodel ([
New Ext. Grid. rownumberer ({header: 'sequence number ', width: 30 }),
{Header: 'name', sortable: True, dataindex: 'name '},
{Header: 'occupation', sortable: True, dataindex: 'occupation '}
]);
// Configure view information
VaR view = new Ext. Grid. gridview ({forcefit: True, sortasctext: 'forward sequence', sortdesctext: 'reverse sequence '});
View. columnstext = 'column display/hiding ';
// Now we have an available grid. Don't be proud. This is just the first step.
VaR grid = new Ext. Grid. gridpanel ({
El: Ext. getbody (),
Height: 200,
Width: 400,
Store: store,
CM: Col,
View: View
});

Grid. Render ();
// Now we need a groupingstore
VaR gstore = new Ext. Data. groupingstore ({
Reader: reader,
Groupfield: 'name ',
Grouponsort: True,
Sortinfo: {field: 'occupation', ction: "ASC"} // you must specify sortinfo information when using groupingstore.
});
Gstore. loaddata (ARR );

// Expand our grid to make it even cooler to group it.
VaR ggrid = new Ext. Grid. gridpanel ({
DS: gstore,
CM: Col,
View: New Ext. Grid. groupingview ({
Forcefit: True,
Sortasctext: 'position ',
Sortdesctext: 'reverse order ',
Columnstext: 'column display/hiding ',
Groupbytext: 'group by column ',
Showgroupstext: 'group display ',
Grouptexttpl: '{text} ({[values. Rs. Length]} records )'
}),
Frame: True,
Width: 400,
Height: 300,
Collapsible: True,
Animcollapse: false,
Renderto: Ext. getbody ()
});

});