Events for EXT-JS

There are many events in EXT-JS to which you can ascribe listeners to do some neat things. But to which event should you attach functionality?

Well, some are pretty clear, such as the select event on the selection model of a grid, allowing you to do things with a row selection. Or using mouseover to change the color of a button. Or even the load event for a store on a combobox to select the most common option, while keeping an alphabetical list.

But say you want to select a row in a grid when loading it with static information? Two events bubble up — render and show. These fire in that order as well, render then show. Both will execute the logic to load records into a grid and select specific rows based on some criteria without error. But if you run this logic through the render event, you may be left wondering where your selections went to.

To avoid this frustrating problem, do the work in the show event. Then, you will see the selection! Here is an example of having a multiselect grid which uses the ‘checkboxmodel’ selection type

// creating grid inside my window object
Ext.create("Ext.grid.GridPanel", {
  id: "myGrid",
  store: Ext.create("Ext.data.Store", {
    fields: ["cable_id", "cable_name", "attached"],
    data: [],
  }),
  selType: "checkboxmodel",
  multiSelect: true,
  /* column definitions, etc */
});

window.addListener("show", function () {
  Ext.getCmp("myGrid")
    .getStore()
    .each(function (record, idx) {
      // if the record is confirmed as 'attached', then select it
      if (rec.data["attached"] == true) {
        Ext.getCmp("myGrid").getSelectionModel().select(idx, true);
      }
    });
});