From: Alan Knowles Date: Fri, 7 Dec 2018 08:15:01 +0000 (+0800) Subject: testing west tabs X-Git-Url: http://git.roojs.org/?p=roojs1;a=commitdiff_plain;h=d05c1b9c441d77053f36414a3720ed1b4ff901ba testing west tabs --- diff --git a/Roo/bootstrap/layout/Border.js b/Roo/bootstrap/layout/Border.js index f38cfb2741..9418c48c8d 100644 --- a/Roo/bootstrap/layout/Border.js +++ b/Roo/bootstrap/layout/Border.js @@ -41,6 +41,9 @@ Roo.bootstrap.layout.Border = function(config){ 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). diff --git a/Roo/bootstrap/layout/Center.js b/Roo/bootstrap/layout/Center.js index f2d9f78d93..a46df3c610 100644 --- a/Roo/bootstrap/layout/Center.js +++ b/Roo/bootstrap/layout/Center.js @@ -42,200 +42,3 @@ Roo.extend(Roo.bootstrap.layout.Center, Roo.bootstrap.layout.Region, { - - - - -Roo.bootstrap.layout.North = function(config) -{ - config.region = 'north'; - config.cursor = 'n-resize'; - - Roo.bootstrap.layout.Split.call(this, config); - - - if(this.split){ - this.split.placement = Roo.bootstrap.SplitBar.TOP; - this.split.orientation = Roo.bootstrap.SplitBar.VERTICAL; - this.split.el.addClass("roo-layout-split-v"); - } - var size = config.initialSize || config.height; - if(typeof size != "undefined"){ - this.el.setHeight(size); - } -}; -Roo.extend(Roo.bootstrap.layout.North, Roo.bootstrap.layout.Split, -{ - orientation: Roo.bootstrap.SplitBar.VERTICAL, - - - - getBox : function(){ - if(this.collapsed){ - return this.collapsedEl.getBox(); - } - var box = this.el.getBox(); - if(this.split){ - box.height += this.split.el.getHeight(); - } - return box; - }, - - updateBox : function(box){ - if(this.split && !this.collapsed){ - box.height -= this.split.el.getHeight(); - this.split.el.setLeft(box.x); - this.split.el.setTop(box.y+box.height); - this.split.el.setWidth(box.width); - } - if(this.collapsed){ - this.updateBody(box.width, null); - } - Roo.bootstrap.layout.Region.prototype.updateBox.call(this, box); - } -}); - - - - - -Roo.bootstrap.layout.South = function(config){ - config.region = 'south'; - config.cursor = 's-resize'; - Roo.bootstrap.layout.Split.call(this, config); - if(this.split){ - this.split.placement = Roo.bootstrap.SplitBar.BOTTOM; - this.split.orientation = Roo.bootstrap.SplitBar.VERTICAL; - this.split.el.addClass("roo-layout-split-v"); - } - var size = config.initialSize || config.height; - if(typeof size != "undefined"){ - this.el.setHeight(size); - } -}; - -Roo.extend(Roo.bootstrap.layout.South, Roo.bootstrap.layout.Split, { - orientation: Roo.bootstrap.SplitBar.VERTICAL, - getBox : function(){ - if(this.collapsed){ - return this.collapsedEl.getBox(); - } - var box = this.el.getBox(); - if(this.split){ - var sh = this.split.el.getHeight(); - box.height += sh; - box.y -= sh; - } - return box; - }, - - updateBox : function(box){ - if(this.split && !this.collapsed){ - var sh = this.split.el.getHeight(); - box.height -= sh; - box.y += sh; - this.split.el.setLeft(box.x); - this.split.el.setTop(box.y-sh); - this.split.el.setWidth(box.width); - } - if(this.collapsed){ - this.updateBody(box.width, null); - } - Roo.bootstrap.layout.Region.prototype.updateBox.call(this, box); - } -}); - -Roo.bootstrap.layout.East = function(config){ - config.region = "east"; - config.cursor = "e-resize"; - Roo.bootstrap.layout.Split.call(this, config); - if(this.split){ - this.split.placement = Roo.bootstrap.SplitBar.RIGHT; - this.split.orientation = Roo.bootstrap.SplitBar.HORIZONTAL; - this.split.el.addClass("roo-layout-split-h"); - } - var size = config.initialSize || config.width; - if(typeof size != "undefined"){ - this.el.setWidth(size); - } -}; -Roo.extend(Roo.bootstrap.layout.East, Roo.bootstrap.layout.Split, { - orientation: Roo.bootstrap.SplitBar.HORIZONTAL, - getBox : function(){ - if(this.collapsed){ - return this.collapsedEl.getBox(); - } - var box = this.el.getBox(); - if(this.split){ - var sw = this.split.el.getWidth(); - box.width += sw; - box.x -= sw; - } - return box; - }, - - updateBox : function(box){ - if(this.split && !this.collapsed){ - var sw = this.split.el.getWidth(); - box.width -= sw; - this.split.el.setLeft(box.x); - this.split.el.setTop(box.y); - this.split.el.setHeight(box.height); - box.x += sw; - } - if(this.collapsed){ - this.updateBody(null, box.height); - } - Roo.bootstrap.layout.Region.prototype.updateBox.call(this, box); - } -}); - -Roo.bootstrap.layout.West = function(config){ - config.region = "west"; - config.cursor = "w-resize"; - - Roo.bootstrap.layout.Split.call(this, config); - if(this.split){ - this.split.placement = Roo.bootstrap.SplitBar.LEFT; - this.split.orientation = Roo.bootstrap.SplitBar.HORIZONTAL; - this.split.el.addClass("roo-layout-split-h"); - } - -}; -Roo.extend(Roo.bootstrap.layout.West, Roo.bootstrap.layout.Split, { - orientation: Roo.bootstrap.SplitBar.HORIZONTAL, - - onRender: function(ctr, pos) - { - Roo.bootstrap.layout.West.superclass.onRender.call(this, ctr,pos); - var size = this.config.initialSize || this.config.width; - if(typeof size != "undefined"){ - this.el.setWidth(size); - } - }, - - getBox : function(){ - if(this.collapsed){ - return this.collapsedEl.getBox(); - } - var box = this.el.getBox(); - if(this.split){ - box.width += this.split.el.getWidth(); - } - return box; - }, - - updateBox : function(box){ - if(this.split && !this.collapsed){ - var sw = this.split.el.getWidth(); - box.width -= sw; - this.split.el.setLeft(box.x+box.width); - this.split.el.setTop(box.y); - this.split.el.setHeight(box.height); - } - if(this.collapsed){ - this.updateBody(null, box.height); - } - Roo.bootstrap.layout.Region.prototype.updateBox.call(this, box); - } -}); diff --git a/Roo/bootstrap/layout/Region.js b/Roo/bootstrap/layout/Region.js index ef59b64e1f..cbfb6680ba 100644 --- a/Roo/bootstrap/layout/Region.js +++ b/Roo/bootstrap/layout/Region.js @@ -75,6 +75,12 @@ Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, { 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 */ @@ -96,15 +102,15 @@ Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, { /** 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 @@ -209,7 +215,7 @@ Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, { 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; @@ -448,11 +454,12 @@ Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, { //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); diff --git a/Roo/bootstrap/layout/West.js b/Roo/bootstrap/layout/West.js index e69de29bb2..d4ccacf984 100644 --- a/Roo/bootstrap/layout/West.js +++ b/Roo/bootstrap/layout/West.js @@ -0,0 +1,50 @@ + +Roo.bootstrap.layout.West = function(config){ + config.region = "west"; + config.cursor = "w-resize"; + + Roo.bootstrap.layout.Split.call(this, config); + if(this.split){ + this.split.placement = Roo.bootstrap.SplitBar.LEFT; + this.split.orientation = Roo.bootstrap.SplitBar.HORIZONTAL; + this.split.el.addClass("roo-layout-split-h"); + } + +}; +Roo.extend(Roo.bootstrap.layout.West, Roo.bootstrap.layout.Split, { + orientation: Roo.bootstrap.SplitBar.HORIZONTAL, + + onRender: function(ctr, pos) + { + Roo.bootstrap.layout.West.superclass.onRender.call(this, ctr,pos); + var size = this.config.initialSize || this.config.width; + if(typeof size != "undefined"){ + this.el.setWidth(size); + } + }, + + getBox : function(){ + if(this.collapsed){ + return this.collapsedEl.getBox(); + } + var box = this.el.getBox(); + if(this.split){ + box.width += this.split.el.getWidth(); + } + return box; + }, + + updateBox : function(box){ + if(this.split && !this.collapsed){ + var sw = this.split.el.getWidth(); + box.width -= sw; + this.split.el.setLeft(box.x+box.width); + this.split.el.setTop(box.y); + this.split.el.setHeight(box.height); + } + if(this.collapsed){ + this.updateBody(null, box.height); + } + Roo.bootstrap.layout.Region.prototype.updateBox.call(this, box); + } +}); \ No newline at end of file diff --git a/Roo/bootstrap/panel/Nest.js b/Roo/bootstrap/panel/Nest.js index 610e8de947..c49661b718 100644 --- a/Roo/bootstrap/panel/Nest.js +++ b/Roo/bootstrap/panel/Nest.js @@ -31,6 +31,7 @@ Roo.bootstrap.panel.Nest = function(config) config.layout.monitorWindowResize = false; // turn off autosizing this.layout = config.layout; this.layout.getEl().addClass("roo-layout-nested-layout"); + this.layout.parent = this; diff --git a/Roo/bootstrap/panel/Tabs.js b/Roo/bootstrap/panel/Tabs.js index 2c593ebe39..253f7192d4 100644 --- a/Roo/bootstrap/panel/Tabs.js +++ b/Roo/bootstrap/panel/Tabs.js @@ -62,16 +62,48 @@ Roo.bootstrap.panel.Tabs = function(config){ } 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 @@ -162,7 +194,11 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, { /* *@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. @@ -315,6 +351,8 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, { */ activate : function(id) { + //Roo.log('activite:' + id); + var tab = this.items[id]; if(!tab){ return null; diff --git a/examples/bootstrap/nested.js b/examples/bootstrap/nested.js index ce64958361..51689a5bba 100644 --- a/examples/bootstrap/nested.js +++ b/examples/bootstrap/nested.js @@ -32,8 +32,17 @@ Example.Nested = new Roo.XComponent({ xtype : 'Region', xns: Roo.bootstrap.layout, autoScroll: false, - tabPosition:'top', - titlebar: true + tabPosition:'west', + titlebar: true + }, + west: { + xtype : 'Region', + xns: Roo.bootstrap.layout, + autoScroll: false, + tabPosition:'west', + titlebar: true, + initialSize: 200, + title : "Menu" }, items : [ { @@ -126,12 +135,14 @@ Example.Nested = new Roo.XComponent({ maxSize: 400, autoScroll:true, collapsible:true, - titlebar: true + titlebar: true, + tabPosition : 'bottom' }, center: { xtype : 'Region', xns: Roo.bootstrap.layout, autoScroll:true, + tabPosition:'west' }, west: { @@ -150,7 +161,15 @@ Example.Nested = new Roo.XComponent({ { xtype : 'Content', xns: Roo.bootstrap.panel, - title : "More Info", + title : "South Tab 1", + region : 'south', + html : 'some body south' + }, + { + xtype : 'Content', + xns: Roo.bootstrap.panel, + title : "South Tab 2", + background : true, region : 'south', html : 'some body south' }, @@ -161,6 +180,13 @@ Example.Nested = new Roo.XComponent({ region : 'center', html : 'some body center' }, + { + xtype : 'Content', + xns: Roo.bootstrap.panel, + title : "the body 2", + region : 'center', + html : 'some body center 2 ' + }, { xtype : 'Content', @@ -298,7 +324,7 @@ Example.Nested = new Roo.XComponent({ }, - { + { xtype : 'Content', xns: Roo.bootstrap.panel, title : "Title Center", diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index 3d4f568459..d299698d16 100644 --- a/roojs-bootstrap-debug.js +++ b/roojs-bootstrap-debug.js @@ -2671,7 +2671,14 @@ Roo.bootstrap.Modal = function(config){ * @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 || []; @@ -2902,11 +2909,16 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { initEvents : function() { if (this.allow_close) { - this.closeEl.on('click', this.hide, this); + this.closeEl.on('click', this.onClosePress, this); } Roo.EventManager.onWindowResize(this.resize, this, true); + }, + + onClosePress : function() + { + }, resize : function() @@ -2920,9 +2932,6 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { var view_height = Roo.lib.Dom.getViewportHeight(true); - Roo.log("dialog height: "+this.height); - Roo.log("view height:" + view_height); - this.setSize( this.width || Roo.lib.Dom.getViewportWidth(true) - 30, this.height || Roo.lib.Dom.getViewportHeight(true) // catering margin-top 30 margin-bottom 30 @@ -35124,6 +35133,9 @@ Roo.bootstrap.layout.Border = function(config){ 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). @@ -35378,6 +35390,11 @@ layout.addxtype({ delete cfg.items; } var nb = false; + + if ( region == 'center') { + Roo.log("Center: " + cfg.title); + } + switch(cfg.xtype) { @@ -35955,6 +35972,12 @@ Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, { 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 */ @@ -35976,15 +35999,15 @@ Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, { /** 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 @@ -36089,7 +36112,7 @@ Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, { 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; @@ -36328,11 +36351,12 @@ Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, { //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); @@ -37023,6 +37047,7 @@ Roo.extend(Roo.bootstrap.layout.Center, Roo.bootstrap.layout.Region, { + Roo.bootstrap.layout.North = function(config) { config.region = 'north'; @@ -37215,8 +37240,7 @@ Roo.extend(Roo.bootstrap.layout.West, Roo.bootstrap.layout.Split, { } 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. @@ -37917,6 +37941,7 @@ Roo.bootstrap.panel.Nest = function(config) config.layout.monitorWindowResize = false; // turn off autosizing this.layout = config.layout; this.layout.getEl().addClass("roo-layout-nested-layout"); + this.layout.parent = this; @@ -38015,7 +38040,7 @@ panel.addxtype({ return this.layout.addxtype(cfg); } -}); /* +});/* * Based on: * Ext JS Library 1.1.1 * Copyright(c) 2006-2007, Ext JS, LLC. @@ -38079,16 +38104,48 @@ Roo.bootstrap.panel.Tabs = function(config){ } 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 @@ -38179,7 +38236,11 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, { /* *@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. @@ -38332,6 +38393,8 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, { */ activate : function(id) { + Roo.log('activite:' + id); + var tab = this.items[id]; if(!tab){ return null; diff --git a/roojs-bootstrap.js b/roojs-bootstrap.js index 0b57d30bf3..cd6616c835 100644 --- a/roojs-bootstrap.js +++ b/roojs-bootstrap.js @@ -108,7 +108,7 @@ this.menu.triggerEl=this.el;this.menu=this.addxtype(Roo.apply({},this.menu));}}, // Roo/bootstrap/MenuSeparator.js Roo.bootstrap.MenuSeparator=function(A){Roo.bootstrap.MenuSeparator.superclass.constructor.call(this,A);};Roo.extend(Roo.bootstrap.MenuSeparator,Roo.bootstrap.Component,{getAutoCreate:function(){var A={cls:'divider',tag:'li'};return A;}}); // Roo/bootstrap/Modal.js -Roo.bootstrap.Modal=function(A){Roo.bootstrap.Modal.superclass.constructor.call(this,A);this.addEvents({"btnclick":true,"resize":true});this.buttons=this.buttons||[];if(this.tmpl){this.tmpl=Roo.factory(this.tmpl);}};Roo.extend(Roo.bootstrap.Modal,Roo.bootstrap.Component,{title:'test dialog',buttons:false,html:false,tmp:false,specificTitle:false,buttonPosition:'right',allow_close:true,animate:true,fitwindow:false,dialogEl:false,bodyEl:false,footerEl:false,titleEl:false,closeEl:false,size:'',max_width:0,max_height:0,fit_content:false,onRender:function(ct,A){Roo.bootstrap.Component.superclass.onRender.call(this,ct,A); +Roo.bootstrap.Modal=function(A){Roo.bootstrap.Modal.superclass.constructor.call(this,A);this.addEvents({"btnclick":true,"resize":true,"close":true});this.buttons=this.buttons||[];if(this.tmpl){this.tmpl=Roo.factory(this.tmpl);}};Roo.extend(Roo.bootstrap.Modal,Roo.bootstrap.Component,{title:'test dialog',buttons:false,html:false,tmp:false,specificTitle:false,buttonPosition:'right',allow_close:true,animate:true,fitwindow:false,dialogEl:false,bodyEl:false,footerEl:false,titleEl:false,closeEl:false,size:'',max_width:0,max_height:0,fit_content:false,onRender:function(ct,A){Roo.bootstrap.Component.superclass.onRender.call(this,ct,A); if(!this.el){var B=Roo.apply({},this.getAutoCreate());B.id=Roo.id();if(this.cls){B.cls+=' '+this.cls;}if(this.style){B.style=this.style;}this.el=Roo.get(document.body).createChild(B,A);}if(this.tabIndex!==undefined){this.el.dom.setAttribute('tabIndex',this.tabIndex); }this.dialogEl=this.el.select('.modal-dialog',true).first();this.bodyEl=this.el.select('.modal-body',true).first();this.closeEl=this.el.select('.modal-header .close',true).first();this.headerEl=this.el.select('.modal-header',true).first();this.titleEl=this.el.select('.modal-title',true).first(); this.footerEl=this.el.select('.modal-footer',true).first();this.maskEl=Roo.DomHelper.append(document.body,{tag:"div",cls:"x-dlg-mask"},true);if(this.buttons.length){Roo.each(this.buttons,function(bb){var b=Roo.apply({},bb);b.xns=b.xns||Roo.bootstrap;b.xtype=b.xtype||'Button'; @@ -116,11 +116,11 @@ if(typeof(b.listeners)=='undefined'){b.listeners={click:this.onButtonClick.creat i0){this.el.setHeight(h);h=this.titleEl&&this.titleEl.isDisplayed()?h-(this.titleEl.getHeight()||0):h; +i++){this.add(this.unrendered_panels[i]);}this.unrendered_panels=null;}},applyConfig:function(c){this.margins=c.margins||this.margins||{top:0,left:0,right:0,bottom:0};this.tabPosition=['top','bottom','west'].indexOf(c.tabPosition)>-1?c.tabPosition:"top";this.autoScroll=c.autoScroll||false; +this.duration=c.duration||.30;this.slideDuration=c.slideDuration||.45;this.config=c;},isVisible:function(){return this.visible;},getBox:function(){var b;b=this.el.getBox(false,true);return b;},getMargins:function(){return this.margins;},updateBox:function(A){if(!this.bodyEl){return; +}this.box=A;if(!this.collapsed){this.el.dom.style.left=A.x+"px";this.el.dom.style.top=A.y+"px";this.updateBody(A.width,A.height);}else{this.collapsedEl.dom.style.left=A.x+"px";this.collapsedEl.dom.style.top=A.y+"px";this.collapsedEl.setSize(A.width,A.height); +}if(this.tabs){this.tabs.autoSizeTabs();}},updateBody:function(w,h){if(w!==null){this.el.setWidth(w);w-=this.el.getBorderWidth("rl");if(this.config.adjustments){w+=this.config.adjustments[0];}}if(h!==null&&h>0){this.el.setHeight(h);h=this.titleEl&&this.titleEl.isDisplayed()?h-(this.titleEl.getHeight()||0):h; h-=this.el.getBorderWidth("tb");if(this.config.adjustments){h+=this.config.adjustments[1];}this.bodyEl.setHeight(h);if(this.tabs){h=this.tabs.syncHeight(h);}}if(this.panelSize){w=w!==null?w:this.panelSize.width;h=h!==null?h:this.panelSize.height;}if(this.activePanel){var el=this.activePanel.getEl(); w=w!==null?w:el.getWidth();h=h!==null?h:el.getHeight();this.panelSize={width:w,height:h};this.activePanel.setSize(w,h);}if(Roo.isIE&&this.tabs){this.tabs.el.repaint();}},getEl:function(){return this.el;},hide:function(){this.el.dom.style.left="-2000px";this.el.hide(); -this.visible=false;this.fireEvent("visibilitychange",this,false);},show:function(){this.el.show();this.visible=true;this.fireEvent("visibilitychange",this,true);},animateCollapse:function(){},animateExpand:function(){},initTabs:function(){var ts=new Roo.bootstrap.panel.Tabs({el:this.bodyEl.dom,tabPosition:this.bottomTabs?'bottom':'top',disableTooltips:this.config.disableTabTips,toolbar:this.config.toolbar} +this.visible=false;this.fireEvent("visibilitychange",this,false);},show:function(){this.el.show();this.visible=true;this.fireEvent("visibilitychange",this,true);},animateCollapse:function(){},animateExpand:function(){},initTabs:function(){var ts=new Roo.bootstrap.panel.Tabs({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);}this.tabs=ts;ts.resizeTabs=this.config.resizeTabs===true;ts.minTabWidth=this.config.minTabWidth||40;ts.maxTabWidth=this.config.maxTabWidth||250;ts.preferredTabWidth=this.config.preferredTabWidth||150; ts.monitorResize=false;ts.bodyEl.addClass('roo-layout-tabs-body');this.panels.each(this.initPanelAsTab,this);},initPanelAsTab:function(A){var ti=this.tabs.addTab(A.getEl().id,A.getTitle(),null,this.config.closeOnTab&&A.isClosable(),A.tpl);if(A.tabTip!==undefined){ti.setTooltip(A.tabTip); }ti.on("activate",function(){this.setActivePanel(A);},this);if(this.config.closeOnTab){ti.on("beforeclose",function(t,e){e.cancel=true;this.remove(A);},this);}A.tabItem=ti;return ti;},updatePanelTitle:function(A,B){if(this.activePanel==A){this.updateTitle(B); @@ -1574,19 +1575,27 @@ break;case "north":return [0,0];break;case "south":return [0,0];break;}},getExpa break;case "north":return [0,-(cm.top+cm.bottom+c.getHeight())];break;case "south":return [0,cm.top+cm.bottom+c.getHeight()];break;}}}); // Roo/bootstrap/layout/Center.js Roo.bootstrap.layout.Center=function(A){A.region="center";Roo.bootstrap.layout.Region.call(this,A);this.visible=true;this.minWidth=A.minWidth||20;this.minHeight=A.minHeight||20;};Roo.extend(Roo.bootstrap.layout.Center,Roo.bootstrap.layout.Region,{hide:function(){} -,show:function(){},getMinWidth:function(){return this.minWidth;},getMinHeight:function(){return this.minHeight;}});Roo.bootstrap.layout.North=function(A){A.region='north';A.cursor='n-resize';Roo.bootstrap.layout.Split.call(this,A);if(this.split){this.split.placement=Roo.bootstrap.SplitBar.TOP; -this.split.orientation=Roo.bootstrap.SplitBar.VERTICAL;this.split.el.addClass("roo-layout-split-v");}var B=A.initialSize||A.height;if(typeof B!="undefined"){this.el.setHeight(B);}};Roo.extend(Roo.bootstrap.layout.North,Roo.bootstrap.layout.Split,{orientation:Roo.bootstrap.SplitBar.VERTICAL,getBox:function(){if(this.collapsed){return this.collapsedEl.getBox(); +,show:function(){},getMinWidth:function(){return this.minWidth;},getMinHeight:function(){return this.minHeight;}}); +// Roo/bootstrap/layout/North.js +Roo.bootstrap.layout.North=function(A){A.region='north';A.cursor='n-resize';Roo.bootstrap.layout.Split.call(this,A);if(this.split){this.split.placement=Roo.bootstrap.SplitBar.TOP;this.split.orientation=Roo.bootstrap.SplitBar.VERTICAL;this.split.el.addClass("roo-layout-split-v"); +}var B=A.initialSize||A.height;if(typeof B!="undefined"){this.el.setHeight(B);}};Roo.extend(Roo.bootstrap.layout.North,Roo.bootstrap.layout.Split,{orientation:Roo.bootstrap.SplitBar.VERTICAL,getBox:function(){if(this.collapsed){return this.collapsedEl.getBox(); }var A=this.el.getBox();if(this.split){A.height+=this.split.el.getHeight();}return A;},updateBox:function(A){if(this.split&&!this.collapsed){A.height-=this.split.el.getHeight();this.split.el.setLeft(A.x);this.split.el.setTop(A.y+A.height);this.split.el.setWidth(A.width); -}if(this.collapsed){this.updateBody(A.width,null);}Roo.bootstrap.layout.Region.prototype.updateBox.call(this,A);}});Roo.bootstrap.layout.South=function(A){A.region='south';A.cursor='s-resize';Roo.bootstrap.layout.Split.call(this,A);if(this.split){this.split.placement=Roo.bootstrap.SplitBar.BOTTOM; -this.split.orientation=Roo.bootstrap.SplitBar.VERTICAL;this.split.el.addClass("roo-layout-split-v");}var B=A.initialSize||A.height;if(typeof B!="undefined"){this.el.setHeight(B);}};Roo.extend(Roo.bootstrap.layout.South,Roo.bootstrap.layout.Split,{orientation:Roo.bootstrap.SplitBar.VERTICAL,getBox:function(){if(this.collapsed){return this.collapsedEl.getBox(); +}if(this.collapsed){this.updateBody(A.width,null);}Roo.bootstrap.layout.Region.prototype.updateBox.call(this,A);}}); +// Roo/bootstrap/layout/South.js +Roo.bootstrap.layout.South=function(A){A.region='south';A.cursor='s-resize';Roo.bootstrap.layout.Split.call(this,A);if(this.split){this.split.placement=Roo.bootstrap.SplitBar.BOTTOM;this.split.orientation=Roo.bootstrap.SplitBar.VERTICAL;this.split.el.addClass("roo-layout-split-v"); +}var B=A.initialSize||A.height;if(typeof B!="undefined"){this.el.setHeight(B);}};Roo.extend(Roo.bootstrap.layout.South,Roo.bootstrap.layout.Split,{orientation:Roo.bootstrap.SplitBar.VERTICAL,getBox:function(){if(this.collapsed){return this.collapsedEl.getBox(); }var A=this.el.getBox();if(this.split){var sh=this.split.el.getHeight();A.height+=sh;A.y-=sh;}return A;},updateBox:function(A){if(this.split&&!this.collapsed){var sh=this.split.el.getHeight();A.height-=sh;A.y+=sh;this.split.el.setLeft(A.x);this.split.el.setTop(A.y-sh); -this.split.el.setWidth(A.width);}if(this.collapsed){this.updateBody(A.width,null);}Roo.bootstrap.layout.Region.prototype.updateBox.call(this,A);}});Roo.bootstrap.layout.East=function(A){A.region="east";A.cursor="e-resize";Roo.bootstrap.layout.Split.call(this,A); -if(this.split){this.split.placement=Roo.bootstrap.SplitBar.RIGHT;this.split.orientation=Roo.bootstrap.SplitBar.HORIZONTAL;this.split.el.addClass("roo-layout-split-h");}var B=A.initialSize||A.width;if(typeof B!="undefined"){this.el.setWidth(B);}};Roo.extend(Roo.bootstrap.layout.East,Roo.bootstrap.layout.Split,{orientation:Roo.bootstrap.SplitBar.HORIZONTAL,getBox:function(){if(this.collapsed){return this.collapsedEl.getBox(); +this.split.el.setWidth(A.width);}if(this.collapsed){this.updateBody(A.width,null);}Roo.bootstrap.layout.Region.prototype.updateBox.call(this,A);}}); +// Roo/bootstrap/layout/East.js +Roo.bootstrap.layout.East=function(A){A.region="east";A.cursor="e-resize";Roo.bootstrap.layout.Split.call(this,A);if(this.split){this.split.placement=Roo.bootstrap.SplitBar.RIGHT;this.split.orientation=Roo.bootstrap.SplitBar.HORIZONTAL;this.split.el.addClass("roo-layout-split-h"); +}var B=A.initialSize||A.width;if(typeof B!="undefined"){this.el.setWidth(B);}};Roo.extend(Roo.bootstrap.layout.East,Roo.bootstrap.layout.Split,{orientation:Roo.bootstrap.SplitBar.HORIZONTAL,getBox:function(){if(this.collapsed){return this.collapsedEl.getBox(); }var A=this.el.getBox();if(this.split){var sw=this.split.el.getWidth();A.width+=sw;A.x-=sw;}return A;},updateBox:function(A){if(this.split&&!this.collapsed){var sw=this.split.el.getWidth();A.width-=sw;this.split.el.setLeft(A.x);this.split.el.setTop(A.y);this.split.el.setHeight(A.height); -A.x+=sw;}if(this.collapsed){this.updateBody(null,A.height);}Roo.bootstrap.layout.Region.prototype.updateBox.call(this,A);}});Roo.bootstrap.layout.West=function(A){A.region="west";A.cursor="w-resize";Roo.bootstrap.layout.Split.call(this,A);if(this.split){this.split.placement=Roo.bootstrap.SplitBar.LEFT; -this.split.orientation=Roo.bootstrap.SplitBar.HORIZONTAL;this.split.el.addClass("roo-layout-split-h");}};Roo.extend(Roo.bootstrap.layout.West,Roo.bootstrap.layout.Split,{orientation:Roo.bootstrap.SplitBar.HORIZONTAL,onRender:function(A,B){Roo.bootstrap.layout.West.superclass.onRender.call(this,A,B); -var C=this.config.initialSize||this.config.width;if(typeof C!="undefined"){this.el.setWidth(C);}},getBox:function(){if(this.collapsed){return this.collapsedEl.getBox();}var A=this.el.getBox();if(this.split){A.width+=this.split.el.getWidth();}return A;},updateBox:function(A){if(this.split&&!this.collapsed){var sw=this.split.el.getWidth(); -A.width-=sw;this.split.el.setLeft(A.x+A.width);this.split.el.setTop(A.y);this.split.el.setHeight(A.height);}if(this.collapsed){this.updateBody(null,A.height);}Roo.bootstrap.layout.Region.prototype.updateBox.call(this,A);}}); +A.x+=sw;}if(this.collapsed){this.updateBody(null,A.height);}Roo.bootstrap.layout.Region.prototype.updateBox.call(this,A);}}); +// Roo/bootstrap/layout/West.js +Roo.bootstrap.layout.West=function(A){A.region="west";A.cursor="w-resize";Roo.bootstrap.layout.Split.call(this,A);if(this.split){this.split.placement=Roo.bootstrap.SplitBar.LEFT;this.split.orientation=Roo.bootstrap.SplitBar.HORIZONTAL;this.split.el.addClass("roo-layout-split-h"); +}};Roo.extend(Roo.bootstrap.layout.West,Roo.bootstrap.layout.Split,{orientation:Roo.bootstrap.SplitBar.HORIZONTAL,onRender:function(A,B){Roo.bootstrap.layout.West.superclass.onRender.call(this,A,B);var C=this.config.initialSize||this.config.width;if(typeof C!="undefined"){this.el.setWidth(C); +}},getBox:function(){if(this.collapsed){return this.collapsedEl.getBox();}var A=this.el.getBox();if(this.split){A.width+=this.split.el.getWidth();}return A;},updateBox:function(A){if(this.split&&!this.collapsed){var sw=this.split.el.getWidth();A.width-=sw; +this.split.el.setLeft(A.x+A.width);this.split.el.setTop(A.y);this.split.el.setHeight(A.height);}if(this.collapsed){this.updateBody(null,A.height);}Roo.bootstrap.layout.Region.prototype.updateBox.call(this,A);}}); // Roo/bootstrap/panel/panel-ns.js Roo.namespace("Roo.bootstrap.panel"); // Roo/bootstrap/panel/Content.js @@ -1616,24 +1625,27 @@ if(A.background){this.on('activate',function(gp){if(!gp.grid.rendered){gp.grid.r },getGrid:function(){return this.grid;},setSize:function(A,B){if(!this.ignoreResize(A,B)){var C=this.grid;var D=this.adjustForComponents(A,B);var E=C.getGridEl();E.setSize(D.width,D.height);C.autoSize();}},beforeSlide:function(){this.grid.getView().scroller.clip(); },afterSlide:function(){this.grid.getView().scroller.unclip();},destroy:function(){this.grid.destroy();delete this.grid;Roo.bootstrap.panel.Grid.superclass.destroy.call(this);}}); // Roo/bootstrap/panel/Nest.js -Roo.bootstrap.panel.Nest=function(A){A.el=A.layout.getEl();Roo.bootstrap.panel.Nest.superclass.constructor.call(this,A);A.layout.monitorWindowResize=false;this.layout=A.layout;this.layout.getEl().addClass("roo-layout-nested-layout");};Roo.extend(Roo.bootstrap.panel.Nest,Roo.bootstrap.panel.Content,{setSize:function(A,B){if(!this.ignoreResize(A,B)){var C=this.adjustForComponents(A,B); -var el=this.layout.getEl();if(C.height<1){el.setWidth(C.width);}else{el.setSize(C.width,C.height);}var D=el.dom.offsetWidth;this.layout.layout();if(Roo.isIE&&!this.initialized){this.initialized=true;this.layout.layout();}}},setActiveState:function(A){this.active=A; -this.setActiveClass(A);if(!A){this.fireEvent("deactivate",this);return;}this.fireEvent("activate",this);if(!this.layout){return;}var B=false;for(var r in this.layout.regions){B=this.layout.getRegion(r);if(B.getActivePanel()){B.setActivePanel(B.getActivePanel()); -continue;}if(!B.panels.length){continue;}B.showPanel(B.getPanel(0));}},getLayout:function(){return this.layout;},addxtype:function(A){return this.layout.addxtype(A);}}); +Roo.bootstrap.panel.Nest=function(A){A.el=A.layout.getEl();Roo.bootstrap.panel.Nest.superclass.constructor.call(this,A);A.layout.monitorWindowResize=false;this.layout=A.layout;this.layout.getEl().addClass("roo-layout-nested-layout");this.layout.parent=this; +};Roo.extend(Roo.bootstrap.panel.Nest,Roo.bootstrap.panel.Content,{setSize:function(A,B){if(!this.ignoreResize(A,B)){var C=this.adjustForComponents(A,B);var el=this.layout.getEl();if(C.height<1){el.setWidth(C.width);}else{el.setSize(C.width,C.height);}var D=el.dom.offsetWidth; +this.layout.layout();if(Roo.isIE&&!this.initialized){this.initialized=true;this.layout.layout();}}},setActiveState:function(A){this.active=A;this.setActiveClass(A);if(!A){this.fireEvent("deactivate",this);return;}this.fireEvent("activate",this);if(!this.layout){return; +}var B=false;for(var r in this.layout.regions){B=this.layout.getRegion(r);if(B.getActivePanel()){B.setActivePanel(B.getActivePanel());continue;}if(!B.panels.length){continue;}B.showPanel(B.getPanel(0));}},getLayout:function(){return this.layout;},addxtype:function(A){return this.layout.addxtype(A); +}}); // Roo/bootstrap/panel/Tabs.js Roo.bootstrap.panel.Tabs=function(A){this.el=Roo.get(A.el);delete A.el;if(A){if(typeof A=="boolean"){this.tabPosition=A?"bottom":"top";}else{Roo.apply(this,A);}}if(this.tabPosition=="bottom"){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);if(Roo.isIE){Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x","hidden"); +}if(this.tabPosition=="west"){var B=this.region;while(B){if(!B.mgr.parent){break;}B=B.mgr.parent.region;}Roo.log("got nest?");Roo.log(B);if(B.mgr.getRegion('west')){var C=B.mgr.getRegion('west').bodyEl.dom;this.stripWrap=Roo.get(this.createStrip(C),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"); }if(this.tabPosition!="bottom"){this.bodyEl=Roo.get(this.createBody(this.el.dom));this.el.addClass("roo-tabs-top");}this.items=[];this.bodyEl.setStyle("position","relative");this.active=null;this.activateDelegate=this.activate.createDelegate(this);this.addEvents({"tabchange":true,"beforetabchange":true} -);Roo.EventManager.onWindowResize(this.onResize,this);this.cpad=this.el.getPadding("lr");this.hiddenCount=0;if(this.toolbar){alert("no toolbar support yet");this.toolbar=false;}Roo.bootstrap.panel.Tabs.superclass.constructor.call(this);};Roo.extend(Roo.bootstrap.panel.Tabs,Roo.util.Observable,{tabPosition:"top",currentTabWidth:0,minTabWidth:40,maxTabWidth:250,preferredTabWidth:175,resizeTabs:false,monitorResize:true,toolbar:false,addTab:function(id,A,B,C,D){var E=new Roo.bootstrap.panel.TabItem({panel:this,id:id,text:A,closable:C,tpl:D} +);Roo.EventManager.onWindowResize(this.onResize,this);this.cpad=this.el.getPadding("lr");this.hiddenCount=0;if(this.toolbar){alert("no toolbar support yet");this.toolbar=false;}Roo.bootstrap.panel.Tabs.superclass.constructor.call(this);};Roo.extend(Roo.bootstrap.panel.Tabs,Roo.util.Observable,{tabPosition:"top",currentTabWidth:0,minTabWidth:40,maxTabWidth:250,preferredTabWidth:175,resizeTabs:false,monitorResize:true,toolbar:false,region:false,disableTooltips:true,addTab:function(id,A,B,C,D){var E=new Roo.bootstrap.panel.TabItem({panel:this,id:id,text:A,closable:C,tpl:D} );this.addTabItem(E);if(B){E.setContent(B);}return E;},getTab:function(id){return this.items[id];},hideTab:function(id){var t=this.items[id];if(!t.isHidden()){t.setHidden(true);this.hiddenCount++;this.autoSizeTabs();}},unhideTab:function(id){var t=this.items[id]; if(t.isHidden()){t.setHidden(false);this.hiddenCount--;this.autoSizeTabs();}},addTabItem:function(A){this.items[A.id]=A;this.items.push(A);this.autoSizeTabs();},removeTab:function(id){var A=this.items;var B=A[id];if(!B){return;}var C=A.indexOf(B);if(this.active==B&&A.length>1){var D=this.getNextAvailable(C); if(D){D.activate();}}this.stripEl.dom.removeChild(B.pnode.dom);if(B.bodyEl.dom.parentNode==this.bodyEl.dom){this.bodyEl.dom.removeChild(B.bodyEl.dom);}A.splice(C,1);delete this.items[B.id];B.fireEvent("close",B);B.purgeListeners();this.autoSizeTabs();},getNextAvailable:function(A){var B=this.items; var C=A;while(C=0){var D=B[--C];if(D&&!D.isHidden()){return D;}}return null;},disableTab:function(id){var A=this.items[id];if(A&&this.active!=A){A.disable();}},enableTab:function(id){var A=this.items[id]; -A.enable();},activate:function(id){var A=this.items[id];if(!A){return null;}if(A==this.active||A.disabled){return A;}var e={};this.fireEvent("beforetabchange",this,e,A);if(e.cancel!==true&&!A.disabled){if(this.active){this.active.hide();}this.active=this.items[id]; -this.active.show();this.fireEvent("tabchange",this,this.active);}return A;},getActiveTab:function(){return this.active;},syncHeight:function(A){var B=(A||this.el.getHeight())-this.el.getBorderWidth("tb")-this.el.getPadding("tb");var bm=this.bodyEl.getMargins(); -var C=B-(this.stripWrap.getHeight()||0)-(bm.top+bm.bottom);this.bodyEl.setHeight(C);return C;},onResize:function(){if(this.monitorResize){this.autoSizeTabs();}},beginUpdate:function(){this.updating=true;},endUpdate:function(){this.updating=false;this.autoSizeTabs(); -},autoSizeTabs:function(){var A=this.items.length;var B=A-this.hiddenCount;if(B<2){this.stripEl.hide();}else{this.stripEl.show();}if(!this.resizeTabs||A<1||B<1||this.updating){return;}var w=Math.max(this.el.getWidth()-this.cpad,10);var C=Math.floor(w/B);var b=this.stripBody; -if(b.getWidth()>w){var D=this.items;this.setTabWidth(Math.max(C,this.minTabWidth)-2);if(Cw){var D=this.items;this.setTabWidth(Math.max(C,this.minTabWidth)-2);if(C