* @param {Roo.bootstrap.Modal} this
* @param {Roo.EventObject} e
*/
- "resize" : true
+ "resize" : true,
+ /**
+ * @event close
+ * Fire when the top 'x' close button is pressed.
+ * @param {Roo.bootstrap.Modal} this
+ * @param {Roo.EventObject} e
+ */
+ "close" : true
});
this.buttons = this.buttons || [];
if(this.specificTitle){
title = this.title;
- };
+ }
var header = [];
if (this.allow_close && Roo.bootstrap.version == 3) {
},
+
resize : function()
{
);
if (this.fitwindow) {
+
+
this.setSize(
this.width || Roo.lib.Dom.getViewportWidth(true) - 30,
- this.height || Roo.lib.Dom.getViewportHeight(true) - 60
+ this.height || Roo.lib.Dom.getViewportHeight(true) // catering margin-top 30 margin-bottom 30
);
return;
}
Roo.get(document.body).addClass('modal-open');
if(this.animate){ // element has 'fade' - so stuff happens after .3s ?- not sure why the delay?
- var _this = this;
+
(function(){
this.el.addClass('show');
this.el.addClass('in');
{
//this.el.select('.modal-footer').()
},
- diff : false,
resizeTo: function(w,h)
{
- // skip.. ?? why??
-
this.dialogEl.setWidth(w);
- if (this.diff === false) {
- this.diff = this.dialogEl.getHeight() - this.bodyEl.getHeight();
- }
-
- this.bodyEl.setHeight(h - this.diff);
+
+ var diff = this.headerEl.getHeight() + this.footerEl.getHeight() + 60; // dialog margin-bottom: 30
+ this.bodyEl.setHeight(h - diff);
+
this.fireEvent('resize', this);
-
},
+
setContentSize : function(w, h)
{
* @extends Roo.bootstrap.Component
* Bootstrap Navbar.NavItem class
* @cfg {String} href link to
+ * @cfg {String} button_weight (default | primary | secondary | success | info | warning | danger | link ) default none
+
* @cfg {String} html content of button
* @cfg {String} badge text inside badge
* @cfg {String} badgecls (bg-green|bg-red|bg-yellow)the extra classes for the badge
disabled : false,
animateRef : false,
was_active : false,
+ button_weight : '',
+ button_outline : false,
navLink: false,
var cfg = {
tag: this.tag,
cls: 'nav-item'
-
};
if (this.active) {
if (this.disabled) {
cfg.cls += ' disabled';
}
+
+ // BS4 only?
+ if (this.button_weight.length) {
+ cfg.tag = this.href ? 'a' : 'button';
+ cfg.html = this.html || '';
+ cfg.cls += ' btn btn' + (this.button_outline ? '-outline' : '') + '-' + this.button_weight;
+ if (this.href) {
+ cfg.href = this.href;
+ }
+ if (this.fa) {
+ cfg.html = '<i class="fa fas fa-'+this.fa+'"></i> <span>' + this.html + '</span>';
+ }
+
+ // menu .. should add dropdown-menu class - so no need for carat..
+
+ if (this.badge !== '') {
+
+ cfg.html += ' <span class="badge badge-secondary">' + this.badge + '</span>';
+ }
+ return cfg;
+ }
if (this.href || this.html || this.glyphicon || this.icon || this.fa) {
cfg.cn = [
cfg.cn[0].cls = 'nav-link';
}
if (this.icon) {
- cfg.cn[0].html = '<i class="'+this.icon+'"></i> <span>' + cfg.cn[0].html + '</span>'
+ cfg.cn[0].html = '<i class="'+this.icon+'"></i> <span>' + cfg.cn[0].html + '</span>';
}
if (this.fa) {
- cfg.cn[0].html = '<i class="fa fas fa-'+this.fa+'"></i> <span>' + cfg.cn[0].html + '</span>'
+ cfg.cn[0].html = '<i class="fa fas fa-'+this.fa+'"></i> <span>' + cfg.cn[0].html + '</span>';
}
if(this.glyphicon) {
cfg.cn[0].html = '<span class="glyphicon glyphicon-' + this.glyphicon + '"></span> ' + cfg.cn[0].html;
}
var ret = Roo.bootstrap.NavItem.superclass.onRender.call(this, ct, position);
- this.navLink = this.el.select('nav-link').first();
+ this.navLink = this.el.select('.nav-link',true).first();
return ret;
},
Roo.bootstrap.layout.Border.regions = ["north","south","east","west","center"];
Roo.extend(Roo.bootstrap.layout.Border, Roo.bootstrap.layout.Manager, {
+
+ parent : false, // this might point to a 'nest' or a ???
+
/**
* Creates and adds a new region if it doesn't already exist.
* @param {String} target The target region key (north, south, east, west or center).
delete cfg.items;
}
var nb = false;
+
+ if ( region == 'center') {
+ Roo.log("Center: " + cfg.title);
+ }
+
switch(cfg.xtype)
{
case 'Content': // ContentPanel (el, cfg)
case 'Scroll': // ContentPanel (el, cfg)
case 'View':
- cfg.autoCreate = true;
+ cfg.autoCreate = cfg.autoCreate || true;
ret = new cfg.xns[cfg.xtype](cfg); // new panel!!!!!
//} else {
// var el = this.el.createChild();
position: '', // set by wrapper (eg. north/south etc..)
unrendered_panels : null, // unrendered panels.
+
+ tabPosition : false,
+
+ mgr: false, // points to 'Border'
+
+
createBody : function(){
/** This region's body element
* @type Roo.Element */
/** This region's title element
* @type Roo.Element */
- this.titleEl = dh.append(this.el.dom,
- {
- tag: "div",
- unselectable: "on",
- cls: "roo-unselectable roo-layout-panel-hd breadcrumb roo-layout-title-" + this.position,
- children:[
- {tag: "span", cls: "roo-unselectable roo-layout-panel-hd-text", unselectable: "on", html: " "},
- {tag: "div", cls: "roo-unselectable roo-layout-panel-hd-tools", unselectable: "on"}
- ]}, true);
+ this.titleEl = dh.append(this.el.dom, {
+ tag: "div",
+ unselectable: "on",
+ cls: "roo-unselectable roo-layout-panel-hd breadcrumb roo-layout-title-" + this.position,
+ children:[
+ {tag: "span", cls: "roo-unselectable roo-layout-panel-hd-text", unselectable: "on", html: " "},
+ {tag: "div", cls: "roo-unselectable roo-layout-panel-hd-tools", unselectable: "on"}
+ ]
+ }, true);
this.titleEl.enableDisplayMode();
/** This region's title text element
this.margins = c.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0};
- this.bottomTabs = c.tabPosition != "top";
+ this.tabPosition = [ 'top','bottom', 'west'].indexOf(c.tabPosition) > -1 ? c.tabPosition : "top";
this.autoScroll = c.autoScroll || false;
//this.bodyEl.setStyle("overflow", "hidden"); -- this is set in render?
var ts = new Roo.bootstrap.panel.Tabs({
- el: this.bodyEl.dom,
- tabPosition: this.bottomTabs ? 'bottom' : 'top',
- disableTooltips: this.config.disableTabTips,
- toolbar : this.config.toolbar
- });
+ el: this.bodyEl.dom,
+ region : this,
+ tabPosition: this.tabPosition ? this.tabPosition : 'top',
+ disableTooltips: this.config.disableTabTips,
+ toolbar : this.config.toolbar
+ });
if(this.config.hideTabs){
ts.stripWrap.setDisplayed(false);
+
Roo.bootstrap.layout.North = function(config)
{
config.region = 'north';
}
Roo.bootstrap.layout.Region.prototype.updateBox.call(this, box);
}
-});
-Roo.namespace("Roo.bootstrap.panel");/*
+});Roo.namespace("Roo.bootstrap.panel");/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
config.layout.monitorWindowResize = false; // turn off autosizing
this.layout = config.layout;
this.layout.getEl().addClass("roo-layout-nested-layout");
+ this.layout.parent = this;
return this.layout.addxtype(cfg);
}
-}); /*
+});/*
* Based on:
* Ext JS Library 1.1.1
* Copyright(c) 2006-2007, Ext JS, LLC.
}
if(this.tabPosition == "bottom"){
+ // if tabs are at the bottom = create the body first.
this.bodyEl = Roo.get(this.createBody(this.el.dom));
this.el.addClass("roo-tabs-bottom");
}
- this.stripWrap = Roo.get(this.createStrip(this.el.dom), true);
- this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
- this.stripEl.setVisibilityMode(Roo.Element.DISPLAY);
- this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
+ // next create the tabs holders
+
+ if (this.tabPosition == "west"){
+
+ var reg = this.region; // fake it..
+ while (reg) {
+ if (!reg.mgr.parent) {
+ break;
+ }
+ reg = reg.mgr.parent.region;
+ }
+ Roo.log("got nest?");
+ Roo.log(reg);
+ if (reg.mgr.getRegion('west')) {
+ var ctrdom = reg.mgr.getRegion('west').bodyEl.dom;
+ this.stripWrap = Roo.get(this.createStrip(ctrdom ), true);
+ this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
+ this.stripEl.setVisibilityMode(Roo.Element.DISPLAY);
+ this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
+
+
+ }
+
+
+ } else {
+
+ this.stripWrap = Roo.get(this.createStrip(this.el.dom), true);
+ this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
+ this.stripEl.setVisibilityMode(Roo.Element.DISPLAY);
+ this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
+ }
+
+
if(Roo.isIE){
Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x", "hidden");
}
+
+ // finally - if tabs are at the top, then create the body last..
if(this.tabPosition != "bottom"){
/** The body element that contains {@link Roo.TabPanelItem} bodies. +
* @type Roo.Element
/*
*@cfg {Object} toolbar xtype description of toolbar to show at the right of the tab bar.
*/
- toolbar : false,
+ toolbar : false, // set by caller..
+
+ region : false, /// set by caller
+
+ disableTooltips : true, // not used yet...
/**
* Creates a new {@link Roo.TabPanelItem} by looking for an existing element with the provided id -- if it's not found it creates one.
*/
activate : function(id)
{
+ //Roo.log('activite:' + id);
+
var tab = this.items[id];
if(!tab){
return null;