Clear Up
SharpKit Reference

Feature Class

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]
            });
            

Namespace: Ext.grid.feature

Base Types

System.Object

Base Interfaces

Constructors

Methods

Name Description
addEvents(object) Adds the specified events to the list of events which this Observable may fire.
addListener(object, Delegate, object, object) Appends an event handler to this object. For example:
myGridPanel.on("mouseover", this.onMouseOver, this);
            
The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example:
myGridPanel.on({
            cellClick: this.onCellClick,
            mouseover: this.onMouseOver,
            mouseout: this.onMouseOut,
            scope: this // Important. Ensure "this" is correct during handler execution
            });
            
One can also specify options for each event handler separately:
myGridPanel.on({
            cellClick: {fn: this.onCellClick, scope: this, single: true},
            mouseover: {fn: panel.onMouseOver, scope: panel}
            });
            
Names of methods in a specified scope may also be used. Note that scope MUST be specified to use this option:
myGridPanel.on({
            cellClick: {fn: 'onCellClick', scope: this, single: true},
            mouseover: {fn: 'onMouseOver', scope: panel}
            });
            
addManagedListener(object, object, Delegate, object, object) Adds listeners to any Observable object (or Ext.Element) which are automatically removed when this Component is destroyed.
attachEvents() Approriate place to attach events to the view, selectionmodel, headerCt, etc

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

clearListeners() Removes all listeners for this object including the managed listeners
clearManagedListeners() Removes all managed listeners for this object.
continueFireEvent(JsString, object, object) Continue to fire event.
createRelayer(object, object) Creates an event handling function which refires the event from this object as the passed event name.
disable() Disables the feature.
enable() Enables the feature.
enableBubble(object) Enables events fired by this Observable to bubble up an owner hierarchy by calling this.getBubbleTarget() if present. There is no implementation in the Observable base class. This is commonly used by Ext.Components to bubble events to owner Containers. See Ext.Component.getBubbleTarget. The default implementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to access the required target more quickly. Example:
  Ext.override(Ext.form.field.Base, {
            //  Add functionality to Field's initComponent to enable the change event to bubble
            initComponent : Ext.Function.createSequence(Ext.form.field.Base.prototype.initComponent, function() {
            this.enableBubble('change');
            }),
            //  We know that we want Field's events to bubble directly to the FormPanel.
            getBubbleTarget : function() {
            if (!this.formPanel) {
            this.formPanel = this.findParentByType('form');
            }
            return this.formPanel;
            }
            });
            var myForm = new Ext.formPanel({
            title: 'User Details',
            items: [{
            ...
            }],
            listeners: {
            change: function() {
            // Title goes red if form has been modified.
            myForm.header.setStyle('color', 'red');
            }
            }
            });
            
fireEvent(JsString, Object[]) Fires the specified event with the passed parameters (minus the event name, plus the options object passed to addListener). An event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget) by calling enableBubble.
getAdditionalData(object, JsNumber, Model, object) Provide additional data to the prepareData call within the grid view.

This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

getBubbleParent() Gets the bubbling parent for an Observable
getFireEventArgs(object, object, object, object) 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 eventSelector
  • The method must also return the eventName as the first index of the array to be passed to fireEvent.

    This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

    getMetaRowTplFragments() Allows a feature to inject member methods into the metaRowTpl. This is important for embedding functionality which will become part of the proper row tpl.

    This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

    hasListener(JsString) Checks to see if this object has any listeners for a specified event, or whether the event bubbles. The answer indicates whether the event needs firing or not.
    mon(object, object, Delegate, object, object) Shorthand for addManagedListener. Adds listeners to any Observable object (or Ext.Element) which are automatically removed when this Component is destroyed.
    mun(object, object, Delegate, object) Shorthand for removeManagedListener. Removes listeners that were added by the mon method.
    mutateMetaRowTpl(JsArray) Allows a feature to mutate the metaRowTpl. The array received as a single argument can be manipulated to add things on the end/begining of a particular row.

    This is a template method. a hook into the functionality of this class. Feel free to override it in child classes.

    on(object, Delegate, object, object) Shorthand for addListener. Appends an event handler to this object. For example:
    myGridPanel.on("mouseover", this.onMouseOver, this);
                
    The method also allows for a single argument to be passed which is a config object containing properties which specify multiple events. For example:
    myGridPanel.on({
                cellClick: this.onCellClick,
                mouseover: this.onMouseOver,
                mouseout: this.onMouseOut,
                scope: this // Important. Ensure "this" is correct during handler execution
                });
                
    One can also specify options for each event handler separately:
    myGridPanel.on({
                cellClick: {fn: this.onCellClick, scope: this, single: true},
                mouseover: {fn: panel.onMouseOver, scope: panel}
                });
                
    Names of methods in a specified scope may also be used. Note that scope MUST be specified to use this option:
    myGridPanel.on({
                cellClick: {fn: 'onCellClick', scope: this, single: true},
                mouseover: {fn: 'onMouseOver', scope: panel}
                });
                
    prepareClass(Delegate) Prepares a given class for observable instances. This method is called when a class derives from this class or uses this class as a mixin.
    relayEvents(object, JsArray<T>, object) Relays selected events from the specified Observable as if the events were fired by this. For example if you are extending Grid, you might decide to forward some events from store. So you can do this inside your initComponent:
    this.relayEvents(this.getStore(), ['load']);
                
    The grid instance will then have an observable 'load' event which will be passed the parameters of the store's load event and any function fired with the grid's load event would have access to the grid using the this keyword.
    removeListener(JsString, Delegate, object) Removes an event handler.
    removeManagedListener(object, object, Delegate, object) Removes listeners that were added by the mon method.
    removeManagedListenerItem(bool, object) Remove a single managed listener item
    resumeEvents() Resumes firing events (see suspendEvents). If events were suspended using the queueSuspended parameter, then all events fired during event suspension will be sent to any listeners now.
    suspendEvents(bool) Suspends the firing of all events. (see resumeEvents)
    un(JsString, Delegate, object) Shorthand for removeListener. Removes an event handler.

    Properties

    Name Description
    className Defaults to: "Ext.Base"
    collectData Most features will not modify the data returned to the view. This is limited to one feature that manipulates the data per grid view. Defaults to: false
    configMap Defaults to: {}
    disabled True when feature is disabled. Defaults to: false
    eventPrefix Prefix to use when firing events on the view. For example a prefix of group would expose "groupclick", "groupcontextmenu", "groupdblclick". Defaults to: null
    eventSelector Selector used to determine when to fire the event with the eventPrefix. Defaults to: null
    eventsSuspended Initial suspended call count. Incremented when suspendEvents is called, decremented when resumeEvents is called. Defaults to: 0
    grid Reference to the grid panel Defaults to: null
    hasFeatureEvent Most features will expose additional events, some may not and will need to change this to false. Defaults to: true
    hasListeners This object holds a key for any event that has a listener. The listener may be set directly on the instance, or on its class or a super class (via observe) or on the MVC EventBus. The values of this object are truthy (a non-zero number) and falsy (0 or undefined). They do not represent an exact count of listeners. The value for an event is truthy if the event must be fired and is falsy if there is no need to fire the event. The intended use of this property is to avoid the expense of fireEvent calls when there are no listeners. This can be particularly helpful when one would otherwise have to call fireEvent hundreds or thousands of times. It is used like this:
    if (this.hasListeners.foo) {
               this.fireEvent('foo', this, arg1);
               }
                
    initConfigList Defaults to: []
    initConfigMap Defaults to: {}
    isInstance Defaults to: true
    isObservable true in this class to identify an object as an instantiated Observable, or subclass thereof. Defaults to: true
    self Get the reference to the current class from which this object was instantiated. Unlike statics, this.self is scope-dependent and it's meant to be used for dynamic inheritance. See statics for a detailed comparison
      Ext.define('My.Cat', {
                statics: {
                speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
                },
                constructor: function() {
                alert(this.self.speciesName); // dependent on 'this'
                },
                clone: function() {
                return new this.self();
                }
                });
                Ext.define('My.SnowLeopard', {
                extend: 'My.Cat',
                statics: {
                speciesName: 'Snow Leopard'         // My.SnowLeopard.speciesName = 'Snow Leopard'
                }
                });
                var cat = new My.Cat();                     // alerts 'Cat'
                var snowLeopard = new My.SnowLeopard();     // alerts 'Snow Leopard'
                var clone = snowLeopard.clone();
                alert(Ext.getClassName(clone));             // alerts 'My.SnowLeopard'
                
    view Reference to the TableView. Defaults to: null

    Fields

    Name Description
    listeners A config object containing one or more event handlers to be added to this object during initialization. This should be a valid listeners config object as specified in the addListener example for attaching multiple handlers at once. DOM events from Ext JS Components While some Ext JS Component classes export selected DOM events (e.g. "click", "mouseover" etc), this is usually only done when extra value can be added. For example the DataView's itemclick event passing the node clicked on. To access DOM events directly from a child element of a Component, we need to specify the element option to identify the Component property to add a DOM listener to:
    new Ext.panel.Panel({
                width: 400,
                height: 200,
                dockedItems: [{
                xtype: 'toolbar'
                }],
                listeners: {
                click: {
                element: 'el', //bind to the underlying el property on the panel
                fn: function(){ console.log('click el'); }
                },
                dblclick: {
                element: 'body', //bind to the underlying body property on the panel
                fn: function(){ console.log('dblclick body'); }
                }
                }
                });
                
    © Copyright 2005-2011 SharpKit. All rights reserved.