Primer of Gird event mechanism_YUI.Ext related

Original address Article date: 2006/09/25/

The new version .32 of YUI-EXT includes important upgrades to the GIRD event mechanism. Many new events are now available, and the mechanism for listening to events has changed (although it is still backwards compatible).

Methods for listening to events

Whereas YAHOO.util.CustomEvent only provides simple access, Grid and related objects extend new methods to listen for events that you should be familiar with. They are:

• addListener(eventName, fn, scope, override) - "eventName" should be one of the events defined below. "fn" is the function to call when the event occurs. "scope" is an optional object providing the scope (this) of the function. "override" is whether or not to apply that scope and is only there for backwards compatibility.
• removeListener(eventName, fn, scope) - Remove the previously submitted event listener
• on(eventName, fn, scope, override) - addListener shortcut

These methods have the same signatures as YAHOO.uitl.Event.

OnRowSelect event listening:

var sm = grid.getSelectionModel(); 
sm.addListener('rowselect', myHandler);

This is the list and parameter introduction of GIRD exposure events:

Translation Note: The following explanation of events is provided in the original text for readers to understand accurately:

• cellclick - (this, rowIndex, columnIndex, e) - Fires when a cell is clicked
• celldblclick - (this, rowIndex, columnIndex, e) - Fires when a cell is double clicked
• rowclick - (this, rowIndex, e) - Fires when a row is clicked
• rowdblclick - (this, rowIndex, e) - Fires when a row is double clicked
• headerclick - (this, columnIndex, e) - Fires when a header is clicked
• rowcontextmenu - (this, rowIndex, e) - Fires when a row is right clicked
• headercontextmenu - (this, columnIndex, e) - Fires when a header is right clicked
• beforeedit - (this, rowIndex, columnIndex, e) - Fires just before editing is started on a cell
• afteredit - (this, rowIndex, columnIndex, e) - Fires immediately after a cell is edited
• bodyscroll - (scrollLeft, scrollTop) - Fires when the grid's body is scrolled
• columnresize - (columnIndex, newSize) Fires when the user resizes a column.
• startdrag - (this, dd, e) - Fires when row(s) start being dragged
• enddrag - (this, dd, e) - Fires when a drag operation is complete
• dragdrop - (this, dd, targetId, e) - Fires when dragged row(s) are dropped on a valid DD target
• dragover - (this, dd, targetId, e) Fires while row(s) are being dragged. "targetId" is the id of the Yahoo.util.DD object the selected rows are being dragged over.
• dragenter - (this, dd, targetId, e) - Fires when the dragged row(s) first cross another DD target while being dragged
• dragout - (this, dd, targetId, e) - Fires when the dragged row(s) leave another DD target while being dragged

Example of Gird event

function onCellClick(grid, rowIndex, colIndex, e){  
 alert('Cell at row ' + rowIndex + ', column ' + colIndex + ' was clicked!'); 
 } 
 var grid = ... // 这里注册事件 grid.addListener('cellclick', onCellClick);

var img = getEl('loading-indicator'); var dm = grid.getDataModel(); dm.addListener('beforeload', img.show, img, true); dm.addListener('load', img.hide, img, true);