/**
* @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
}
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){
{
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
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.getEl()){
+ if(!this.getVisibilityEl()){
return;
}
+
+ this.getVisibilityEl().removeClass(['hidden','d-none']);
+
+ this.fireEvent('show', this);
- this.getEl().removeClass('hidden');
},
/**
*/
hide: function()
{
- if(!this.getEl() || this.getEl().hasClass('hidden')){
+ if(!this.getVisibilityEl()){
return;
}
- this.getEl().addClass('hidden');
+ this.getVisibilityEl().addClass(['hidden','d-none']);
+
+ this.fireEvent('hide', this);
}
});