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

   1 /*
   2  * - LGPL
   3  *
   4  * base class for bootstrap elements.
   5  *
   6  */
   7
   8 Roo.bootstrap = Roo.bootstrap || {};
   9 /**
  10  * @class Roo.bootstrap.Component
  11  * @extends Roo.Component
  12  * Bootstrap Component base class
  13  * @cfg {String} cls css class
  14  * @cfg {String} style any extra css
  15  * @cfg {Object} xattr extra attributes to add to 'element' (used by builder to store stuff.)
  16  * @cfg {Boolean} can_build_overlaid  True if element can be rebuild from a HTML page
  17  * @cfg {string} dataId cutomer id
  18  * @cfg {string} name Specifies name attribute
  19  * @cfg {string} tooltip  Text for the tooltip
  20  * @cfg {string} container_method method to fetch parents container element (used by NavHeaderbar -  getHeaderChildContainer)
  21  *
  22  * @constructor
  23  * Do not use directly - it does not do anything..
  24  * @param {Object} config The config object
  25  */
  26
  27
  28
  29 Roo.bootstrap.Component = function(config){
  30     Roo.bootstrap.Component.superclass.constructor.call(this, config);
  31
  32     this.addEvents({
  33         /**
  34          * @event childrenrendered
  35          * Fires when the children have been rendered..
  36          * @param {Roo.bootstrap.Component} this
  37          */
  38         "childrenrendered" : true
  39
  40
  41
  42     });
  43
  44
  45 };
  46
  47 Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
  48
  49
  50     allowDomMove : false, // to stop relocations in parent onRender...
  51
  52     cls : false,
  53
  54     style : false,
  55
  56     autoCreate : false,
  57
  58     tooltip : null,
  59     /**
  60      * Initialize Events for the element
  61      */
  62     initEvents : function() { },
  63
  64     xattr : false,
  65
  66     parentId : false,
  67
  68     can_build_overlaid : true,
  69
  70     container_method : false,
  71
  72     dataId : false,
  73
  74     name : false,
  75
  76     parent: function() {
  77         // returns the parent component..
  78         return Roo.ComponentMgr.get(this.parentId)
  79
  80
  81     },
  82
  83     // private
  84     onRender : function(ct, position)
  85     {
  86        // Roo.log("Call onRender: " + this.xtype);
  87
  88         Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
  89
  90         if(this.el){
  91             if (this.el.attr('xtype')) {
  92                 this.el.attr('xtypex', this.el.attr('xtype'));
  93                 this.el.dom.removeAttribute('xtype');
  94
  95                 this.initEvents();
  96             }
  97
  98             return;
  99         }
 100
 101
 102
 103         var cfg = Roo.apply({},  this.getAutoCreate());
 104
 105         cfg.id = this.id || Roo.id();
 106
 107         // fill in the extra attributes
 108         if (this.xattr && typeof(this.xattr) =='object') {
 109             for (var i in this.xattr) {
 110                 cfg[i] = this.xattr[i];
 111             }
 112         }
 113
 114         if(this.dataId){
 115             cfg.dataId = this.dataId;
 116         }
 117
 118         if (this.cls) {
 119             cfg.cls = (typeof(cfg.cls) == 'undefined') ? this.cls : cfg.cls + ' ' + this.cls;
 120         }
 121
 122         if (this.style) { // fixme needs to support more complex style data.
 123             cfg.style = this.style;
 124         }
 125
 126         if(this.name){
 127             cfg.name = this.name;
 128         }
 129
 130         this.el = ct.createChild(cfg, position);
 131
 132         if (this.tooltip) {
 133             this.tooltipEl().attr('tooltip', this.tooltip);
 134         }
 135
 136         if(this.tabIndex !== undefined){
 137             this.el.dom.setAttribute('tabIndex', this.tabIndex);
 138         }
 139
 140         this.initEvents();
 141
 142     },
 143     /**
 144      * Fetch the element to add children to
 145      * @return {Roo.Element} defaults to this.el
 146      */
 147     getChildContainer : function()
 148     {
 149         return this.el;
 150     },
 151     /**
 152      * Fetch the element to display the tooltip on.
 153      * @return {Roo.Element} defaults to this.el
 154      */
 155     tooltipEl : function()
 156     {
 157         return this.el;
 158     },
 159
 160     addxtype  : function(tree,cntr)
 161     {
 162         var cn = this;
 163
 164         cn = Roo.factory(tree);
 165         //Roo.log(['addxtype', cn]);
 166
 167         cn.parentType = this.xtype; //??
 168         Roo.log(['this.id', this.id]);
 169         cn.parentId = this.id;
 170
 171         cntr = (typeof(cntr) == 'undefined' ) ? 'getChildContainer' : cntr;
 172         if (typeof(cn.container_method) == 'string') {
 173             cntr = cn.container_method;
 174         }
 175
 176
 177         var has_flexy_each =  (typeof(tree['flexy:foreach']) != 'undefined');
 178
 179         var has_flexy_if =  (typeof(tree['flexy:if']) != 'undefined');
 180
 181         var build_from_html =  Roo.XComponent.build_from_html;
 182
 183         var is_body  = (tree.xtype == 'Body') ;
 184
 185         var page_has_body = (Roo.get(document.body).attr('xtype') == 'Roo.bootstrap.Body');
 186
 187         var self_cntr_el = Roo.get(this[cntr](false));
 188
 189         // do not try and build conditional elements
 190         if ((has_flexy_each || has_flexy_if || this.can_build_overlaid == false ) && build_from_html) {
 191             return false;
 192         }
 193
 194         if (!has_flexy_each || !build_from_html || is_body || !page_has_body) {
 195             if(!has_flexy_if || typeof(tree.name) == 'undefined' || !build_from_html || is_body || !page_has_body){
 196                 return this.addxtypeChild(tree,cntr, is_body);
 197             }
 198
 199             var echild =self_cntr_el ? self_cntr_el.child('>*[name=' + tree.name + ']') : false;
 200
 201             if(echild){
 202                 return this.addxtypeChild(Roo.apply({}, tree),cntr);
 203             }
 204
 205             Roo.log('skipping render');
 206             return cn;
 207
 208         }
 209
 210         var ret = false;
 211         if (!build_from_html) {
 212             return false;
 213         }
 214
 215         // this i think handles overlaying multiple children of the same type
 216         // with the sam eelement.. - which might be buggy..
 217         while (true) {
 218             var echild =self_cntr_el ? self_cntr_el.child('>*[xtype]') : false;
 219
 220             if (!echild) {
 221                 break;
 222             }
 223
 224             if (echild && echild.attr('xtype').split('.').pop() != cn.xtype) {
 225                 break;
 226             }
 227
 228             ret = this.addxtypeChild(Roo.apply({}, tree),cntr);
 229         }
 230
 231         return ret;
 232     },
 233
 234     addxtypeChild : function (tree, cntr, is_body)
 235     {
 236         Roo.debug && Roo.log('addxtypeChild:' + cntr);
 237         var cn = this;
 238         cntr = (typeof(cntr) == 'undefined' ) ? 'getChildContainer' : cntr;
 239
 240
 241         var has_flexy = (typeof(tree['flexy:if']) != 'undefined') ||
 242                     (typeof(tree['flexy:foreach']) != 'undefined');
 243
 244
 245
 246          skip_children = false;
 247         // render the element if it's not BODY.
 248         if (!is_body) {
 249
 250             cn = Roo.factory(tree);
 251
 252             cn.parentType = this.xtype; //??
 253             cn.parentId = this.id;
 254
 255             var build_from_html =  Roo.XComponent.build_from_html;
 256
 257
 258             // does the container contain child eleemnts with 'xtype' attributes.
 259             // that match this xtype..
 260             // note - when we render we create these as well..
 261             // so we should check to see if body has xtype set.
 262             if (build_from_html && Roo.get(document.body).attr('xtype') == 'Roo.bootstrap.Body') {
 263
 264                 var self_cntr_el = Roo.get(this[cntr](false));
 265                 var echild =self_cntr_el ? self_cntr_el.child('>*[xtype]') : false;
 266                 if (echild) {
 267                     //Roo.log(Roo.XComponent.build_from_html);
 268                     //Roo.log("got echild:");
 269                     //Roo.log(echild);
 270                 }
 271                 // there is a scenario where some of the child elements are flexy:if (and all of the same type)
 272                 // and are not displayed -this causes this to use up the wrong element when matching.
 273                 // at present the only work around for this is to nest flexy:if elements in another element that is always rendered.
 274
 275
 276                 if (echild && echild.attr('xtype').split('.').pop() == cn.xtype) {
 277                   //  Roo.log("found child for " + this.xtype +": " + echild.attr('xtype') );
 278
 279
 280
 281                     cn.el = echild;
 282                   //  Roo.log("GOT");
 283                     //echild.dom.removeAttribute('xtype');
 284                 } else {
 285                     Roo.debug && Roo.log("MISSING " + cn.xtype + " on child of " + (this.el ? this.el.attr('xbuilderid') : 'no parent'));
 286                     Roo.debug && Roo.log(self_cntr_el);
 287                     Roo.debug && Roo.log(echild);
 288                     Roo.debug && Roo.log(cn);
 289                 }
 290             }
 291
 292
 293
 294             // if object has flexy:if - then it may or may not be rendered.
 295             if (build_from_html && has_flexy && !cn.el &&  cn.can_build_overlaid) {
 296                 // skip a flexy if element.
 297                 Roo.debug && Roo.log('skipping render');
 298                 Roo.debug && Roo.log(tree);
 299                 if (!cn.el) {
 300                     Roo.debug && Roo.log('skipping all children');
 301                     skip_children = true;
 302                 }
 303
 304              } else {
 305
 306                 // actually if flexy:foreach is found, we really want to create
 307                 // multiple copies here...
 308                 //Roo.log('render');
 309                 //Roo.log(this[cntr]());
 310                 cn.render(this[cntr](true));
 311              }
 312             // then add the element..
 313         }
 314
 315
 316         // handle the kids..
 317
 318         var nitems = [];
 319         /*
 320         if (typeof (tree.menu) != 'undefined') {
 321             tree.menu.parentType = cn.xtype;
 322             tree.menu.triggerEl = cn.el;
 323             nitems.push(cn.addxtype(Roo.apply({}, tree.menu)));
 324
 325         }
 326         */
 327         if (!tree.items || !tree.items.length) {
 328             cn.items = nitems;
 329             //Roo.log(["no children", this]);
 330
 331             return cn;
 332         }
 333
 334         var items = tree.items;
 335         delete tree.items;
 336
 337         //Roo.log(items.length);
 338             // add the items..
 339         if (!skip_children) {
 340             for(var i =0;i < items.length;i++) {
 341               //  Roo.log(['add child', items[i]]);
 342                 nitems.push(cn.addxtype(Roo.apply({}, items[i])));
 343             }
 344         }
 345
 346         cn.items = nitems;
 347
 348         //Roo.log("fire childrenrendered");
 349
 350         cn.fireEvent('childrenrendered', this);
 351
 352         return cn;
 353     },
 354     /**
 355      * Show a component - removes 'hidden' class
 356      */
 357     show : function()
 358     {
 359         if (this.el) {
 360             this.el.removeClass('hidden');
 361         }
 362     },
 363     /**
 364      * Hide a component - adds 'hidden' class
 365      */
 366     hide: function()
 367     {
 368         if (this.el && !this.el.hasClass('hidden')) {
 369             this.el.addClass('hidden');
 370         }
 371
 372     }
 373 });
 374
 375