gistfile1.txt

/**
 * @class Ext.ux.HumanReadableGrid
 * @extends Ext.grid.GridPanel
 * An extended MVC scaffold grid with support for easily showing human-readable strings for associated models
 * instead of the default numerical ID. See loadAssociatedModel documentation for implementation details
 */
Ext.ux.HumanReadableGrid = Ext.extend(Ext.grid.GridPanel, {
  
  closable: true,

  /**
   * Listen to the store load event and trigger the associated model loading when the store has loaded
   */
  initListeners: function() {
    Ext.ux.HumanReadableGrid.superclass.initListeners.apply(this, arguments);
    
    this.store.on('load', this.loadAssociatedModels, this);
  },
  
  /**
   * This is called as soon as the main store has loaded, and defaults to an empty function. It is intended that subclasses
   * overwrite this method and simply call this.loadAssociatedModel one or more times
   */
  loadAssociatedModels: Ext.emptyFn,
  
  /**
   * Replaces an existing foreign key column with human-readable values. For example, in a grid showing an Article model, each of which
   * has a user_id foreign key, if we want to show the User's name instead of their ID we can do it like this:
   * this.loadAssociatedModel({
   *   model       : MyApp.models.User,
   *   displayField: 'username',
   *   columnId    : 'user_id'
   * });
   * @param {Object} config Configuration object. The following properties are accepted:
   * <ul>
   *   <li>model - the associated model whose values will be loaded to replace the foreign key IDs (required)</li>
   *   <li>displayField - the name of the field to replace the foreign key ID with</li>
   *   <li>columnId - the ID of the column whose values to replace. Make sure this has been set in your column model. Defaults to the foreignKey</li>
   *   <li>foreignKey - the name of the foreign key to lookup inside the store (defaults to the model's primaryKey), optional</li>
   *   <li>notFoundString - the string to use if the associated model instance could not be found (defaults to 'N/A')</li>
   * </ul>
   */
  loadAssociatedModel: function(config) {
    //apply some defaults
    Ext.applyIf(config, {
      foreignKey    : config.model.prototype.primaryKey,
      columnId      : config.model.prototype.primaryKey,
      notFoundString: 'N/A'
    });
    
    //load the store
    var s = config.model.find();
    
    //once the associated model's store has loaded, replace the foreign key IDs currently in the column
    //with the human-readable config.displayField
    s.on('load', function(store, records) {
      var cm    = this.getColumnModel(),
          colId = cm.getIndexById(config.columnId);
      
      if (colId == -1) return;
      
      cm.setRenderer(colId, function(value) {
        var instance = store.getAt(store.find(config.foreignKey, value));
        
        return (instance == undefined) ? config.notFoundString : instance.get(config.displayField);
      });
      
      //redraws the grid UI
      cm.fireEvent('configchange');
    }, this);
  }
});

//example:

MyClass = Ext.extend(Ext.ux.HumanReadableGrid, {
  /**
   * Loads the Operator model, replaces values in columns with human-readable labels
   * in place of the foreign key IDs that appear normally
   */
  loadAssociatedModels: function() {
    this.loadAssociatedModel({
      model       : GetIt.models.Operator,
      columnId    : 'created_by',
      displayField: 'operator_name'
    });
  }
});