|
|
Ext.grid.feature Namespace
Download SDK: SharpKit.ExtJs.zip
Interfaces
|
AbstractSummary
|
A small abstract class that contains the shared behaviour for any summary
calculations to be used in the grid.
|
Classes
|
AbstractSummaryConfig
|
|
|
|
AbstractSummaryEvents
|
|
|
|
Chunking
|
|
|
|
ChunkingConfig
|
|
|
|
ChunkingEvents
|
|
|
|
Feature
|
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]
});
|
|
|
FeatureConfig
|
|
|
|
FeatureEvents
|
|
|
|
Grouping
|
This feature allows to display the grid rows aggregated into groups as specified by the Ext.data.Store.groupers
specified on the Store. The group will show the title for the group name and then the appropriate records for the group
underneath. The groups can also be expanded and collapsed. Extra Events This feature adds several extra events that will be fired on the grid to interact with the groups: groupclick groupdblclick groupcontextmenu groupexpand groupcollapse Menu Augmentation This feature adds extra options to the grid column menu to provide the user with functionality to modify the grouping.
This can be disabled by setting the enableGroupingMenu option. The option to disallow grouping from being turned off
by thew user is enableNoGroups. Controlling Group Text The groupHeaderTpl is used to control the rendered title for each group. It can modified to customized
the default display. Example Usage var groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl: 'Group: {name} ({rows.length})', //print the number of items in the group
startCollapsed: true // start all groups collapsed
});
|
|
|
GroupingConfig
|
|
|
|
GroupingEvents
|
|
|
|
GroupingSummary
|
This feature adds an aggregate summary row at the bottom of each group that is provided
by the Ext.grid.feature.Grouping feature. There are 2 aspects to the summary: Calculation The summary value needs to be calculated for each column in the grid. This is controlled
by the summaryType option specified on the column. There are several built in summary types,
which can be specified as a string on the column configuration. These call underlying methods
on the store: count sum min max average Alternatively, the summaryType can be a function definition. If this is the case,
the function is called with an array of records to calculate the summary value. Rendering Similar to a column, the summary also supports a summaryRenderer function. This
summaryRenderer is called before displaying a value. The function is optional, if
not specified the default calculated value is shown. The summaryRenderer is called with: value {Object} - The calculated value. summaryData {Object} - Contains all raw summary values for the row. field {String} - The name of the field we are calculating Example Usage Ext.define('TestResult', {
extend: 'Ext.data.Model',
fields: ['student', 'subject', {
name: 'mark',
type: 'int'
}]
});
Ext.create('Ext.grid.Panel', {
width: 200,
height: 240,
renderTo: document.body,
features: [{
groupHeaderTpl: 'Subject: {name}',
ftype: 'groupingsummary'
}],
store: {
model: 'TestResult',
groupField: 'subject',
data: [{
student: 'Student 1',
subject: 'Math',
mark: 84
},{
student: 'Student 1',
subject: 'Science',
mark: 72
},{
student: 'Student 2',
subject: 'Math',
mark: 96
},{
student: 'Student 2',
subject: 'Science',
mark: 68
}]
},
columns: [{
dataIndex: 'student',
text: 'Name',
summaryType: 'count',
summaryRenderer: function(value){
return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
}
}, {
dataIndex: 'mark',
text: 'Mark',
summaryType: 'average'
}]
});
|
|
|
GroupingSummaryConfig
|
|
|
|
GroupingSummaryEvents
|
|
|
|
RowBody
|
The rowbody feature enhances the grid's markup to have an additional
tr -> td -> div which spans the entire width of the original row. This is useful to to associate additional information with a particular
record in a grid. Rowbodies are initially hidden unless you override getAdditionalData. Will expose additional events on the gridview with the prefix of 'rowbody'.
For example: 'rowbodyclick', 'rowbodydblclick', 'rowbodycontextmenu'.
|
|
|
RowBodyConfig
|
|
|
|
RowBodyEvents
|
|
|
|
Summary
|
This feature is used to place a summary row at the bottom of the grid. If using a grouping,
see Ext.grid.feature.GroupingSummary. There are 2 aspects to calculating the summaries,
calculation and rendering. Calculation The summary value needs to be calculated for each column in the grid. This is controlled
by the summaryType option specified on the column. There are several built in summary types,
which can be specified as a string on the column configuration. These call underlying methods
on the store: count sum min max average Alternatively, the summaryType can be a function definition. If this is the case,
the function is called with an array of records to calculate the summary value. Rendering Similar to a column, the summary also supports a summaryRenderer function. This
summaryRenderer is called before displaying a value. The function is optional, if
not specified the default calculated value is shown. The summaryRenderer is called with: value {Object} - The calculated value. summaryData {Object} - Contains all raw summary values for the row. field {String} - The name of the field we are calculating Example Usage Ext.define('TestResult', {
extend: 'Ext.data.Model',
fields: ['student', {
name: 'mark',
type: 'int'
}]
});
Ext.create('Ext.grid.Panel', {
width: 200,
height: 140,
renderTo: document.body,
features: [{
ftype: 'summary'
}],
store: {
model: 'TestResult',
data: [{
student: 'Student 1',
mark: 84
},{
student: 'Student 2',
mark: 72
},{
student: 'Student 3',
mark: 96
},{
student: 'Student 4',
mark: 68
}]
},
columns: [{
dataIndex: 'student',
text: 'Name',
summaryType: 'count',
summaryRenderer: function(value, summaryData, dataIndex) {
return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
}
}, {
dataIndex: 'mark',
text: 'Mark',
summaryType: 'average'
}]
});
|
|
|
SummaryConfig
|
|
|
|
SummaryEvents
|
|
|
SharpKit.AspNetAjax
Ext