Module Ext_grid_feature_Feature

module Ext_grid_feature_Feature: sig .. end

A feature is a type of plugin that is specific to the Ext.grid.Panel. It provides several hooks that allows the developer to inject additional functionality at certain points throughout the grid creation cycle. This class provides the base template methods that are available to the developer, it should be extended.

There are several built in features that extend this class, for example:

• Ext.grid.feature.Grouping - Shows grid rows in groups as specified by the Ext.data.Store
• Ext.grid.feature.RowBody - Adds a body section for each grid row that can contain markup.
• Ext.grid.feature.Summary - Adds a summary row at the bottom of the grid with aggregate totals for a column.

Using Features

A feature is added to the grid by specifying it an array of features in the configuration:

var groupingFeature = Ext.create('Ext.grid.feature.Grouping');
Ext.create('Ext.grid.Panel', {
    // other options
    features: [groupingFeature]
});

Writing Features

A Feature may add new DOM structure within the structure of a grid.

A grid is essentially a <table> element. A TableView instance uses three XTemplates to render the grid, tableTpl, rowTpl, cellTpl.

• A TableView uses its tableTpl to emit the <table> and <tbody> HTML tags into its output stream. It also emits a <thead> which contains a sizing row. To ender the rows, it invokes Ext.view.Table.renderRows passing the rows member of its data object.

The tableTpl's data object Looks like this: { view: owningTableView, rows: recordsToRender, viewStartIndex: indexOfFirstRecordInStore, tableStyle: styleString }

• A TableView uses its rowTpl to emit a <tr> HTML tag to its output stream. To render cells, it invokes Ext.view.Table.renderCell passing the rows member of its data object.

The rowTpl's data object looks like this:

{
    view:        owningTableView,
    record:      recordToRender,
    recordIndex: indexOfRecordInStore,
    columns:     arrayOfColumnDefinitions,
    itemClasses: arrayOfClassNames, // For outermost row in case of wrapping
    rowClasses:  arrayOfClassNames,  // For internal data bearing row in case of wrapping
    rowStyle:    styleString
}

• A TableView uses its cellTpl to emit a <td> HTML tag to its output stream.

The cellTpl's data object looks like this:

{
    record: recordToRender
    column: columnToRender;
    recordIndex: indexOfRecordInStore,
    columnIndex: columnIndex,
    align: columnAlign,
    tdCls: classForCell
}

A Feature may inject its own tableTpl or rowTpl or cellTpl into the TableView's rendering by calling Ext.view.Table.addTableTpl or Ext.view.Table.addRowTpl or Ext.view.Table.addCellTpl.

The passed XTemplate is added upstream of the default template for the table element in a link list of XTemplates which contribute to the element's HTML. It may emit appropriate HTML strings into the output stream around a call to

this.nextTpl.apply(values, out, parent);

This passes the current value context, output stream and the parent value context to the next XTemplate in the list.

class type t = object .. end

class type configs = object .. end

class type events = object .. end

class type statics = object .. end

val of_configs : configs Js.t -> t Js.t

val to_configs : t Js.t -> configs Js.t