/*
This file is part of Ext JS 4.2
Copyright (c) 2011-2013 Sencha Inc
Contact: http://www.sencha.com/contact
GNU General Public License Usage
This file may be used under the terms of the GNU General Public License version 3.0 as
published by the Free Software Foundation and appearing in the file LICENSE included in the
packaging of this file.
Please review the following information to ensure the GNU General Public License version 3.0
requirements will be met: http://www.gnu.org/copyleft/gpl.html.
If you are unsure which license is appropriate for your use, please contact the sales department
at http://www.sencha.com/contact.
Build date: 2013-05-16 14:36:50 (f9be68accb407158ba2b1be2c226a6ce1f649314)
*/
/**
* A feature is a type of plugin that is specific to the {@link 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:
*
* - {@link Ext.grid.feature.Grouping} - Shows grid rows in groups as specified by the {@link Ext.data.Store}
* - {@link Ext.grid.feature.RowBody} - Adds a body section for each grid row that can contain markup.
* - {@link 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 {@link Ext.view.Table TableView} instance uses three {@link Ext.XTemplate XTemplates}
* to render the grid, `tableTpl`, `rowTpl`, `cellTpl`.
*
* * A {@link Ext.view.Table 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 {@link 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 {@link Ext.view.Table TableView} uses its `rowTpl` to emit a `<tr>` HTML tag to its output stream. To render cells,
* it invokes {@link 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 {@link Ext.view.Table 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 {@link Ext.view.Table TableView}'s rendering by
* calling {@link Ext.view.Table#addTableTpl} or {@link Ext.view.Table#addRowTpl} or {@link 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.
*
* @abstract
*/
Ext.define('Ext.grid.feature.Feature', {
extend: 'Ext.util.Observable',
alias: 'feature.feature',
wrapsItem: false,
/*
* @property {Boolean} isFeature
* `true` in this class to identify an object as an instantiated Feature, or subclass thereof.
*/
isFeature: true,
/**
* True when feature is disabled.
*/
disabled: false,
/**
* @property {Boolean}
* Most features will expose additional events, some may not and will
* need to change this to false.
*/
hasFeatureEvent: true,
/**
* @property {String}
* Prefix to use when firing events on the view.
* For example a prefix of group would expose "groupclick", "groupcontextmenu", "groupdblclick".
*/
eventPrefix: null,
/**
* @property {String}
* Selector used to determine when to fire the event with the eventPrefix.
*/
eventSelector: null,
/**
* @property {Ext.view.Table}
* Reference to the TableView.
*/
view: null,
/**
* @property {Ext.grid.Panel}
* Reference to the grid panel
*/
grid: null,
constructor: function(config) {
this.initialConfig = config;
this.callParent(arguments);
},
clone: function() {
return new this.self(this.initialConfig);
},
init: Ext.emptyFn,
destroy: function(){
this.clearListeners();
},
/**
* Abstract method to be overriden when a feature should add additional
* arguments to its event signature. By default the event will fire:
*
* - view - The underlying Ext.view.Table
* - featureTarget - The matched element by the defined {@link #eventSelector}
*
* The method must also return the eventName as the first index of the array
* to be passed to fireEvent.
* @template
*/
getFireEventArgs: function(eventName, view, featureTarget, e) {
return [eventName, view, featureTarget, e];
},
vetoEvent: Ext.emptyFn,
/**
* Enables the feature.
*/
enable: function() {
this.disabled = false;
},
/**
* Disables the feature.
*/
disable: function() {
this.disabled = true;
}
});
|
Download
