Gird event mechanism primary reader

Source: Internet
Author: User

Original address Article Date: 2006/09/25/

The YUI-EXT of the new version. 32 contains an important upgrade to the GIRD event mechanism. Many new events can be used now, and the mechanism for listening to events has changed (although it is still backward compatible ).

Event listening method

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

  • AddListener (eventName, fn, scope, override)-"EventName" shocould 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)-Removed the previously submitted event listening.
  • 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 of GIRD exposure events and parameter introduction:

-"This" refers to the Grid object;-"e" refers to YAHOO. ext. EventObject (conventional event object), except that the Drag & Drop object is a standard browser event object. -"Dd" refers to the Grid's YAHOO. ext. GridDD object.

The following event explanations are provided in the original article 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 whenUserResizes 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

Gird event example

Function onCellClick (grid, rowIndex, colIndex, e) {alert ('cell at row' + rowIndex + ', column' + colIndex + 'was clicked! ');} Var grid =... // register the event grid. addListener ('cellclick', onCellClick) here );

 

Common Grid eventsSince there is no way to envision everything you may want to do with the grid, I 've also exposed direct access to other of the grid's raw events. all of these events pass one parameter to their handler: "e" a YAHOO. ext. eventObject.
  • Click
  • Dblclick
  • Mousedown
  • Mouseup
  • Mouseover
  • Mouseout
  • Keypress
  • Keydown
LoadableDataModel (from which XMLDataModel and JSONDataModel are derived) picked up a useful new event: Beforeload-Fires right before the model starts fetching remote data. You cocould use this event combined with LoadEvent to hide/show a loading indicator.
var img = getEl('loading-indicator'); var dm = grid.getDataModel(); dm.addListener('beforeload', img.show, img, true); dm.addListener('load', img.hide, img, true);
Hopefully this can get you started with the new event system. If you have any questions, feel free to post in the Help Forum and I will help you out. Jack

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.