git.roojs.org Git - roojs1/blob - Roo/Component.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11
  12 /**
  13  * @class Roo.Component
  14  * @extends Roo.util.Observable
  15  * Base class for all major Roo components.  All subclasses of Component can automatically participate in the standard
  16  * Roo component lifecycle of creation, rendering and destruction.  They also have automatic support for basic hide/show
  17  * and enable/disable behavior.  Component allows any subclass to be lazy-rendered into any {@link Roo.Container} and
  18  * to be automatically registered with the {@link Roo.ComponentMgr} so that it can be referenced at any time via {@link Roo.getCmp}.
  19  * All visual components (widgets) that require rendering into a layout should subclass Component.
  20  * @constructor
  21  * @param {Roo.Element/String/Object} config The configuration options.  If an element is passed, it is set as the internal
  22  * element and its id used as the component id.  If a string is passed, it is assumed to be the id of an existing element
  23  * and is used as the component id.  Otherwise, it is assumed to be a standard config object and is applied to the component.
  24  */
  25 Roo.Component = function(config){
  26     console.log("COMPONENT CONSTRUCTOR");
  27     config = config || {};
  28     if(config.tagName || config.dom || typeof config == "string"){ // element object
  29         config = {el: config, id: config.id || config};
  30     }
  31     this.initialConfig = config;
  32
  33     Roo.apply(this, config);
  34     this.addEvents({
  35         /**
  36          * @event disable
  37          * Fires after the component is disabled.
  38              * @param {Roo.Component} this
  39              */
  40         disable : true,
  41         /**
  42          * @event enable
  43          * Fires after the component is enabled.
  44              * @param {Roo.Component} this
  45              */
  46         enable : true,
  47         /**
  48          * @event beforeshow
  49          * Fires before the component is shown.  Return false to stop the show.
  50              * @param {Roo.Component} this
  51              */
  52         beforeshow : true,
  53         /**
  54          * @event show
  55          * Fires after the component is shown.
  56              * @param {Roo.Component} this
  57              */
  58         show : true,
  59         /**
  60          * @event beforehide
  61          * Fires before the component is hidden. Return false to stop the hide.
  62              * @param {Roo.Component} this
  63              */
  64         beforehide : true,
  65         /**
  66          * @event hide
  67          * Fires after the component is hidden.
  68              * @param {Roo.Component} this
  69              */
  70         hide : true,
  71         /**
  72          * @event beforerender
  73          * Fires before the component is rendered. Return false to stop the render.
  74              * @param {Roo.Component} this
  75              */
  76         beforerender : true,
  77         /**
  78          * @event render
  79          * Fires after the component is rendered.
  80              * @param {Roo.Component} this
  81              */
  82         render : true,
  83         /**
  84          * @event beforedestroy
  85          * Fires before the component is destroyed. Return false to stop the destroy.
  86              * @param {Roo.Component} this
  87              */
  88         beforedestroy : true,
  89         /**
  90          * @event destroy
  91          * Fires after the component is destroyed.
  92              * @param {Roo.Component} this
  93              */
  94         destroy : true
  95     });
  96     if(!this.id){
  97         this.id = "roo-comp-" + (++Roo.Component.AUTO_ID);
  98     }
  99     Roo.ComponentMgr.register(this);
 100     Roo.Component.superclass.constructor.call(this);
 101     this.initComponent();
 102     if(this.renderTo){ // not supported by all components yet. use at your own risk!
 103         this.render(this.renderTo);
 104         delete this.renderTo;
 105     }
 106 };
 107
 108 /** @private */
 109 Roo.Component.AUTO_ID = 1000;
 110
 111 Roo.extend(Roo.Component, Roo.util.Observable, {
 112     /**
 113      * @scope Roo.Component.prototype
 114      * @type {Boolean}
 115      * true if this component is hidden. Read-only.
 116      */
 117     hidden : false,
 118     /**
 119      * @type {Boolean}
 120      * true if this component is disabled. Read-only.
 121      */
 122     disabled : false,
 123     /**
 124      * @type {Boolean}
 125      * true if this component has been rendered. Read-only.
 126      */
 127     rendered : false,
 128
 129     /** @cfg {String} disableClass
 130      * CSS class added to the component when it is disabled (defaults to "x-item-disabled").
 131      */
 132     disabledClass : "x-item-disabled",
 133         /** @cfg {Boolean} allowDomMove
 134          * Whether the component can move the Dom node when rendering (defaults to true).
 135          */
 136     allowDomMove : true,
 137     /** @cfg {String} hideMode (display|visibility)
 138      * How this component should hidden. Supported values are
 139      * "visibility" (css visibility), "offsets" (negative offset position) and
 140      * "display" (css display) - defaults to "display".
 141      */
 142     hideMode: 'display',
 143
 144     /** @private */
 145     ctype : "Roo.Component",
 146
 147     /**
 148      * @cfg {String} actionMode
 149      * which property holds the element that used for  hide() / show() / disable() / enable()
 150      * default is 'el' for forms you probably want to set this to fieldEl
 151      */
 152     actionMode : "el",
 153
 154     /** @private */
 155     getActionEl : function(){
 156         return this[this.actionMode];
 157     },
 158
 159     initComponent : Roo.emptyFn,
 160     /**
 161      * If this is a lazy rendering component, render it to its container element.
 162      * @param {String/HTMLElement/Element} container (optional) The element this component should be rendered into. If it is being applied to existing markup, this should be left off.
 163      */
 164     render : function(container, position){
 165
 166         if(this.rendered){
 167             return this;
 168         }
 169
 170         if(this.fireEvent("beforerender", this) === false){
 171             return false;
 172         }
 173
 174         if(!container && this.el){
 175             this.el = Roo.get(this.el);
 176             container = this.el.dom.parentNode;
 177             this.allowDomMove = false;
 178         }
 179         this.container = Roo.get(container);
 180         this.rendered = true;
 181         if(position !== undefined){
 182             if(typeof position == 'number'){
 183                 position = this.container.dom.childNodes[position];
 184             }else{
 185                 position = Roo.getDom(position);
 186             }
 187         }
 188         this.onRender(this.container, position || null);
 189         if(this.cls){
 190             this.el.addClass(this.cls);
 191             delete this.cls;
 192         }
 193         if(this.style){
 194             this.el.applyStyles(this.style);
 195             delete this.style;
 196         }
 197         this.fireEvent("render", this);
 198         this.afterRender(this.container);
 199         if(this.hidden){
 200             this.hide();
 201         }
 202         if(this.disabled){
 203             this.disable();
 204         }
 205
 206         return this;
 207
 208     },
 209
 210     /** @private */
 211     // default function is not really useful
 212     onRender : function(ct, position){
 213         if(this.el){
 214             this.el = Roo.get(this.el);
 215             if(this.allowDomMove !== false){
 216                 ct.dom.insertBefore(this.el.dom, position);
 217             }
 218         }
 219     },
 220
 221     /** @private */
 222     getAutoCreate : function(){
 223         var cfg = typeof this.autoCreate == "object" ?
 224                       this.autoCreate : Roo.apply({}, this.defaultAutoCreate);
 225         if(this.id && !cfg.id){
 226             cfg.id = this.id;
 227         }
 228         return cfg;
 229     },
 230
 231     /** @private */
 232     afterRender : Roo.emptyFn,
 233
 234     /**
 235      * Destroys this component by purging any event listeners, removing the component's element from the DOM,
 236      * removing the component from its {@link Roo.Container} (if applicable) and unregistering it from {@link Roo.ComponentMgr}.
 237      */
 238     destroy : function(){
 239         if(this.fireEvent("beforedestroy", this) !== false){
 240             this.purgeListeners();
 241             this.beforeDestroy();
 242             if(this.rendered){
 243                 this.el.removeAllListeners();
 244                 this.el.remove();
 245                 if(this.actionMode == "container"){
 246                     this.container.remove();
 247                 }
 248             }
 249             this.onDestroy();
 250             Roo.ComponentMgr.unregister(this);
 251             this.fireEvent("destroy", this);
 252         }
 253     },
 254
 255         /** @private */
 256     beforeDestroy : function(){
 257
 258     },
 259
 260         /** @private */
 261         onDestroy : function(){
 262
 263     },
 264
 265     /**
 266      * Returns the underlying {@link Roo.Element}.
 267      * @return {Roo.Element} The element
 268      */
 269     getEl : function(){
 270         return this.el;
 271     },
 272
 273     /**
 274      * Returns the id of this component.
 275      * @return {String}
 276      */
 277     getId : function(){
 278         return this.id;
 279     },
 280
 281     /**
 282      * Try to focus this component.
 283      * @param {Boolean} selectText True to also select the text in this component (if applicable)
 284      * @return {Roo.Component} this
 285      */
 286     focus : function(selectText){
 287         if(this.rendered){
 288             this.el.focus();
 289             if(selectText === true){
 290                 this.el.dom.select();
 291             }
 292         }
 293         return this;
 294     },
 295
 296     /** @private */
 297     blur : function(){
 298         if(this.rendered){
 299             this.el.blur();
 300         }
 301         return this;
 302     },
 303
 304     /**
 305      * Disable this component.
 306      * @return {Roo.Component} this
 307      */
 308     disable : function(){
 309         if(this.rendered){
 310             this.onDisable();
 311         }
 312         this.disabled = true;
 313         this.fireEvent("disable", this);
 314         return this;
 315     },
 316
 317         // private
 318     onDisable : function(){
 319         this.getActionEl().addClass(this.disabledClass);
 320         this.el.dom.disabled = true;
 321     },
 322
 323     /**
 324      * Enable this component.
 325      * @return {Roo.Component} this
 326      */
 327     enable : function(){
 328         if(this.rendered){
 329             this.onEnable();
 330         }
 331         this.disabled = false;
 332         this.fireEvent("enable", this);
 333         return this;
 334     },
 335
 336         // private
 337     onEnable : function(){
 338         this.getActionEl().removeClass(this.disabledClass);
 339         this.el.dom.disabled = false;
 340     },
 341
 342     /**
 343      * Convenience function for setting disabled/enabled by boolean.
 344      * @param {Boolean} disabled
 345      */
 346     setDisabled : function(disabled){
 347         this[disabled ? "disable" : "enable"]();
 348     },
 349
 350     /**
 351      * Show this component.
 352      * @return {Roo.Component} this
 353      */
 354     show: function(){
 355         if(this.fireEvent("beforeshow", this) !== false){
 356             this.hidden = false;
 357             if(this.rendered){
 358                 this.onShow();
 359             }
 360             this.fireEvent("show", this);
 361         }
 362         return this;
 363     },
 364
 365     // private
 366     onShow : function(){
 367         var ae = this.getActionEl();
 368         if(this.hideMode == 'visibility'){
 369             ae.dom.style.visibility = "visible";
 370         }else if(this.hideMode == 'offsets'){
 371             ae.removeClass('x-hidden');
 372         }else{
 373             ae.dom.style.display = "";
 374         }
 375     },
 376
 377     /**
 378      * Hide this component.
 379      * @return {Roo.Component} this
 380      */
 381     hide: function(){
 382         if(this.fireEvent("beforehide", this) !== false){
 383             this.hidden = true;
 384             if(this.rendered){
 385                 this.onHide();
 386             }
 387             this.fireEvent("hide", this);
 388         }
 389         return this;
 390     },
 391
 392     // private
 393     onHide : function(){
 394         var ae = this.getActionEl();
 395         if(this.hideMode == 'visibility'){
 396             ae.dom.style.visibility = "hidden";
 397         }else if(this.hideMode == 'offsets'){
 398             ae.addClass('x-hidden');
 399         }else{
 400             ae.dom.style.display = "none";
 401         }
 402     },
 403
 404     /**
 405      * Convenience function to hide or show this component by boolean.
 406      * @param {Boolean} visible True to show, false to hide
 407      * @return {Roo.Component} this
 408      */
 409     setVisible: function(visible){
 410         if(visible) {
 411             this.show();
 412         }else{
 413             this.hide();
 414         }
 415         return this;
 416     },
 417
 418     /**
 419      * Returns true if this component is visible.
 420      */
 421     isVisible : function(){
 422         return this.getActionEl().isVisible();
 423     },
 424
 425     cloneConfig : function(overrides){
 426         overrides = overrides || {};
 427         var id = overrides.id || Roo.id();
 428         var cfg = Roo.applyIf(overrides, this.initialConfig);
 429         cfg.id = id; // prevent dup id
 430         return new this.constructor(cfg);
 431     }
 432 });