Properties Methods Events Config Options Direct Link

    Observable
      GridView

# Class Ext.grid.GridView

Package: | Ext.grid
Defined In: | GridView.js
Class: | GridView
Subclasses: | GroupingView
Extends: | Observable

This class encapsulates the user interface of an Ext.grid.GridPanel. Methods of this class may be used to access user interface elements to enable special display effects. Do not change the DOM structure of the user interface.

This class does not provide ways to manipulate the underlying data. The data model of a Grid is held in an Ext.data.Store.

## Config Options

Config Options | Defined By
--- | ---
| autoFill : Boolean True to auto expand the columns to fit the grid when the grid is created. | GridView
| cellSelector : String The selector used to find cells internally | GridView
| cellSelectorDepth : Number The number of levels to search for cells in event delegation (defaults to 4) | GridView
| deferEmptyText : Boolean True to defer emptyText being applied until the store's first load | GridView
| emptyText : String Default text to display in the grid body when no rows are available (defaults to ''). | GridView
| enableRowBody : Boolean True to add a second TR element per row that can be used to provide a row body that spans beneath the data row. Use t... True to add a second TR element per row that can be used to provide a row body that spans beneath the data row. Use the getRowClass method's rowParams config to customize the row body. | GridView
| forceFit : Boolean True to auto expand/contract the size of the columns to fit the grid width and prevent horizontal scrolling. This opt... True to auto expand/contract the size of the columns to fit the grid width and prevent horizontal scrolling. This option overrides any (@link Ext.grid.ColumnModel#width width} settings in the ColumnModel. | GridView
| listeners : Object (optional) A config object containing one or more event handlers to be added to this object during initialization. Th... (optional) 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. | Observable
| rowSelector : String The selector used to find rows internally | GridView
| rowSelectorDepth : Number The number of levels to search for rows in event delegation (defaults to 10) | GridView

## Public Properties

Property | Defined By
--- | ---
| columnsText : String The text displayed in the "Columns" menu item | GridView
| mainBody : Ext.Element The GridView's body Element which encapsulates all rows in the Grid. Element. Read-only. This Element is only availab... The GridView's body Element which encapsulates all rows in the Grid. Element. Read-only. This Element is only available after the GridPanel has been rendered. | GridView
| scrollOffset : Number The amount of space to reserve for the scrollbar (defaults to 19 pixels) | GridView
| sortAscText : String The text displayed in the "Sort Ascending" menu item | GridView
| sortClasses : Array The CSS classes applied to a header when it is sorted. (defaults to ["sort-asc", "sort-desc"]) | GridView
| sortDescText : String The text displayed in the "Sort Descending" menu item | GridView

## Public Methods

Method | Defined By
--- | ---
| GridView( `Object config` ) Parameters: `config` : Object Returns: `` | GridView
| addEvents( `Object object` ) : void Used to define events on this Observable Used to define events on this Observable Parameters: `object` : Object The object with the events defined Returns: `void` | Observable
- | addListener( `String eventName`, `Function handler`, [`Object scope`], [`Object options`] ) : void Appends an event handler to this component Appends an event handler to this component Parameters: `eventName` : String The type of event to listen for `handler` : Function The method the event invokes `scope` : Object (optional) The scope (`this` reference) in which the handler function is executed. If omitted, defaults to the object which fired the event. `options` : Object (optional) An object containing handler configuration properties. This may contain any of the following properties: scope : Object The scope (`this` reference) in which the handler function is executed. If omitted, defaults to the object which fired the event. delay : Number The number of milliseconds to delay the invocation of the handler after the event fires. single : Boolean True to add a handler to handle just the next firing of the event, and then remove itself. buffer : Number Causes the handler to be scheduled to run in an Ext.util.DelayedTask delayed by the specified number of milliseconds. If the event fires again within that time, the original handler is not invoked, but the new handler is scheduled in its place. target : Observable Only call the handler if the event was fired on the target Observable, not if the event was bubbled up from a child Observable. Combining Options Using the options argument, it is possible to combine different types of listeners: A delayed, one-time listener.
      myDataView.on('click', this.onClick, this, {
          single: true,
          delay: 100
      });
  Attaching multiple handlers in 1 call The method also allows for a single argument to be passed which is a config object containing properties which specify multiple handlers.
      myGridPanel.on({
          'click' : {
              fn: this.onClick,
              scope: this,
              delay: 100
          },
          'mouseover' : {
              fn: this.onMouseOver,
              scope: this
          },
          'mouseout' : {
              fn: this.onMouseOut,
              scope: this
          }
      });
  Or a shorthand syntax:
      myGridPanel.on({
          'click' : this.onClick,
          'mouseover' : this.onMouseOver,
          'mouseout' : this.onMouseOut,
           scope: this
      });
Returns: `void` | Observable
| findRow( `Element el` ) : The Return the HtmlElement representing the grid row which contains the passed element. Return the HtmlElement representing the grid row which contains the passed element. Parameters: `el` : Element The target element Returns: `The` row element, or null if the target element is not within a row of this GridView. | GridView
| findRowIndex( `Element el` ) : The Return the index of the grid row which contains the passed element. Return the index of the grid row which contains the passed element. Parameters: `el` : Element The target element Returns: `The` row index, or false if the target element is not within a row of this GridView. | GridView
| fireEvent( `String eventName`, `Object... args` ) : Boolean Fires the specified event with the passed parameters (minus the event name). Fires the specified event with the passed parameters (minus the event name). Parameters: `eventName` : String `args` : Object... Variable number of parameters are passed to handlers Returns: `Boolean` returns false if any of the handlers return false otherwise it returns true | Observable
| focusCell( `Number row`, `Number col` ) : void Focuses the specified cell. Focuses the specified cell. Parameters: `row` : Number The row index `col` : Number The column index Returns: `void` | GridView
| focusRow( `Number row` ) : void Focuses the specified row. Focuses the specified row. Parameters: `row` : Number The row index Returns: `void` | GridView
| getCell( `Number row`, `Number col` ) : HtmlElement Returns the grid's <TD> HtmlElement at the specified coordinates. Returns the grid's <TD> HtmlElement at the specified coordinates. Parameters: `row` : Number The row index in which to find the cell. `col` : Number The column index of the cell. Returns: `HtmlElement` The <TD> at the specified coordinates. | GridView
| getHeaderCell( `Number index` ) : HtmlElement Return the <TD> HtmlElement which represents the Grid's header cell for the specified column index. Return the <TD> HtmlElement which represents the Grid's header cell for the specified column index. Parameters: `index` : Number The column index Returns: `HtmlElement` The <TD> element. | GridView
| getRow( `Number index` ) : HtmlElement Return the <TR> HtmlElement which represents a Grid row for the specified index. Return the <TR> HtmlElement which represents a Grid row for the specified index. Parameters: `index` : Number The row index Returns: `HtmlElement` The <TR> element. | GridView
| getRowClass( `Record record`, `Number index`, `Object rowParams`, `Store store` ) : String Override this function to apply custom CSS classes to rows during rendering. You can also supply custom parameters t... Override this function to apply custom CSS classes to rows during rendering. You can also supply custom parameters to the row template for the current row to customize how it is rendered using the rowParams parameter. This function should return the CSS class name (or empty string '' for none) that will be added to the row's wrapping div. To apply multiple class names, simply return them space-delimited within the string (e.g., 'my-class another-class'). Parameters: `record` : Record The Ext.data.Record corresponding to the current row `index` : Number The row index `rowParams` : Object A config object that is passed to the row template during rendering that allows customization of various aspects of a body row, if applicable. Note that this object will only be applied if enableRowBody = true, otherwise it will be ignored. The object may contain any of these properties: `body` : String An HTML fragment to be rendered as the cell's body content (defaults to ''). `bodyStyle` : String A CSS style string that will be applied to the row's TR style attribute (defaults to ''). `cols` : Number The column count to apply to the body row's TD colspan attribute (defaults to the current column count of the grid). `store` : Store The Ext.data.Store this grid is bound to Returns: `String` a CSS class name to add to the row. | GridView
| hasListener( `String eventName` ) : Boolean Checks to see if this object has any listeners for a specified event Checks to see if this object has any listeners for a specified event Parameters: `eventName` : String The name of the event to check for Returns: `Boolean` True if the event is being listened for, else false | Observable
| on( `String eventName`, `Function handler`, [`Object scope`], [`Object options`] ) : void Appends an event handler to this element (shorthand for addListener) Appends an event handler to this element (shorthand for addListener) Parameters: `eventName` : String The type of event to listen for `handler` : Function The method the event invokes `scope` : Object (optional) The scope in which to execute the handler function. The handler function's "this" context. `options` : Object (optional) Returns: `void` | Observable
| purgeListeners() : void Removes all listeners for this object Removes all listeners for this object Parameters: None. Returns: `void` | Observable
| refresh( [`Boolean headersToo`] ) : void Refreshs the grid UI Refreshs the grid UI Parameters: `headersToo` : Boolean (optional) True to also refresh the headers Returns: `void` | GridView
| relayEvents( `Object o`, `Array events` ) : void Relays selected events from the specified Observable as if the events were fired by `this`. Relays selected events from the specified Observable as if the events were fired by `this`. Parameters: `o` : Object The Observable whose events this object is to relay. `events` : Array Array of event names to relay. Returns: `void` | Observable
| removeListener( `String eventName`, `Function handler`, [`Object scope`] ) : void Removes a listener Removes a listener Parameters: `eventName` : String The type of event to listen for `handler` : Function The handler to remove `scope` : Object (optional) The scope (this object) for the handler Returns: `void` | Observable
| resumeEvents() : void Resume firing events. (see suspendEvents) Resume firing events. (see suspendEvents) Parameters: None. Returns: `void` | Observable
| scrollToTop() : void Scrolls the grid to the top Scrolls the grid to the top Parameters: None. Returns: `void` | GridView
| suspendEvents() : void Suspend the firing of all events. (see resumeEvents) Suspend the firing of all events. (see resumeEvents) Parameters: None. Returns: `void` | Observable
| un( `String eventName`, `Function handler`, [`Object scope`] ) : void Removes a listener (shorthand for removeListener) Removes a listener (shorthand for removeListener) Parameters: `eventName` : String The type of event to listen for `handler` : Function The handler to remove `scope` : Object (optional) The scope (this object) for the handler Returns: `void` | Observable

## Public Events

Event | Defined By
--- | ---
| beforerefresh : ( `Ext.grid.GridView view` ) Internal UI Event. Fired before the view is refreshed. Internal UI Event. Fired before the view is refreshed. Listeners will be called with the following arguments: `view` : Ext.grid.GridView | GridView
| beforerowremoved : ( `Ext.grid.GridView view`, `Number rowIndex`, `Ext.data.Record record` ) Internal UI Event. Fired before a row is removed. Internal UI Event. Fired before a row is removed. Listeners will be called with the following arguments: `view` : Ext.grid.GridView `rowIndex` : Number The index of the row to be removed. `record` : Ext.data.Record The Record to be removed | GridView
| beforerowsinserted : ( `Ext.grid.GridView view`, `Number firstRow`, `Number lastRow` ) Internal UI Event. Fired before rows are inserted. Internal UI Event. Fired before rows are inserted. Listeners will be called with the following arguments: `view` : Ext.grid.GridView `firstRow` : Number The index of the first row to be inserted. `lastRow` : Number The index of the last row to be inserted. | GridView
| refresh : ( `Ext.grid.GridView view` ) Internal UI Event. Fired after the GridView's body has been refreshed. Internal UI Event. Fired after the GridView's body has been refreshed. Listeners will be called with the following arguments: `view` : Ext.grid.GridView | GridView
| rowremoved : ( `Ext.grid.GridView view`, `Number rowIndex`, `Ext.data.Record record` ) Internal UI Event. Fired after a row is removed. Internal UI Event. Fired after a row is removed. Listeners will be called with the following arguments: `view` : Ext.grid.GridView `rowIndex` : Number The index of the row that was removed. `record` : Ext.data.Record The Record that was removed | GridView
| rowsinserted : ( `Ext.grid.GridView view`, `Number firstRow`, `Number lastRow` ) Internal UI Event. Fired after rows are inserted. Internal UI Event. Fired after rows are inserted. Listeners will be called with the following arguments: `view` : Ext.grid.GridView `firstRow` : Number The index of the first inserted. `lastRow` : Number The index of the last row inserted. | GridView
| rowupdated : ( `Ext.grid.GridView view`, `Number firstRow`, `Ext.data.record record` ) Internal UI Event. Fired after a row has been updated. Internal UI Event. Fired after a row has been updated. Listeners will be called with the following arguments: `view` : Ext.grid.GridView `firstRow` : Number The index of the row updated. `record` : Ext.data.record The Record backing the row updated. | GridView