Gird Event Mechanism Primer reader _yui. Ext Related

Source: Internet
Author: User

Original Address article Date: 2006/09/25/

The new version. 32 Yui-ext contains an important upgrade of 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).

Ways to listen for events

Since 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. The ' FN ' is the ' function to ' call ' when the event occurs. The "Scope" is a 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 pre-submit event listening
    • On (EventName, FN, scope, override) -AddListener shortcuts

These methods, like YAHOO.uitl.Event, have the same signature (signatures).

Interception of Onrowselect Events:

var sm = Grid.getselectionmodel (); 
Sm.addlistener (' Rowselect ', MyHandler);

This is an introduction to the list and parameters of Gird exposure events:

-"This" refers to the grid object;
-"E" refers to YAHOO.ext.EventObject (a generic Event object), except that the drag & drop object is a standard browser event object.
-"DD" refers to the YAHOO.ext.GridDD object of the grid.

The following event explanations are provided in the original form for the reader to understand accurately:

  • Cellclick -(This, RowIndex, ColumnIndex, e)-fires where a cell is clicked
  • Celldblclick -(This, RowIndex, ColumnIndex, E)-fires when a cell is double clicked
  • Rowclick -(this, RowIndex, e)-fires where a row is clicked
  • Rowdblclick -(this, RowIndex, e)-fires if a row is double clicked
  • Headerclick -(this, columnindex, e)-fires when a header is clicked
  • Rowcontextmenu -(this, RowIndex, e)-fires when a row are right clicked
  • Headercontextmenu -(this, columnindex, e)-fires when a header was right clicked
  • Beforeedit -(This, RowIndex, ColumnIndex, e)-fires just before editing are started on a cell
  • Afteredit -(This, RowIndex, ColumnIndex, E)-fires immediately after the A cell is edited
  • bodyscroll -(scrollleft, scrolltop)-Fires when the "grid ' s" 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 then dragged row (s) are dropped on a valid DD target
  • DragOver -(this, DD, Targetid, E) Fires while row (s) are being dragged. The "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), cross DD Target while another DRA Gged
  • dragout -(this, DD, Targetid, E)-fires at dragged Row (s) leave another DD target while being dragged

Examples of gird events

function Oncellclick (grid, RowIndex, Colindex, e) {  
 alert (' Cell at row ' + RowIndex + ', column ' + Colindex + ' is CL Icked! '); 
 } 
 var Grid = ...//Here registers the event Grid.addlistener (' Cellclick ', Oncellclick);

Ordinary Grid Event
Since There is no way to envision everything your may want to doing with the grid, I ' ve also exposed direct access to many of The grid ' s raw events. All of this 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 are could use this event combined with the load event 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 your started with the new event system. If you are have any questions, feel free to post in the Help Forum and I'll help you out.
Jack

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.