/**
* @class Roo.bootstrap.Component
* @extends Roo.Component
+ * @abstract
+ * @children Roo.bootstrap.Component
* Bootstrap Component base class
* @cfg {String} cls css class
* @cfg {String} style any extra css
* @cfg {string} name Specifies name attribute
* @cfg {string} tooltip Text for the tooltip
* @cfg {string} container_method method to fetch parents container element (used by NavHeaderbar - getHeaderChildContainer)
- *
+ * @cfg {string|object} visibilityEl (el|parent) What element to use for visibility (@see getVisibilityEl())
+
* @constructor
* Do not use directly - it does not do anything..
* @param {Object} config The config object
var cfg = Roo.apply({}, this.getAutoCreate());
- cfg.id = Roo.id();
+
+ cfg.id = this.id || Roo.id();
// fill in the extra attributes
if (this.xattr && typeof(this.xattr) =='object') {
}
if (this.cls) {
- cfg.cls = (typeof(cfg.cls) == 'undefined') ? this.cls : cfg.cls + ' ' + this.cls;
+ cfg.cls = (typeof(cfg.cls) == 'undefined' ? this.cls : cfg.cls) + ' ' + this.cls;
}
if (this.style) { // fixme needs to support more complex style data.
- cfg.style = this.style;
+ cfg.style = (typeof(cfg.style) == 'undefined' ? this.style : cfg.style) + '; ' + this.style;
}
if(this.name){
cfg.name = this.name;
}
-
-
this.el = ct.createChild(cfg, position);
if (this.tooltip) {
if(this.tabIndex !== undefined){
this.el.dom.setAttribute('tabIndex', this.tabIndex);
}
+
this.initEvents();
-
},
/**
* Fetch the element to add children to
{
return this.el;
},
+ getDocumentBody : function() // used by menus - as they are attached to the body so zIndexes work
+ {
+ return Roo.get(document.body);
+ },
+
/**
* Fetch the element to display the tooltip on.
* @return {Roo.Element} defaults to this.el
var cn = this;
cn = Roo.factory(tree);
+ //Roo.log(['addxtype', cn]);
cn.parentType = this.xtype; //??
cn.parentId = this.id;
if (!has_flexy_each || !build_from_html || is_body || !page_has_body) {
if(!has_flexy_if || typeof(tree.name) == 'undefined' || !build_from_html || is_body || !page_has_body){
- return this.addxtypeChild(tree,cntr);
+ return this.addxtypeChild(tree,cntr, is_body);
}
var echild =self_cntr_el ? self_cntr_el.child('>*[name=' + tree.name + ']') : false;
ret = this.addxtypeChild(Roo.apply({}, tree),cntr);
}
+
return ret;
},
- addxtypeChild : function (tree, cntr)
+
+ addxtypeChild : function (tree, cntr, is_body)
{
Roo.debug && Roo.log('addxtypeChild:' + cntr);
var cn = this;
var has_flexy = (typeof(tree['flexy:if']) != 'undefined') ||
(typeof(tree['flexy:foreach']) != 'undefined');
+
-
- skip_children = false;
+ skip_children = false;
// render the element if it's not BODY.
- if (tree.xtype != 'Body') {
+ if (!is_body) {
+
+ // if parent was disabled, then do not try and create the children..
+ if(!this[cntr](true)){
+ tree.items = [];
+ return tree;
+ }
cn = Roo.factory(tree);
var self_cntr_el = Roo.get(this[cntr](false));
var echild =self_cntr_el ? self_cntr_el.child('>*[xtype]') : false;
if (echild) {
- Roo.log(Roo.XComponent.build_from_html);
- Roo.log("got echild:");
- Roo.log(echild);
+ //Roo.log(Roo.XComponent.build_from_html);
+ //Roo.log("got echild:");
+ //Roo.log(echild);
}
// there is a scenario where some of the child elements are flexy:if (and all of the same type)
// and are not displayed -this causes this to use up the wrong element when matching.
// multiple copies here...
//Roo.log('render');
//Roo.log(this[cntr]());
- cn.render(this[cntr](true));
+ // some elements do not have render methods.. like the layouts...
+ /*
+ if(this[cntr](true) === false){
+ cn.items = [];
+ return cn;
+ }
+ */
+ cn.render && cn.render(this[cntr](true));
+
}
// then add the element..
}
-
-
+
// handle the kids..
var nitems = [];
*/
if (!tree.items || !tree.items.length) {
cn.items = nitems;
+ //Roo.log(["no children", this]);
+
return cn;
}
+
var items = tree.items;
delete tree.items;
// add the items..
if (!skip_children) {
for(var i =0;i < items.length;i++) {
+ // Roo.log(['add child', items[i]]);
nitems.push(cn.addxtype(Roo.apply({}, items[i])));
}
}
cn.items = nitems;
- this.fireEvent('childrenrendered', this);
+ //Roo.log("fire childrenrendered");
+
+ cn.fireEvent('childrenrendered', this);
return cn;
- }
+ },
+
+ /**
+ * Set the element that will be used to show or hide
+ */
+ setVisibilityEl : function(el)
+ {
+ this.visibilityEl = el;
+ },
+ /**
+ * Get the element that will be used to show or hide
+ */
+ getVisibilityEl : function()
+ {
+ if (typeof(this.visibilityEl) == 'object') {
+ return this.visibilityEl;
+ }
+
+ if (typeof(this.visibilityEl) == 'string') {
+ return this.visibilityEl == 'parent' ? this.parent().getEl() : this.getEl();
+ }
+
+ return this.getEl();
+ },
+ /**
+ * Show a component - removes 'hidden' class
+ */
+ show : function()
+ {
+ if(!this.getVisibilityEl()){
+ return;
+ }
+
+ this.getVisibilityEl().removeClass(['hidden','d-none']);
+
+ this.fireEvent('show', this);
+
+
+ },
+ /**
+ * Hide a component - adds 'hidden' class
+ */
+ hide: function()
+ {
+ if(!this.getVisibilityEl()){
+ return;
+ }
+
+ this.getVisibilityEl().addClass(['hidden','d-none']);
+
+ this.fireEvent('hide', this);
+
+ }
});
\ No newline at end of file
projects / roojs1 / blobdiff