/* This file is part of Ext JS 3.4 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-04-03 15:07:25 */ Ext.data.JsonP.Ext_grid_GridView({"alternateClassNames":[],"aliases":{},"enum":null,"parentMixins":[],"tagname":"class","subclasses":["Ext.grid.GroupingView","Ext.grid.PivotGridView"],"extends":"Ext.util.Observable","uses":[],"html":"
Hierarchy
Ext.util.ObservableExt.grid.GridViewSubclasses
Files
This class encapsulates the user interface of an Ext.grid.GridPanel.\nMethods of this class may be used to access user interface elements to enable\nspecial display effects. Do not change the DOM structure of the user interface.
\n\n\nThis class does not provide ways to manipulate the underlying data. The data\nmodel of a Grid is held in an Ext.data.Store.
\n\nDefaults to false. Specify true to have the column widths re-proportioned\nwhen the grid is initially rendered. The\ninitially configured width of each column will be adjusted\nto fit the grid width and prevent horizontal scrolling. If columns are later resized (manually\nor programmatically), the other columns in the grid will not be resized to fit the grid width.\nSee forceFit also.
\nDefaults to: false
The selector used to find cells internally (defaults to 'td.x-grid3-cell')
\nDefaults to: 'td.x-grid3-cell'
The number of levels to search for cells in event delegation (defaults to 4)
\nDefaults to: 4
The text displayed in the 'Columns' menu item (defaults to 'Columns')
\nDefaults to: 'Columns'
True to defer emptyText being applied until the store's\nfirst load (defaults to true).
\nDefaults to: true
Default text (html tags are accepted) to display in the grid body when no rows\nare available (defaults to ''). This value will be used to update the mainBody:
\n\n this.mainBody.update('<div class=\"x-grid-empty\">' + this.emptyText + '</div>');\n
\n\nTrue to add a second TR element per row that can be used to provide a row body\nthat spans beneath the data row. Use the getRowClass method's rowParams config to customize the row body.
\nDefaults to false. Specify true to have the column widths re-proportioned\nat all times.
\n\n\nThe initially configured width of each\ncolumn will be adjusted to fit the grid width and prevent horizontal scrolling. If columns are\nlater resized (manually or programmatically), the other columns in the grid will be resized\nto fit the grid width.
\n\n\nColumns which are configured with fixed: true
are omitted from being resized.
See autoFill.
\n\nDefaults to: false
The CSS class to add to the header cell when its menu is visible. Defaults to 'x-grid3-hd-menu-open'
\nDefaults to: 'x-grid3-hd-menu-open'
True to disable the grid column headers (defaults to false).\nUse the ColumnModel menuDisabled\nconfig to disable the menu for individual columns. While this config is true the\nfollowing will be disabled:
True to hide the sorting icons if sorting is disabled for a column. Defaults to false
\nDefaults to: false
(optional)
A config object containing one or more event handlers to be added to this\nobject during initialization. This should be a valid listeners config object as specified in the\naddListener example for attaching multiple handlers at once.
\n\nDOM events from ExtJs Components
\n\n\nWhile some ExtJs Component classes export selected DOM events (e.g. \"click\", \"mouseover\" etc), this\n\n\n
is usually only done when extra value can be added. For example the DataView's\nclick
event passing the node clicked on. To access DOM\nevents directly from a Component's HTMLElement, listeners must be added to the Element after the Component\nhas been rendered. A plugin can simplify this step:
// Plugin is configured with a listeners config object.\n// The Component is appended to the argument list of all handler functions.\nExt.DomObserver = Ext.extend(Object, {\n constructor: function(config) {\n this.listeners = config.listeners ? config.listeners : config;\n },\n\n // Component passes itself into plugin's init method\n init: function(c) {\n var p, l = this.listeners;\n for (p in l) {\n if (Ext.isFunction(l[p])) {\n l[p] = this.createHandler(l[p], c);\n } else {\n l[p].fn = this.createHandler(l[p].fn, c);\n }\n }\n\n // Add the listeners to the Element immediately following the render call\n c.render = c.render.createSequence(function() {\n var e = c.getEl();\n if (e) {\n e.on(l);\n }\n });\n },\n\n createHandler: function(fn, c) {\n return function(e) {\n fn.call(this, e, c);\n };\n }\n});\n\nvar combo = new Ext.form.ComboBox({\n\n // Collapse combo when its element is clicked on\n plugins: [ new Ext.DomObserver({\n click: function(evt, comp) {\n comp.collapse();\n }\n })],\n store: myStore,\n typeAhead: true,\n mode: 'local',\n triggerAction: 'all'\n});\n
\n\n\n\nTrue to show the dirty cell indicator when a cell has been modified. Defaults to true.
\nDefaults to: true
The selector used to find row bodies internally (defaults to 'div.x-grid3-row')
\nDefaults to: 'div.x-grid3-row-body'
The number of levels to search for row bodies in event delegation (defaults to 10)
\nDefaults to: 10
The CSS class added to each row when it is hovered over. Defaults to 'x-grid3-row-over'
\nDefaults to: 'x-grid3-row-over'
The selector used to find rows internally (defaults to 'div.x-grid3-row')
\nDefaults to: 'div.x-grid3-row'
The number of levels to search for rows in event delegation (defaults to 10)
\nDefaults to: 10
The amount of space to reserve for the vertical scrollbar\n(defaults to undefined). If an explicit value isn't specified, this will be automatically\ncalculated.
\nThe CSS class applied to a selected row (defaults to 'x-grid3-row-selected'). An\nexample overriding the default styling:
\n\n .x-grid3-row-selected {background-color: yellow;}\n
\n\n\nNote that this only controls the row, and will not do anything for the text inside it. To style inner\nfacets (like text) use something like:
\n\n .x-grid3-row-selected .x-grid3-cell-inner {\n color: #FFCC00;\n }\n
\n\n\n@type String
\nDefaults to: 'x-grid3-row-selected'
The text displayed in the 'Sort Ascending' menu item (defaults to 'Sort Ascending')
\nDefaults to: 'Sort Ascending'
The CSS classes applied to a header when it is sorted. (defaults to ['sort-asc', 'sort-desc'])
\nDefaults to: ['sort-asc', 'sort-desc']
The master template to use when rendering the GridView. Has a default template
\nThe template to use when rendering the body. Has a default template
\nThe template to use to render each cell. Has a default template
\nA customized implementation of a DragZone which provides default implementations\nof the template methods of DragZone to enable dragging of the selected rows of a GridPanel.\nSee Ext.grid.GridDragZone for details.
\n\n\nThis will only be present:
The template to use when rendering headers. Has a default template
\nRead-only. The GridView's body Element which encapsulates all rows in the Grid.\nThis Element is only available after the GridPanel has been rendered.
\nAdds the specified events to the list of events which this Observable may fire.
\nEither an object with event names as properties with a value of true
\nor the first event name string if multiple event names are being passed as separate parameters.
. Event name if multiple event names are being passed as separate parameters.\nUsage:
\n\nthis.addEvents('storeloaded', 'storecleared');\n
\n\nAppends an event handler to this object.
\nThe name of the event to listen for.
\nThe method the event invokes.
\nThe scope (this
reference) in which the handler function is executed.\nIf omitted, defaults to the object which fired the event.
An object containing handler configuration.\nproperties. This may contain any of the following properties:
this
reference) in which the handler function is executed.\nIf omitted, defaults to the object which fired the event.\nCombining Options
\nUsing the options argument, it is possible to combine different types of listeners:
\n
\nA delayed, one-time listener.\n
myDataView.on('click', this.onClick, this, {\nsingle: true,\ndelay: 100\n});
\n\nAttaching multiple handlers in 1 call
\nThe method also allows for a single argument to be passed which is a config object containing properties\nwhich specify multiple handlers.\n
\n
myGridPanel.on({\n'click' : {\n fn: this.onClick,\n scope: this,\n delay: 100\n},\n'mouseover' : {\n fn: this.onMouseOver,\n scope: this\n},\n'mouseout' : {\n fn: this.onMouseOut,\n scope: this\n}\n});
\n\nOr a shorthand syntax:
\n
myGridPanel.on({\n'click' : this.onClick,\n'mouseover' : this.onMouseOver,\n'mouseout' : this.onMouseOut,\n scope: this\n});
\n\nprivate - use getRowClass to apply custom row classes
\nThis is always intended to be called after renderUI. Sets up listeners on the UI elements\nand sets up options like column menus, moving and resizing.
\nDisplays the configured emptyText if there are currently no rows to display
\nResizes the configured autoExpandColumn to take the available width after the other columns have\nbeen accounted for
\nTrue to prevent the resizing of all rows (defaults to false)
\nClick handler for the shared column dropdown menu, called on beforeshow. Builds the menu\nwhich displays the list of columns for the user to show or hide.
\nDEPRECATED - will be removed in Ext JS 5.0
\nRemoves any sorting indicator classes from the column headers
\nDEPRECATED - this doesn't appear to be called anywhere in the library, remove in 4.0.
\nDestroys all objects associated with the GridView
\nRenders all of the rows to a string buffer and returns the string. This is called internally\nby renderRows and performs the actual string building for the rows - it does not inject HTML into the DOM.
\nThe column data acquired from getColumnData.
\nThe array of records to render
\nThe store to render the rows from
\nThe index of the first row being rendered. Sometimes we only render a subset of\nthe rows so this is used to maintain logic for striping etc
\nThe total number of columns in the column model
\nTrue to stripe the rows
\nA string containing the HTML for the rendered rows
\nEnables events fired by this Observable to bubble up an owner hierarchy by calling\nthis.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\nimplementation in Ext.Component returns the Component's immediate owner. But if a known target is required, this can be overridden to\naccess the required target more quickly.
\n\n\nExample:
\n\n\nExt.override(Ext.form.Field, {\n // Add functionality to Field's initComponent to enable the change event to bubble\n initComponent : Ext.form.Field.prototype.initComponent.createSequence(function() {\n this.enableBubble('change');\n }),\n\n // We know that we want Field's events to bubble directly to the FormPanel.\n getBubbleTarget : function() {\n if (!this.formPanel) {\n this.formPanel = this.findParentByType('form');\n }\n return this.formPanel;\n }\n});\n\nvar myForm = new Ext.formPanel({\n title: 'User Details',\n items: [{\n ...\n }],\n listeners: {\n change: function() {\n // Title goes red if form has been modified.\n myForm.header.setStyle('color', 'red');\n }\n }\n});\n
\n\nReturn the index of the grid column which contains the passed HTMLElement.
\n\n\nSee also findRowIndex
\nThe target element
\nThe column index, or false if the target element is not within a row of this GridView.
\nReturn the HtmlElement representing the grid row which contains the passed element.
\nThe target HTMLElement
\nThe row element, or null if the target element is not within a row of this GridView.
\nReturn the HtmlElement representing the grid row body which contains the passed element.
\nThe target HTMLElement
\nThe row body element, or null if the target element is not within a row body of this GridView.
\nReturn the index of the grid row which contains the passed HTMLElement.\nSee also findCellIndex
\nThe target HTMLElement
\nThe row index, or false if the target element is not within a row of this GridView.
\nFires the specified event with the passed parameters (minus the event name).
\n\n\nAn event may be set to bubble up an Observable parent hierarchy (See Ext.Component.getBubbleTarget)\nby calling enableBubble.
\n\nThe name of the event to fire.
\nVariable number of parameters are passed to handlers.
\nreturns false if any of the handlers return false otherwise it returns true.
\nResizes each column to fit the available grid width.\nTODO: The second argument isn't even used, remove it in 4.0
\nTrue to prevent resizing of each row to the new column sizes (defaults to false)
\nNOT USED, will be removed in 4.0
\nThe index of a column to leave at its current width. Defaults to undefined
\nTrue if the operation succeeded, false if not or undefined if the grid view is not yet initialized
\nEach GridView has its own private flyweight, accessed through this method
\nReturns an array of column configurations - one for each column
\nArray of column config objects. This includes the column name, renderer, id style and renderer
\nReturns the width of a given column minus its border width
\nThe column index
\nReturns the total internal width available to the grid, taking the scrollbar into account
\nThe total width
\nReturn the <td> HtmlElement which represents the Grid's header cell for the specified column index.
\nThe column index
\nThe td element.
\nReturns the XY co-ordinates of a given row/cell resolution (see resolveCell)
\nX and Y coords
\nReturn the <div> HtmlElement which represents a Grid row for the specified index.
\nThe row index
\nThe div element.
\nOverride this function to apply custom CSS classes to rows during rendering. You can also supply custom\nparameters to the row template for the current row to customize how it is rendered using the rowParams\nparameter. This function should return the CSS class name (or empty string '' for none) that will be added\nto the row's wrapping div. To apply multiple class names, simply return them space-delimited within the string\n(e.g., 'my-class another-class'). Example usage:
\n\nviewConfig: {\n forceFit: true,\n showPreview: true, // custom property\n enableRowBody: true, // required to create a second, full-width row to show expanded Record data\n getRowClass: function(record, rowIndex, rp, ds){ // rp = rowParams\n if(this.showPreview){\n rp.body = '<p>'+record.data.excerpt+'</p>';\n return 'x-grid3-row-expanded';\n }\n return 'x-grid3-row-collapsed';\n }\n},\n
\n\n\n@param {Record} record The Ext.data.Record corresponding to the current row.
\nThe row index.
\nA config object that is passed to the row template during rendering that allows\ncustomization of various aspects of a grid row.
\n\nIf enableRowBody is configured true, then the following properties may be set\nby this function, and will be used to render a full-width expansion row below each grid row:
\n\n\nbody
: String bodyStyle
: String The following property will be passed in, and may be appended to:
\n\ntstyle
: String The Ext.data.Store this grid is bound to
\na CSS class name to add to the row.
\nCalled when a header cell is clicked - shows the menu if the click happened over a trigger button
\nAttached as the 'itemclick' handler to the header menu and the column show/hide submenu (if available).\nPerforms sorting if the sorter buttons were clicked, otherwise hides/shows the column that was clicked.
\nCalled by handleHdMenuClick if any button except a sort ASC/DESC button was clicked. The default implementation provides\nthe column hide/show functionality based on the check state of the menu item. A different implementation can be provided\nif needed.
\nThe menu item that was clicked
\nAttached to the headers' mousemove event. This figures out the CSS cursor to use based on where the mouse is currently\npointed. If the mouse is currently hovered over the extreme left or extreme right of any header cell and the cell next\nto it is resizable it is given the resize cursor, otherwise the cursor is set to an empty string.
\nTied to the header element's mouseout event. Removes the hover class from the header cell
\nTied to the header element's mouseover event - adds the over class to the header cell if the menu is not disabled\nfor that cell
\nChecks to see if this object has any listeners for a specified event
\nThe name of the event to check for
\nTrue if the event is being listened for, else false
\nReturns true if there are any rows rendered into the GridView
\nTrue if any rows have been rendered
\nBinds a new Store and ColumnModel to this GridView. Removes any listeners from the old objects (if present)\nand adds listeners to the new ones
\nThe new Store instance
\nThe new ColumnModel instance
\nFinds and stores references to important elements
\nProvides default templates if they are not given for this particular instance. Most of the templates are defined on\nthe prototype, the ones defined inside this function are done so because they are based on Grid or GridView configuration
\nprivate
\nUsed by handleHdOver to determine whether or not to show the header menu class on cell hover
\nThe header cell index
\nThe cell element currently being hovered over
\nSizes the grid's header and body elements
\nAppends an event handler to this object (shorthand for addListener.)
\nThe type of event to listen for
\nThe method the event invokes
\nThe scope (this
reference) in which the handler function is executed.\nIf omitted, defaults to the object which fired the event.
An object containing handler configuration.
\nprivate
\nprivate
\nprivate
\nCalled by the SplitDragZone when a drag has been completed. Resizes the columns
\nprivate
\nprivate
\ntemplate functions for subclasses and plugins\nthese functions include precalculated values
\nCalled when a store is loaded, scrolls to the top row
\nprivate
\nRemoves the hover class from a row on mouseout
\nAdds the hover class to a row when hovered over
\nAdds CSS classes and rowIndex to each row
\nThe row to start from (defaults to 0)
\nRefreshs the grid UI
\nTrue to also refresh the headers
\nRefreshes a row by re-rendering it. Fires the rowupdated event when done
\nRelays selected events from the specified Observable as if the events were fired by this.
\nThe Observable whose events this object is to relay.
\nArray of event names to relay.
\nRemoves an event handler.
\nThe type of event the handler was associated with.
\nThe handler to remove. This must be a reference to the function passed into the addListener call.
\nThe scope originally specified for the handler.
\nprivate
\nRenders the header row using the 'header' template. Does not inject the HTML into the DOM, just\nreturns a string.
\nRendered header row
\nRenders each of the UI elements in turn. This is called internally, once, by this.render. It does not\nrender rows from the store, just the surrounding UI elements.
\nFinds the Elements corresponding to the given row and column indexes
\nResume firing events. (see suspendEvents)\nIf events were suspended using the queueSuspended parameter, then all\nevents fired during event suspension will be sent to any listeners now.
\nSuspend the firing of all events. (see resumeEvents)
\nPass as true to queue up suspended events to be fired\nafter the resumeEvents call instead of discarding all suspended events;
\nMoves the focus element to the x and y co-ordinates of the given row and column
\nRemoves an event handler (shorthand for removeListener.)
\nThe type of event the handler was associated with.
\nThe handler to remove. This must be a reference to the function passed into the addListener call.
\nThe scope originally specified for the handler.
\nUpdates the size of every column and cell in the grid
\nSets the hidden status of a given column.
\nThe column index
\nTrue to make the column hidden
\nCalled after a column's width has been updated, this resizes all of the cells for that column in each row
\nThe column index
\nAdds sorting classes to the column headers based on the bound store's sortInfo. Fires the 'sortchange' event\nif the sorting has changed since this function was last run.
\nEnsures that the header is sized to the total width available to it
\nTrue to update the mainBody's width also (defaults to true)
\nRe-renders the headers and ensures they are sized correctly
\nEnsures the given column has the given icon class
\nInternal UI Event. Fired before a row is removed.
\nThe index of the row to be removed.
\nThe Record to be removed
\nInternal UI Event. Fired before rows are inserted.
\nThe index of the first row to be inserted.
\nThe index of the last row to be inserted.
\nInternal UI Event. Fired after the GridView's body has been refreshed.
\nInternal UI Event. Fired after a row is removed.
\nThe index of the row that was removed.
\nThe Record that was removed
\nInternal UI Event. Fired after rows are inserted.
\nThe index of the first inserted.
\nThe index of the last row inserted.
\nInternal UI Event. Fired after a row has been updated.
\nThe index of the row updated.
\nThe Record backing the row updated.
\n