Package: | Ext.grid |
Class: | Grid |
Extends: | Observable |
Subclasses: | EditorGrid |
Defined In: | Grid.js |
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:Property | Defined By | |
---|---|---|
ddText : String | Grid | |
Configures the text is the drag proxy (defaults to "%0 selected row(s)"). %0 is replaced with the number of selected ... |
Method | Defined By | |
---|---|---|
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) |
Event | Defined By | |
---|---|---|
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 |
Config Options | Defined By | |
---|---|---|
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(). |
public String ddText
public function Grid( String/HTMLElement/Ext.Element container
, Object config
)
container
: String/HTMLElement/Ext.Elementconfig
: Objectpublic function addEvents( Object object
)
object
: Objectvoid
public function addListener( String eventName
, Function handler
, [Object scope
], [Object options
] )
eventName
: Stringhandler
: Functionscope
: Objectoptions
: Object
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
});
void
public function autoSize()
void
public function destroy( Boolean removeEl
)
removeEl
: Booleanvoid
public function fireEvent( String eventName
, Object... args
)
eventName
: Stringargs
: Object...Boolean
public function getColumnModel()
ColumnModel
public function getDataSource()
DataSource
public function getDragDropText()
String
public function getGridEl()
Element
public function getSelectionModel()
SelectionModel
public function getView()
GridView
public function hasListener( String eventName
)
eventName
: StringBoolean
public function on( String eventName
, Function handler
, [Object scope
], [Object options
] )
eventName
: Stringhandler
: Functionscope
: Objectoptions
: Objectvoid
public function purgeListeners()
void
public function reconfigure( Ext.data.Store dataSource
, Ext.grid.ColumnModel The
)
dataSource
: Ext.data.StoreThe
: Ext.grid.ColumnModelvoid
public function removeListener( String eventName
, Function handler
, [Object scope
] )
eventName
: Stringhandler
: Functionscope
: Objectvoid
public function render()
Ext.grid.Grid
public function un( String eventName
, Function handler
, [Object scope
] )
eventName
: Stringhandler
: Functionscope
: Objectvoid
public event bodyscroll
scrollLeft
: NumberscrollTop
: Numberpublic event cellclick
this
: GridrowIndex
: NumbercolumnIndex
: Numbere
: Ext.EventObjectpublic event cellcontextmenu
this
: GridrowIndex
: NumbercellIndex
: Numbere
: Ext.EventObjectpublic event celldblclick
this
: GridrowIndex
: NumbercolumnIndex
: Numbere
: Ext.EventObjectpublic event click
e
: Ext.EventObjectpublic event columnmove
oldIndex
: NumbernewIndex
: Numberpublic event columnresize
columnIndex
: NumbernewSize
: Numberpublic event contextmenu
e
: Ext.EventObjectpublic event dblclick
e
: Ext.EventObjectpublic event dragdrop
this
: Griddd
: Ext.GridDDtargetId
: Stringe
: eventpublic event dragenter
this
: Griddd
: Ext.GridDDtargetId
: Stringe
: eventpublic event dragout
this
: Griddd
: Ext.GridDDtargetId
: Stringe
: eventpublic event dragover
this
: Griddd
: Ext.GridDDtargetId
: Stringe
: eventpublic event enddrag
this
: Griddd
: Ext.GridDDe
: eventpublic event headerclick
this
: GridcolumnIndex
: Numbere
: Ext.EventObjectpublic event headercontextmenu
this
: GridcolumnIndex
: Numbere
: Ext.EventObjectpublic event headerdblclick
this
: GridcolumnIndex
: Numbere
: Ext.EventObjectpublic event keydown
e
: Ext.EventObjectpublic event keypress
e
: Ext.EventObjectpublic event mousedown
e
: Ext.EventObjectpublic event mouseout
e
: Ext.EventObjectpublic event mouseover
e
: Ext.EventObjectpublic event mouseup
e
: Ext.EventObjectpublic event render
grid
: Gridpublic event rowclick
this
: GridrowIndex
: Numbere
: Ext.EventObjectpublic event rowcontextmenu
this
: GridrowIndex
: Numbere
: Ext.EventObjectpublic event rowdblclick
this
: GridrowIndex
: Numbere
: Ext.EventObjectpublic event startdrag
this
: Griddd
: Ext.GridDDe
: eventautoExpandColumn : String
autoExpandMax : Number
autoExpandMin : Number
autoHeight : Boolean
autoSizeColumns : Boolean
autoSizeHeaders : Boolean
autoWidth : Boolean
enableColumnHide : Boolean
enableColumnMove : Boolean
enableDragDrop : Boolean
enableRowHeightSync : Boolean
loadMask : Object
maxHeight : Number
maxRowsToMeasure : Boolean
minColumnWidth : Number
monitorWindowResize : Boolean
stripeRows : Boolean
trackMouseOver : Boolean
view : Object