/* 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_ActionColumn({"alternateClassNames":[],"aliases":{},"enum":null,"parentMixins":[],"tagname":"class","subclasses":[],"extends":"Ext.grid.Column","uses":[],"html":"
Hierarchy
Ext.util.ObservableExt.grid.ColumnExt.grid.ActionColumnFiles
A Grid column type which renders an icon, or a series of icons in a grid cell, and offers a scoped click\nhandler for each icon. Example usage:
\n\n\nnew Ext.grid.GridPanel({\n store: myStore,\n columns: [\n {\n xtype: 'actioncolumn',\n width: 50,\n items: [\n {\n icon : 'sell.gif', // Use a URL in the icon config\n tooltip: 'Sell stock',\n handler: function(grid, rowIndex, colIndex) {\n var rec = store.getAt(rowIndex);\n alert(\"Sell \" + rec.get('company'));\n }\n },\n {\n getClass: function(v, meta, rec) { // Or return a class from a function\n if (rec.get('change') < 0) {\n this.items[1].tooltip = 'Do not buy!';\n return 'alert-col';\n } else {\n this.items[1].tooltip = 'Buy stock';\n return 'buy-col';\n }\n },\n handler: function(grid, rowIndex, colIndex) {\n var rec = store.getAt(rowIndex);\n alert(\"Buy \" + rec.get('company'));\n }\n }\n ]\n }\n //any other columns here\n ]\n});\n
\n\n\n\n\nThe action column can be at any index in the columns array, and a grid can have any number of\naction columns.
\n\nThe alt text to use for the image element. Defaults to ''.
\nDefaults to: ''
Optional. An inline style definition string which is applied to all table cells in the column\n(excluding headers). Defaults to undefined.
\nRequired. The name of the field in the\ngrid's Ext.data.Store's Ext.data.Record definition from\nwhich to draw the column's value.
\n\nOptional. Defaults to true, enabling the configured\neditor. Set to false to initially disable editing on this column.\nThe initial configuration may be dynamically altered using\nExt.grid.ColumnModel.setEditable().
\nOptional. The Ext.form.Field to use when editing values in this column\nif editing is supported by the grid. See editable also.
\nOptional. If the grid is being rendered by an Ext.grid.GroupingView, this option\nmay be used to specify the text to display when there is an empty group value. Defaults to the\nExt.grid.GroupingView.emptyGroupText.
\nOptional. true if the column width cannot be changed. Defaults to false.
\nA function which returns the CSS class to apply to the icon image.\nThe function is passed the following parameters:
<li><b>v</b> : Object<p class=\"sub-desc\">The value of the column's configured field (if any).</p></li>\n<li><b>metadata</b> : Object<p class=\"sub-desc\">An object in which you may set the following attributes:<ul>\n <li><b>css</b> : String<p class=\"sub-desc\">A CSS class name to add to the cell's TD element.</p></li>\n <li><b>attr</b> : String<p class=\"sub-desc\">An HTML attribute definition string to apply to the data container element <i>within</i> the table cell\n (e.g. 'style=\"color:red;\"').</p></li>\n</ul></p></li>\n<li><b>r</b> : Ext.data.Record<p class=\"sub-desc\">The Record providing the data.</p></li>\n<li><b>rowIndex</b> : Number<p class=\"sub-desc\">The row index..</p></li>\n<li><b>colIndex</b> : Number<p class=\"sub-desc\">The column index.</p></li>\n<li><b>store</b> : Ext.data.Store<p class=\"sub-desc\">The Store which is providing the data Model.</p></li>\n
\n\nOptional. If the grid is being rendered by an Ext.grid.GroupingView, this option\nmay be used to specify the text with which to prefix the group field value in the group header line.\nSee also groupRenderer and\nExt.grid.GroupingView.showGroupName.
\nOptional. If the grid is being rendered by an Ext.grid.GroupingView, this option\nmay be used to specify the function used to format the grouping field value for display in the group\nheader. If a groupRenderer is not specified, the configured\nrenderer will be called; if a renderer is also not specified\nthe new value of the group field will be used.
\n\n\nThe called function (either the groupRenderer or renderer) will be\npassed the following parameters:\n
The new value of the group field.
Unused parameter.
The Record providing the data\nfor the row which caused group change.
The row index of the Record which caused group change.
The column index of the group field.
The Store which is providing the data Model.
The function should return a string value.
\n\nOptional. If the grid is being rendered by an Ext.grid.GroupingView, this option\nmay be used to disable the header menu item to group by the column selected. Defaults to true,\nwhich enables the header menu group option. Set to false to disable (but still show) the\ngroup option in the header menu for the column. See also groupName
.
A function called when the icon is clicked.\nThe handler is passed the following parameters:
grid
: GridPanelrowIndex
: NumbercolIndex
: Numberitem
: Objecte
: EventOptional. The header text to be used as innerHTML\n(html tags are accepted) to display in the Grid view. Note: to\nhave a clickable header with no text displayed use ' '.
\nOptional. Specify as false to prevent the user from hiding this column\n(defaults to true). To disallow column hiding globally for all columns in the grid, use\nExt.grid.GridPanel.enableColumnHide instead.
\nThe URL of an image to display as the clickable element in the column.\nOptional - defaults to Ext.BLANK_IMAGE_URL
.
A CSS class to apply to the icon image. To determine the class dynamically, configure the Column with a getClass
function.
Optional. A name which identifies this column (defaults to the column's initial\nordinal position.) The id is used to create a CSS class name which is applied to all\ntable cells (including headers) in that column (in this context the id does not need to be\nunique). The class name takes the form of
\n\nx-grid3-td-id\n\n\n
Header cells will also receive this class name, but will also have the class
\n\nx-grid3-hd\n\n\n
So, to target header cells, use CSS selectors such as:
\n\n.x-grid3-hd-row .x-grid3-td-id\n\n\n
The Ext.grid.GridPanel.autoExpandColumn grid config option references the column via this\nunique identifier.
\nUsed by ColumnModel setConfig method to avoid reprocessing a Column\nif isColumn
is not set ColumnModel will recreate a new Ext.grid.Column\nDefaults to true.
Defaults to: true
An Array which may contain multiple icon definitions, each element of which may contain:
\n\nicon
: StringiconCls
: StringgetClass
function.getClass
: FunctionThe value of the column's configured field (if any).
An object in which you may set the following attributes:
A CSS class name to add to the cell's TD element.
An HTML attribute definition string to apply to the data container element within the table cell\n (e.g. 'style=\"color:red;\"').
The Record providing the data.
The row index..
The column index.
The Store which is providing the data Model.
handler
: Functionscope
: Scopethis
reference) in which the \nhandler
and getClass
functions are executed. Fallback defaults are this Column's\nconfigured scope, then this Column.tooltip
: String(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\nFor an alternative to specifying a renderer see xtype
Optional. A renderer is an 'interceptor' method which can be used transform data (value,\nappearance, etc.) before it is rendered). This may be specified in either of three ways:\n
\n{\n fn: this.gridRenderer,\n scope: this\n}\n
For information about the renderer function (passed parameters, etc.), see\nExt.grid.ColumnModel.setRenderer. An example of specifying renderer function inline:
\n\n\nvar companyColumn = {\n header: 'Company Name',\n dataIndex: 'company',\n renderer: function(value, metaData, record, rowIndex, colIndex, store) {\n // provide the logic depending on business rules\n // name of your own choosing to manipulate the cell depending upon\n // the data in the underlying Record object.\n if (value == 'whatever') {\n //metaData.css : String : A CSS class name to add to the TD element of the cell.\n //metaData.attr : String : An html attribute definition string to apply to\n // the data container element within the table\n // cell (e.g. 'style=\"color:red;\"').\n metaData.css = 'name-of-css-class-you-will-define';\n }\n return value;\n }\n}\n
\n\n\nSee also scope.
\nThe scope (this reference) in which the handler
\nand getClass
fuctions are executed. Defaults to this Column.
Overrides: Ext.grid.Column.scope
Optional. true if sorting is to be allowed on this column.\nDefaults to the value of the Ext.grid.ColumnModel.defaultSortable
property.\nWhether local/remote sorting is used is specified in Ext.data.Store.remoteSort
.
Defaults to true
. Prevent grid row selection upon mousedown.
A tooltip message to be displayed on hover. Ext.QuickTips must have\nbeen initialized.
\nOverrides: Ext.grid.Column.tooltip
Optional. The initial width in pixels of the column.\nThe width of each column can also be affected if any of the following are configured:
\n\nBy specifying forceFit:true, non-fixed width columns will be\nre-proportioned (based on the relative initial widths) to fill the width of the grid so\nthat no horizontal scrollbar is shown.
\nNote: when the width of each column is determined, a space on the right side\nis reserved for the vertical scrollbar. The\nExt.grid.GridView.scrollOffset\ncan be modified to reduce or eliminate the reserved offset.
\n\nOptional. A String which references a predefined Ext.grid.Column subclass\ntype which is preconfigured with an appropriate renderer
to be easily\nconfigured into a ColumnModel. The predefined Ext.grid.Column subclass types are:
Configuration properties for the specified xtype
may be specified with\nthe Column configuration properties, for example:
var grid = new Ext.grid.GridPanel({\n ...\n columns: [{\n header: 'Last Updated',\n dataIndex: 'lastChange',\n width: 85,\n sortable: true,\n //renderer: Ext.util.Format.dateRenderer('m/d/Y'),\n xtype: 'datecolumn', // use xtype instead of renderer\n format: 'M/d/Y' // configuration property for Ext.grid.DateColumn\n }, {\n ...\n }]\n});\n
\n\nOptional. A function which returns displayable data when passed the following parameters:
\n\nThe data value for the cell.
An object in which you may set the following attributes:
A CSS class name to add to the cell's TD element.
An HTML attribute definition string to apply to the data container\nelement within the table cell (e.g. 'style=\"color:red;\"').
The Ext.data.Record from which the data was\nextracted.
Row index
Column index
The Ext.data.Store object from which the Record\nwas extracted.
Adds 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\nClean up. Remove any Editor. Remove any listeners.
\nOverrides: Ext.grid.Column.destroy
Enables 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\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.
\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
\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.
\nProcess and refire events routed from the GridView's processEvent method.\nAlso fires any configured click handlers. By default, cancels the mousedown event to prevent selection.\nReturns the event handler's status to allow cancelling of GridView's bubbling process.
\nOverrides: Ext.grid.Column.processEvent
Relays 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.
\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;
\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.
\nFires when this Column is clicked.
\nowning GridPanel
\nFires when this Column is double clicked.
\nowning GridPanel
\nFires when this Column receives a mousedown event.
\nowning GridPanel
\n