Ext.FileChooser.js

/**
 * @component:  Ext.FileChooser
 * @version:    0.2
 * @updated:    17:23 11/01/2012
 */

Ext.FileChooser = function(config) {

  Ext.apply(this, config || {});

  this.addEvents(
    'beforerender',
    'render',
    'change',
    'beforedestroy',
    'destroy'    
  );    

  this.getId();
  Ext.ComponentMgr.register(this);
  Ext.Component.superclass.constructor.call(this);

  if (this.renderTo) {
    this.render(this.renderTo);
    delete this.renderTo;
  }

}; // Ext.FileChooser

Ext.extend(Ext.FileChooser, Ext.util.Observable, {

  name:     'files',
  multiple: true,

  init: function(c) {
    
    c.on({
      'render'  : this.render, 
      'destroy' : this.destroy,
      scope: this
    });

  }, // init

  render: function(container, position) {
    
    if (!this.rendered && (this.fireEvent("beforerender", this) !== false)) {

      this.rendered = true;
      this.container = Ext.get(container.el || container);

      if (position !== undefined) {

        if (typeof position == 'number') {
          position = this.container.dom.childNodes[position];
        } else {
          position = Ext.getDom(position);
        }

      }

      this.onRender(this.container, position);

      if (this.cls) {
        this.el.addClass(this.cls);
        delete this.cls;
      }

      if (this.style) {
        this.el.applyStyles(this.style);
        delete this.style;
      }

      this.fireEvent("render", this);
      this.initEvents();

    } // if

    return this;

  }, // render

  onRender: function(ct, position) {
    
    this.el = this.el || ct.createChild({
        
      tag:      'input',
      type:     'file',
      id:       this.getId(),
      name:     this.name,
      multiple: (this.multiple === true),
      style:    'position:absolute; left:-1000px; top:0;'

    }, position);

    return this;

  }, // onRender

  initEvents: function() {
    this.el.on("change", this.onChange, this);
  }, // initEvents

  onChange: function() {
    
    this.files = this.el.dom.files;
    this.fireEvent("change", this.files);
    
  }, // onChange

  choose: function() {
    
    if (this.el) {
      this.el.dom.click();
    }
    return this;

  }, // choose

  select: function() {
    return this.choose();
  }, // select

  getEl : function() {
    return this.el;
  }, // getEl

  getId: function() {
    return this.id || (this.id = Ext.id(this.component));
  }, // getId

  getItemId : function() {
    return this.getId();
  }, // getItemId

  addClass : function(cls) {

    if (this.el) {
      this.el.addClass(cls);
    } else {
      this.cls = this.cls ? this.cls + ' ' + cls : cls;
    }
    return this;

  }, // addClass

  removeClass : function(cls) {

    if (this.el) {
      this.el.removeClass(cls);
    } else if (this.cls) {
      this.cls = this.cls.split(' ').remove(cls).join(' ');
    }
    return this;

  }, // removeClass

  destroy: function() {
    
    if (this.fireEvent("beforedestroy", this) !== false) {
      
      if (this.rendered) {
        this.el.removeAllListeners();
        this.el.remove();
      }

      Ext.ComponentMgr.unregister(this);
      this.fireEvent("destroy", this);
      this.purgeListeners();

    }
    
  } // destroy

});