This class represents the primary interface of a component based grid control.
Usage:
var grid = new Ext.grid.Grid("my-container-id", {
ds: myDataStore,
cm: myColModel,
selModel: mySelectionModel,
autoSizeColumns: true,
monitorWindowResize: false,
trackMouseOver: true
});
// set any options
grid.render();
Common Problems:
- Grid does not resize properly when going smaller: Setting overflow hidden on the container
element will correct this
- If you get el.style[camel]= NaNpx or -2px or something related, be certain you have given your container element
dimensions. The grid adapts to your container's size, if your container has no size defined then the results
are unpredictable.
- Do not render the grid into an element with display:none. Try using visibility:hidden. Otherwise there is no way for the
grid to calculate dimensions/offsets.
|
Grid( String/HTMLElement/Ext.Element container , Object config ) |
Grid |
|
|
addEvents( Object object ) : void |
Observable |
Used to define events on this Observable |
|
addListener( String eventName , Function handler , [Object scope ], [Object options ] ) : void |
Observable |
Appends an event handler to this component |
|
autoSize() : void |
Grid |
Causes the grid to manually recalculate its dimensions. Generally this is done automatically,
but if manual update is... |
|
destroy( Boolean removeEl ) : void |
Grid |
Destroy this grid. |
|
fireEvent( String eventName , Object... args ) : Boolean |
Observable |
Fires the specified event with the passed parameters (minus the event name). |
|
getColumnModel() : ColumnModel |
Grid |
Returns the grid's ColumnModel. |
|
getDataSource() : DataSource |
Grid |
Returns the grid's DataSource. |
|
getDragDropText() : String |
Grid |
Called to get grid's drag proxy text, by default returns this.ddText. |
|
getGridEl() : Element |
Grid |
Returns the grid's underlying element. |
|
getSelectionModel() : SelectionModel |
Grid |
Returns the grid's SelectionModel. |
|
getView() : GridView |
Grid |
Returns the grid's GridView object. |
|
hasListener( String eventName ) : Boolean |
Observable |
Checks to see if this object has any listeners for a specified event |
|
on( String eventName , Function handler , [Object scope ], [Object options ] ) : void |
Observable |
Appends an event handler to this element (shorthand for addListener) |
|
purgeListeners() : void |
Observable |
Removes all listeners for this object |
|
reconfigure( Ext.data.Store dataSource , Ext.grid.ColumnModel The ) : void |
Grid |
Reconfigures the grid to use a different Store and Column Model.
The View will be bound to the new objects and refres... |
|
removeListener( String eventName , Function handler , [Object scope ] ) : void |
Observable |
Removes a listener |
|
render() : Ext.grid.Grid |
Grid |
Called once after all setup has been completed and the grid is ready to be rendered. |
|
un( String eventName , Function handler , [Object scope ] ) : void |
Observable |
Removes a listener (shorthand for removeListener) |
|
bodyscroll : ( Number scrollLeft , Number scrollTop ) |
Grid |
Fires when the body element is scrolled |
|
cellclick : ( Grid this , Number rowIndex , Number columnIndex , Ext.EventObject e ) |
Grid |
Fires when a cell is clicked |
|
cellcontextmenu : ( Grid this , Number rowIndex , Number cellIndex , Ext.EventObject e ) |
Grid |
Fires when a cell is right clicked |
|
celldblclick : ( Grid this , Number rowIndex , Number columnIndex , Ext.EventObject e ) |
Grid |
Fires when a cell is double clicked |
|
click : ( Ext.EventObject e ) |
Grid |
The raw click event for the entire grid. |
|
columnmove : ( Number oldIndex , Number newIndex ) |
Grid |
Fires when the user moves a column |
|
columnresize : ( Number columnIndex , Number newSize ) |
Grid |
Fires when the user resizes a column |
|
contextmenu : ( Ext.EventObject e ) |
Grid |
The raw contextmenu event for the entire grid. |
|
dblclick : ( Ext.EventObject e ) |
Grid |
The raw dblclick event for the entire grid. |
|
dragdrop : ( Grid this , Ext.GridDD dd , String targetId , event e ) |
Grid |
Fires when dragged row(s) are dropped on a valid DD target |
|
dragenter : ( Grid this , Ext.GridDD dd , String targetId , event e ) |
Grid |
Fires when the dragged row(s) first cross another DD target while being dragged |
|
dragout : ( Grid this , Ext.GridDD dd , String targetId , event e ) |
Grid |
Fires when the dragged row(s) leave another DD target while being dragged |
|
dragover : ( Grid this , Ext.GridDD dd , String targetId , event e ) |
Grid |
Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dr... |
|
enddrag : ( Grid this , Ext.GridDD dd , event e ) |
Grid |
Fires when a drag operation is complete |
|
headerclick : ( Grid this , Number columnIndex , Ext.EventObject e ) |
Grid |
Fires when a header is clicked |
|
headercontextmenu : ( Grid this , Number columnIndex , Ext.EventObject e ) |
Grid |
Fires when a header is right clicked |
|
headerdblclick : ( Grid this , Number columnIndex , Ext.EventObject e ) |
Grid |
Fires when a header cell is double clicked |
|
keydown : ( Ext.EventObject e ) |
Grid |
The raw keydown event for the entire grid. |
|
keypress : ( Ext.EventObject e ) |
Grid |
The raw keypress event for the entire grid. |
|
mousedown : ( Ext.EventObject e ) |
Grid |
The raw mousedown event for the entire grid. |
|
mouseout : ( Ext.EventObject e ) |
Grid |
The raw mouseout event for the entire grid. |
|
mouseover : ( Ext.EventObject e ) |
Grid |
The raw mouseover event for the entire grid. |
|
mouseup : ( Ext.EventObject e ) |
Grid |
The raw mouseup event for the entire grid. |
|
render : ( Grid grid ) |
Grid |
Fires when the grid is rendered |
|
rowclick : ( Grid this , Number rowIndex , Ext.EventObject e ) |
Grid |
Fires when a row is clicked |
|
rowcontextmenu : ( Grid this , Number rowIndex , Ext.EventObject e ) |
Grid |
Fires when a row is right clicked |
|
rowdblclick : ( Grid this , Number rowIndex , Ext.EventObject e ) |
Grid |
Fires when a row is double clicked |
|
startdrag : ( Grid this , Ext.GridDD dd , event e ) |
Grid |
Fires when row(s) start being dragged |
|
autoExpandColumn : String |
Grid |
The id of a column in this grid that should expand to fill unused space. This id can not be 0. Default is false. |
|
autoExpandMax : Number |
Grid |
The maximum width the autoExpandColumn can have (if enabled). Default is 1000. |
|
autoExpandMin : Number |
Grid |
The minimum width the autoExpandColumn can have (if enabled). Default is 50. |
|
autoHeight : Boolean |
Grid |
True to fit the height of the grid container to the height of the data. Default is false. |
|
autoSizeColumns : Boolean |
Grid |
True to automatically resize the columns to fit their content on initial render. It is more efficient to explicitly s... |
|
autoSizeHeaders : Boolean |
Grid |
True to measure headers with column data when auto sizing columns. Default is true. |
|
autoWidth : Boolean |
Grid |
True to set the grid's width to the default total width of the grid's columns instead of a fixed width. Default is fa... |
|
enableColumnHide : Boolean |
Grid |
True to enable hiding of columns with the header context menu. Default is true. |
|
enableColumnMove : Boolean |
Grid |
True to enable drag and drop reorder of columns. Default is true. |
|
enableDragDrop : Boolean |
Grid |
True to enable drag and drop of rows. Default is false. |
|
enableRowHeightSync : Boolean |
Grid |
True to manually sync row heights across locked and not locked rows. Default is false. |
|
loadMask : Object |
Grid |
An Ext.LoadMask config or true to mask the grid while loading. Default is false. |
|
maxHeight : Number |
Grid |
Sets the maximum height of the grid - ignored if autoHeight is not on. |
|
maxRowsToMeasure : Boolean |
Grid |
If autoSizeColumns is on, maxRowsToMeasure can be used to limit the number of rows measured to get a columns size. De... |
|
minColumnWidth : Number |
Grid |
The minimum width a column can be resized to. Default is 25. |
|
monitorWindowResize : Boolean |
Grid |
True to autoSize the grid when the window resizes. Default is true. |
|
stripeRows : Boolean |
Grid |
True to stripe the rows. Default is true. |
|
trackMouseOver : Boolean |
Grid |
True to highlight rows when the mouse is over. Default is true. |
|
view : Object |
Grid |
The Ext.grid.GridView used by the grid. This can be set before a call to render(). |
addEvents
public function addEvents( Object object
)
Used to define events on this Observable
addListener
public function addListener( String eventName
, Function handler
, [Object scope
], [Object options
] )
Appends an event handler to this component
Parameters:
eventName
: StringThe type of event to listen for
handler
: FunctionThe 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) An object containing handler configuration
properties. This may contain any of the following properties:
- scope {Object} The scope in which to execute the handler function. The handler function's "this" context.
- delay {Number} The number of milliseconds to delay the invocation of the handler after te 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.
Combining Options
Using the options argument, it is possible to combine different types of listeners:
A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)
el.on('click', this.onClick, this, {
single: true,
delay: 100,
forumId: 4
});
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.
el.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 which passes the same scope object to all handlers:
el.on({
'click': this.onClick,
'mouseover': this.onMouseOver,
'mouseout': this.onMouseOut,
scope: this
});
Returns:
autoSize
public function autoSize()
Causes the grid to manually recalculate its dimensions. Generally this is done automatically,
but if manual update is required this method will initiate it.
This method is defined by Grid.
destroy
public function destroy( Boolean removeEl
)
This method is defined by Grid.
fireEvent
public function fireEvent( String eventName
, Object... args
)
Fires the specified event with the passed parameters (minus the event name).
getColumnModel
public function getColumnModel()
Returns the grid's ColumnModel.
This method is defined by Grid.
getDataSource
public function getDataSource()
Returns the grid's DataSource.
This method is defined by Grid.
getDragDropText
public function getDragDropText()
Called to get grid's drag proxy text, by default returns this.ddText.
This method is defined by Grid.
getGridEl
public function getGridEl()
Returns the grid's underlying element.
This method is defined by Grid.
getSelectionModel
public function getSelectionModel()
Returns the grid's SelectionModel.
This method is defined by Grid.
getView
public function getView()
Returns the grid's GridView object.
This method is defined by Grid.
hasListener
public function hasListener( String eventName
)
Checks to see if this object has any listeners for a specified event
on
public function on( String eventName
, Function handler
, [Object scope
], [Object options
] )
Appends an event handler to this element (shorthand for addListener)
Parameters:
eventName
: StringThe type of event to listen for
handler
: FunctionThe 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:
purgeListeners
public function purgeListeners()
Removes all listeners for this object
reconfigure
public function reconfigure( Ext.data.Store dataSource
, Ext.grid.ColumnModel The
)
Reconfigures the grid to use a different Store and Column Model.
The View will be bound to the new objects and refreshed.
Parameters:
dataSource
: Ext.data.StoreThe
: Ext.grid.ColumnModel
Returns:
This method is defined by Grid.
removeListener
public function removeListener( String eventName
, Function handler
, [Object scope
] )
render
public function render()
Called once after all setup has been completed and the grid is ready to be rendered.
This method is defined by Grid.
un
public function un( String eventName
, Function handler
, [Object scope
] )
Removes a listener (shorthand for removeListener)
bodyscroll
public event bodyscroll
Fires when the body element is scrolled
Subscribers will be called with the following parameters:
scrollLeft
: NumberscrollTop
: Number
This event is defined by Grid.
cellclick
public event cellclick
Fires when a cell is clicked
Subscribers will be called with the following parameters:
this
: GridrowIndex
: NumbercolumnIndex
: Numbere
: Ext.EventObject
This event is defined by Grid.
cellcontextmenu
public event cellcontextmenu
Fires when a cell is right clicked
Subscribers will be called with the following parameters:
this
: GridrowIndex
: NumbercellIndex
: Numbere
: Ext.EventObject
This event is defined by Grid.
celldblclick
public event celldblclick
Fires when a cell is double clicked
Subscribers will be called with the following parameters:
this
: GridrowIndex
: NumbercolumnIndex
: Numbere
: Ext.EventObject
This event is defined by Grid.
click
public event click
The raw click event for the entire grid.
Subscribers will be called with the following parameters:
This event is defined by Grid.
columnmove
public event columnmove
Fires when the user moves a column
Subscribers will be called with the following parameters:
oldIndex
: NumbernewIndex
: Number
This event is defined by Grid.
columnresize
public event columnresize
Fires when the user resizes a column
Subscribers will be called with the following parameters:
columnIndex
: NumbernewSize
: Number
This event is defined by Grid.
contextmenu
public event contextmenu
The raw contextmenu event for the entire grid.
Subscribers will be called with the following parameters:
This event is defined by Grid.
dblclick
public event dblclick
The raw dblclick event for the entire grid.
Subscribers will be called with the following parameters:
This event is defined by Grid.
dragdrop
public event dragdrop
Fires when dragged row(s) are dropped on a valid DD target
Subscribers will be called with the following parameters:
This event is defined by Grid.
dragenter
public event dragenter
Fires when the dragged row(s) first cross another DD target while being dragged
Subscribers will be called with the following parameters:
This event is defined by Grid.
dragout
public event dragout
Fires when the dragged row(s) leave another DD target while being dragged
Subscribers will be called with the following parameters:
This event is defined by Grid.
dragover
public event dragover
Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dragged over.
Subscribers will be called with the following parameters:
This event is defined by Grid.
enddrag
public event enddrag
Fires when a drag operation is complete
Subscribers will be called with the following parameters:
this
: Griddd
: Ext.GridDDThe drag drop object
e
: eventThe raw browser event
This event is defined by Grid.
headerclick
public event headerclick
Fires when a header is clicked
Subscribers will be called with the following parameters:
this
: GridcolumnIndex
: Numbere
: Ext.EventObject
This event is defined by Grid.
headercontextmenu
public event headercontextmenu
Fires when a header is right clicked
Subscribers will be called with the following parameters:
this
: GridcolumnIndex
: Numbere
: Ext.EventObject
This event is defined by Grid.
headerdblclick
public event headerdblclick
Fires when a header cell is double clicked
Subscribers will be called with the following parameters:
this
: GridcolumnIndex
: Numbere
: Ext.EventObject
This event is defined by Grid.
keydown
public event keydown
The raw keydown event for the entire grid.
Subscribers will be called with the following parameters:
This event is defined by Grid.
keypress
public event keypress
The raw keypress event for the entire grid.
Subscribers will be called with the following parameters:
This event is defined by Grid.
mousedown
public event mousedown
The raw mousedown event for the entire grid.
Subscribers will be called with the following parameters:
This event is defined by Grid.
mouseout
public event mouseout
The raw mouseout event for the entire grid.
Subscribers will be called with the following parameters:
This event is defined by Grid.
mouseover
public event mouseover
The raw mouseover event for the entire grid.
Subscribers will be called with the following parameters:
This event is defined by Grid.
mouseup
public event mouseup
The raw mouseup event for the entire grid.
Subscribers will be called with the following parameters:
This event is defined by Grid.
render
public event render
Fires when the grid is rendered
Subscribers will be called with the following parameters:
This event is defined by Grid.
rowclick
public event rowclick
Fires when a row is clicked
Subscribers will be called with the following parameters:
this
: GridrowIndex
: Numbere
: Ext.EventObject
This event is defined by Grid.
rowcontextmenu
public event rowcontextmenu
Fires when a row is right clicked
Subscribers will be called with the following parameters:
this
: GridrowIndex
: Numbere
: Ext.EventObject
This event is defined by Grid.
rowdblclick
public event rowdblclick
Fires when a row is double clicked
Subscribers will be called with the following parameters:
this
: GridrowIndex
: Numbere
: Ext.EventObject
This event is defined by Grid.
startdrag
public event startdrag
Fires when row(s) start being dragged
Subscribers will be called with the following parameters:
this
: Griddd
: Ext.GridDDThe drag drop object
e
: eventThe raw browser event
This event is defined by Grid.
autoExpandColumn
autoExpandColumn : String
The id of a column in this grid that should expand to fill unused space. This id can not be 0. Default is false.
This config option is defined by Grid.
autoExpandMax
autoExpandMax : Number
The maximum width the autoExpandColumn can have (if enabled). Default is 1000.
This config option is defined by Grid.
autoExpandMin
autoExpandMin : Number
The minimum width the autoExpandColumn can have (if enabled). Default is 50.
This config option is defined by Grid.
autoHeight
autoHeight : Boolean
True to fit the height of the grid container to the height of the data. Default is false.
This config option is defined by Grid.
autoSizeColumns
autoSizeColumns : Boolean
True to automatically resize the columns to fit their content
on initial render. It is more efficient to explicitly size the columns through the ColumnModel's
Ext.grid.ColumnModel.width config option. Default is false.
This config option is defined by Grid.
autoSizeHeaders
autoSizeHeaders : Boolean
True to measure headers with column data when auto sizing columns. Default is true.
This config option is defined by Grid.
autoWidth
autoWidth : Boolean
True to set the grid's width to the default total width of the grid's columns instead of a fixed width. Default is false.
This config option is defined by Grid.
enableColumnHide
enableColumnHide : Boolean
True to enable hiding of columns with the header context menu. Default is true.
This config option is defined by Grid.
enableColumnMove
enableColumnMove : Boolean
True to enable drag and drop reorder of columns. Default is true.
This config option is defined by Grid.
enableDragDrop
enableDragDrop : Boolean
True to enable drag and drop of rows. Default is false.
This config option is defined by Grid.
enableRowHeightSync
enableRowHeightSync : Boolean
True to manually sync row heights across locked and not locked rows. Default is false.
This config option is defined by Grid.
loadMask
loadMask : Object
An
Ext.LoadMask config or true to mask the grid while loading. Default is false.
This config option is defined by Grid.
maxHeight
maxHeight : Number
Sets the maximum height of the grid - ignored if autoHeight is not on.
This config option is defined by Grid.
maxRowsToMeasure
maxRowsToMeasure : Boolean
If autoSizeColumns is on, maxRowsToMeasure can be used to limit the number of rows measured to get a columns size. Default is 0 (all rows).
This config option is defined by Grid.
minColumnWidth
minColumnWidth : Number
The minimum width a column can be resized to. Default is 25.
This config option is defined by Grid.
monitorWindowResize
monitorWindowResize : Boolean
True to autoSize the grid when the window resizes. Default is true.
This config option is defined by Grid.
stripeRows
stripeRows : Boolean
True to stripe the rows. Default is true.
This config option is defined by Grid.
trackMouseOver
trackMouseOver : Boolean
True to highlight rows when the mouse is over. Default is true.
This config option is defined by Grid.
view
view : Object
This config option is defined by Grid.