Ext.ux.BreadcrumbTrail

/**
 * @class Ext.ux.BreadcrumbTrail
 * @extends Ext.Container
 * @author Ed Spencer
 * Renders a series of breadcrumbs which fire events when clicked.
 * Add Ext.ux.Breadcrumb objects as items - each Breadcrumb is mostly just a reference to a Component such as
 * an Ext.Panel.  When the breadcrumb-clicked event is fired it is called with the component as the only arg.
 * 
 * Example Usage - move to a specific tab:
 * 
 * var trail = new Ext.ux.BreadcrumbTrail({
 *   autoRemoveOnClick: true, //default, removes all child breadcrumbs when one is clicked
 *   items: [
 *     {component: myPanel1},
 *     {component: myPane2, title: 'Override panel title'},
 *     new Ext.ux.Breadcrumb({component: myPanel3})
 *   ]
 * });
 * 
 * trail.on('breadcrumb-click', function(component) {myTabPanel.setActiveItem(component);}, this);
 */
Ext.ux.BreadcrumbTrail = Ext.extend(Ext.Container, {
  defaultType: 'breadcrumb',
    
  /**
   * @property baseCls
   * @type String
   * The CSS class added to the wrapper element
   */
  baseCls: 'ux-breadcrumb-trail',
  
  /**
   * @property autoRemoveOnClick
   * @type Boolean
   * True to automatically remove all Breadcrumbs after the breadcrumb which is clicked (defaults to true)
   */
  autoRemoveOnClick: true,
  
  initComponent: function() {
    Ext.ux.BreadcrumbTrail.superclass.initComponent.apply(this, arguments);
    
    this.addEvents(
      /**
       * @event breadcrumb-clicked
       * Fired whenever one of the breadcrumb elements is clicked
       * @param {Ext.Component} component The component linked to the breadcrumb that was clicked
       */
      'breadcrumb-clicked'
    );
    
    /**
     * Listen to click events and automatically prune child breadcrumbs
     */
    this.on('breadcrumb-clicked', function(comp) {
      if (this.autoRemoveOnClick) this.removeAfter(comp);
    }, this);
  },
  
  /**
   * Renders the HTML for this container
   * @param {Ext.Container} ct The container to render this component to
   * @param {Number} position The position within the parent container to render this component to
   */
  onRender: function(ct, position) {
    this.el = ct.createChild({
      tag: 'ul',
      cls: this.baseCls
    });
  
    Ext.ux.BreadcrumbTrail.superclass.onRender.apply(this, arguments);
    
    /**
     * Look up the component referenced by the <li> click target, fire click event
     */
    this.el.on('click', function(eventObject) {
      var li = eventObject.getTarget('li');
      if (li) {
        var clickedComponent = Ext.getCmp(li.id.replace(/^component\-/, ''));
        
        this.fireEvent('breadcrumb-clicked', clickedComponent);
      };
    }, this);
  },
  
  /**
   * Removes all breadcrumbs after the one given
   * @param {Ext.Component} component The last component to keep in the trail
   */
  removeAfter: function(component) {
    //find the index in the items array of the component passed
    var index = this.items.findIndexBy(function(o, k) { return o.component.id == component.id; });
    
    if (index != -1) {
      //remove each breadcrumb after the one clicked
      this.items.each(function(item, i, length) {
        if (i > index) this.remove(item);
      }, this);
      
      this.doLayout();
    };
  }
});

Ext.reg('breadcrumb_trail', Ext.ux.BreadcrumbTrail);

/**
 * @class Ext.ux.Breadcrumb
 * @extends Ext.Component
 * @author Ed Spencer
 * Represents a single breadcrumb to be rendered inside a breadcrumb trail
 */
Ext.ux.Breadcrumb = Ext.extend(Ext.Component, {
  
  /**
   * @property baseCls
   * @type String
   * The CSS class to add to this breadcrumb's element
   */
  baseCls: 'ux-breadcrumb',
  
  /**
   * @property title
   * @type String
   * The title to show inside the breadcrumb if no title is set
   */
  title: 'No Title',
  
  constructor: function(config) {
    Ext.applyIf(config, {
      title: config.component.title
    });   
    
    Ext.ux.Breadcrumb.superclass.constructor.call(this, config);
  },
  
  /**
   * Renders the HTML for this component
   * @param {Ext.Container} ct The container to render this component to
   * @param {Number} position The position within the parent container to render this component to
   */
  onRender: function(ct, position) {
    this.el = ct.createChild({
      tag:  'li',
      cls:  this.baseCls,
      html: this.title,
      id:   'component-' + this.component.id
    });
  
    Ext.ux.Breadcrumb.superclass.onRender.apply(this, arguments);
  }
});

Ext.reg('breadcrumb', Ext.ux.Breadcrumb);