123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537 |
- /*
- * Ext JS Library 2.0 Copyright(c) 2006-2007, Ext JS, LLC. licensing@extjs.com
- *
- * http://extjs.com/license
- */
- Ext.TabPanel = Ext.extend(Ext.Panel, {
- monitorResize : true,
- deferredRender : true,
- tabWidth : 120,
- minTabWidth : 30,
- resizeTabs : false,
- enableTabScroll : false,
- scrollIncrement : 0,
- scrollRepeatInterval : 400,
- scrollDuration : 0.35,
- animScroll : true,
- tabPosition : "top",
- baseCls : "x-tab-panel",
- autoTabs : false,
- autoTabSelector : "div.x-tab",
- itemCls : "x-tab-item",
- activeTab : null,
- tabMargin : 2,
- plain : false,
- wheelIncrement : 20,
- elements : "body",
- headerAsText : false,
- frame : false,
- hideBorders : true,
- initComponent : function() {
- this.frame = false;
- Ext.TabPanel.superclass.initComponent.call(this);
- this.addEvents("beforetabchange", "tabchange", "contextmenu");
- this.setLayout(new Ext.layout.CardLayout({
- deferredRender : this.deferredRender
- }));
- if (this.tabPosition == "top") {
- this.elements += ",header";
- this.stripTarget = "header"
- } else {
- this.elements += ",footer";
- this.stripTarget = "footer"
- }
- if (!this.stack) {
- this.stack = Ext.TabPanel.AccessStack()
- }
- this.initItems()
- },
- render : function() {
- Ext.TabPanel.superclass.render.apply(this, arguments);
- if (this.activeTab !== undefined) {
- var A = this.activeTab;
- delete this.activeTab;
- this.setActiveTab(A)
- }
- },
- onRender : function(C, A) {
- Ext.TabPanel.superclass.onRender.call(this, C, A);
- if (this.plain) {
- var E = this.tabPosition == "top" ? "header" : "footer";
- this[E].addClass("x-tab-panel-" + E + "-plain")
- }
- var B = this[this.stripTarget];
- this.stripWrap = B.createChild({
- cls : "x-tab-strip-wrap",
- cn : {
- tag : "ul",
- cls : "x-tab-strip x-tab-strip-" + this.tabPosition
- }
- });
- this.stripSpacer = B.createChild({
- cls : "x-tab-strip-spacer"
- });
- this.strip = new Ext.Element(this.stripWrap.dom.firstChild);
- this.edge = this.strip.createChild({
- tag : "li",
- cls : "x-tab-edge"
- });
- this.strip.createChild({
- cls : "x-clear"
- });
- this.body.addClass("x-tab-panel-body-" + this.tabPosition);
- if (!this.itemTpl) {
- var D = new Ext.Template(
- "<li class=\"{cls}\" id=\"{id}\"><a class=\"x-tab-strip-close\" onclick=\"return false;\"></a>",
- "<a class=\"x-tab-right\" href=\"#\" onclick=\"return false;\"><em class=\"x-tab-left\">",
- "<span class=\"x-tab-strip-inner\"><span class=\"x-tab-strip-text {iconCls}\">{text}</span></span>",
- "</em></a></li>");
- D.disableFormats = true;
- D.compile();
- Ext.TabPanel.prototype.itemTpl = D
- }
- this.items.each(this.initTab, this)
- },
- afterRender : function() {
- Ext.TabPanel.superclass.afterRender.call(this);
- if (this.autoTabs) {
- this.readTabs(false)
- }
- },
- initEvents : function() {
- Ext.TabPanel.superclass.initEvents.call(this);
- this.on("add", this.onAdd, this);
- this.on("remove", this.onRemove, this);
- this.strip.on("mousedown", this.onStripMouseDown, this);
- this.strip.on("click", this.onStripClick, this);
- this.strip.on("contextmenu", this.onStripContextMenu, this);
- if (this.enableTabScroll) {
- this.strip.on("mousewheel", this.onWheel, this)
- }
- },
- findTargets : function(C) {
- var B = null;
- var A = C.getTarget("li", this.strip);
- if (A) {
- B = this.getComponent(A.id.split("__")[1]);
- if (B.disabled) {
- return {
- close : null,
- item : null,
- el : null
- }
- }
- }
- return {
- close : C.getTarget(".x-tab-strip-close", this.strip),
- item : B,
- el : A
- }
- },
- onStripMouseDown : function(B) {
- B.preventDefault();
- if (B.button != 0) {
- return
- }
- var A = this.findTargets(B);
- if (A.close) {
- this.remove(A.item);
- return
- }
- if (A.item && A.item != this.activeTab) {
- this.setActiveTab(A.item)
- }
- },
- onStripClick : function(B) {
- var A = this.findTargets(B);
- if (!A.close && A.item && A.item != this.activeTab) {
- this.setActiveTab(A.item)
- }
- },
- onStripContextMenu : function(B) {
- B.preventDefault();
- var A = this.findTargets(B);
- if (A.item) {
- this.fireEvent("contextmenu", this, A.item, B)
- }
- },
- readTabs : function(D) {
- if (D === true) {
- this.items.each(function(G) {
- this.remove(G)
- }, this)
- }
- var C = this.el.query(this.autoTabSelector);
- for (var B = 0, A = C.length; B < A; B++) {
- var E = C[B];
- var F = E.getAttribute("title");
- E.removeAttribute("title");
- this.add({
- title : F,
- el : E
- })
- }
- },
- initTab : function(D, B) {
- var E = this.strip.dom.childNodes[B];
- var A = D.closable ? "x-tab-strip-closable" : "";
- if (D.disabled) {
- A += " x-item-disabled"
- }
- if (D.iconCls) {
- A += " x-tab-with-icon"
- }
- var F = {
- id : this.id + "__" + D.getItemId(),
- text : D.title,
- cls : A,
- iconCls : D.iconCls || ""
- };
- var C = E ? this.itemTpl.insertBefore(E, F) : this.itemTpl.append(
- this.strip, F);
- Ext.fly(C).addClassOnOver("x-tab-strip-over");
- if (D.tabTip) {
- Ext.fly(C).child("span.x-tab-strip-text", true).qtip = D.tabTip
- }
- D.on("disable", this.onItemDisabled, this);
- D.on("enable", this.onItemEnabled, this);
- D.on("titlechange", this.onItemTitleChanged, this);
- D.on("beforeshow", this.onBeforeShowItem, this)
- },
- onAdd : function(C, B, A) {
- this.initTab(B, A);
- if (this.items.getCount() == 1) {
- this.syncSize()
- }
- this.delegateUpdates()
- },
- onBeforeAdd : function(B) {
- var A = B.events
- ? (this.items.containsKey(B.getItemId()) ? B : null)
- : this.items.get(B);
- if (A) {
- this.setActiveTab(B);
- return false
- }
- Ext.TabPanel.superclass.onBeforeAdd.apply(this, arguments);
- var C = B.elements;
- B.elements = C ? C.replace(",header", "") : C;
- B.border = (B.border === true)
- },
- onRemove : function(C, B) {
- Ext.removeNode(this.getTabEl(B));
- this.stack.remove(B);
- if (B == this.activeTab) {
- var A = this.stack.next();
- if (A) {
- this.setActiveTab(A)
- } else {
- this.setActiveTab(0)
- }
- }
- this.delegateUpdates()
- },
- onBeforeShowItem : function(A) {
- if (A != this.activeTab) {
- this.setActiveTab(A);
- return false
- }
- },
- onItemDisabled : function(B) {
- var A = this.getTabEl(B);
- if (A) {
- Ext.fly(A).addClass("x-item-disabled")
- }
- this.stack.remove(B)
- },
- onItemEnabled : function(B) {
- var A = this.getTabEl(B);
- if (A) {
- Ext.fly(A).removeClass("x-item-disabled")
- }
- },
- onItemTitleChanged : function(B) {
- var A = this.getTabEl(B);
- if (A) {
- Ext.fly(A).child("span.x-tab-strip-text", true).innerHTML = B.title
- }
- },
- getTabEl : function(A) {
- return document.getElementById(this.id + "__" + A.getItemId())
- },
- onResize : function() {
- Ext.TabPanel.superclass.onResize.apply(this, arguments);
- this.delegateUpdates()
- },
- beginUpdate : function() {
- this.suspendUpdates = true
- },
- endUpdate : function() {
- this.suspendUpdates = false;
- this.delegateUpdates()
- },
- hideTabStripItem : function(B) {
- B = this.getComponent(B);
- var A = this.getTabEl(B);
- if (A) {
- A.style.display = "none";
- this.delegateUpdates()
- }
- },
- unhideTabStripItem : function(B) {
- B = this.getComponent(B);
- var A = this.getTabEl(B);
- if (A) {
- A.style.display = "";
- this.delegateUpdates()
- }
- },
- delegateUpdates : function() {
- if (this.suspendUpdates) {
- return
- }
- if (this.resizeTabs && this.rendered) {
- this.autoSizeTabs()
- }
- if (this.enableTabScroll && this.rendered) {
- this.autoScrollTabs()
- }
- },
- autoSizeTabs : function() {
- var G = this.items.length;
- var B = this.tabPosition != "bottom" ? "header" : "footer";
- var C = this[B].dom.offsetWidth;
- var A = this[B].dom.clientWidth;
- if (!this.resizeTabs || G < 1 || !A) {
- return
- }
- var I = Math.max(Math.min(Math.floor((A - 4) / G) - this.tabMargin,
- this.tabWidth), this.minTabWidth);
- this.lastTabWidth = I;
- var K = this.stripWrap.dom.getElementsByTagName("li");
- for (var E = 0, H = K.length - 1; E < H; E++) {
- var J = K[E];
- var L = J.childNodes[1].firstChild.firstChild;
- var F = J.offsetWidth;
- var D = L.offsetWidth;
- L.style.width = (I - (F - D)) + "px"
- }
- },
- adjustBodyWidth : function(A) {
- if (this.header) {
- this.header.setWidth(A)
- }
- if (this.footer) {
- this.footer.setWidth(A)
- }
- return A
- },
- setActiveTab : function(C) {
- C = this.getComponent(C);
- if (!C
- || this.fireEvent("beforetabchange", this, C, this.activeTab) === false) {
- return
- }
- if (!this.rendered) {
- this.activeTab = C;
- return
- }
- if (this.activeTab != C) {
- if (this.activeTab) {
- var A = this.getTabEl(this.activeTab);
- if (A) {
- Ext.fly(A).removeClass("x-tab-strip-active")
- }
- this.activeTab.fireEvent("deactivate", this.activeTab)
- }
- var B = this.getTabEl(C);
- Ext.fly(B).addClass("x-tab-strip-active");
- this.activeTab = C;
- this.stack.add(C);
- this.layout.setActiveItem(C);
- if (this.layoutOnTabChange && C.doLayout) {
- C.doLayout()
- }
- if (this.scrolling) {
- this.scrollToTab(C, this.animScroll)
- }
- C.fireEvent("activate", C);
- this.fireEvent("tabchange", this, C)
- }
- },
- getActiveTab : function() {
- return this.activeTab || null
- },
- getItem : function(A) {
- return this.getComponent(A)
- },
- autoScrollTabs : function() {
- var F = this.items.length;
- var D = this.header.dom.offsetWidth;
- var C = this.header.dom.clientWidth;
- var E = this.stripWrap;
- var B = E.dom.offsetWidth;
- var G = this.getScrollPos();
- var A = this.edge.getOffsetsTo(this.stripWrap)[0] + G;
- if (!this.enableTabScroll || F < 1 || B < 20) {
- return
- }
- if (A <= C) {
- E.dom.scrollLeft = 0;
- E.setWidth(C);
- if (this.scrolling) {
- this.scrolling = false;
- this.header.removeClass("x-tab-scrolling");
- this.scrollLeft.hide();
- this.scrollRight.hide()
- }
- } else {
- if (!this.scrolling) {
- this.header.addClass("x-tab-scrolling")
- }
- C -= E.getMargins("lr");
- E.setWidth(C > 20 ? C : 20);
- if (!this.scrolling) {
- if (!this.scrollLeft) {
- this.createScrollers()
- } else {
- this.scrollLeft.show();
- this.scrollRight.show()
- }
- }
- this.scrolling = true;
- if (G > (A - C)) {
- E.dom.scrollLeft = A - C
- } else {
- this.scrollToTab(this.activeTab, false)
- }
- this.updateScrollButtons()
- }
- },
- createScrollers : function() {
- var C = this.stripWrap.dom.offsetHeight;
- var A = this.header.insertFirst({
- cls : "x-tab-scroller-left"
- });
- A.setHeight(C);
- A.addClassOnOver("x-tab-scroller-left-over");
- this.leftRepeater = new Ext.util.ClickRepeater(A, {
- interval : this.scrollRepeatInterval,
- handler : this.onScrollLeft,
- scope : this
- });
- this.scrollLeft = A;
- var B = this.header.insertFirst({
- cls : "x-tab-scroller-right"
- });
- B.setHeight(C);
- B.addClassOnOver("x-tab-scroller-right-over");
- this.rightRepeater = new Ext.util.ClickRepeater(B, {
- interval : this.scrollRepeatInterval,
- handler : this.onScrollRight,
- scope : this
- });
- this.scrollRight = B
- },
- getScrollWidth : function() {
- return this.edge.getOffsetsTo(this.stripWrap)[0] + this.getScrollPos()
- },
- getScrollPos : function() {
- return parseInt(this.stripWrap.dom.scrollLeft, 10) || 0
- },
- getScrollArea : function() {
- return parseInt(this.stripWrap.dom.clientWidth, 10) || 0
- },
- getScrollAnim : function() {
- return {
- duration : this.scrollDuration,
- callback : this.updateScrollButtons,
- scope : this
- }
- },
- getScrollIncrement : function() {
- return this.scrollIncrement
- || (this.resizeTabs ? this.lastTabWidth + 2 : 100)
- },
- scrollToTab : function(E, A) {
- if (!E) {
- return
- }
- var C = this.getTabEl(E);
- var G = this.getScrollPos(), D = this.getScrollArea();
- var F = Ext.fly(C).getOffsetsTo(this.stripWrap)[0] + G;
- var B = F + C.offsetWidth;
- if (F < G) {
- this.scrollTo(F, A)
- } else {
- if (B > (G + D)) {
- this.scrollTo(B - D, A)
- }
- }
- },
- scrollTo : function(B, A) {
- this.stripWrap.scrollTo("left", B, A ? this.getScrollAnim() : false);
- if (!A) {
- this.updateScrollButtons()
- }
- },
- onWheel : function(D) {
- var E = D.getWheelDelta() * this.wheelIncrement * -1;
- D.stopEvent();
- var F = this.getScrollPos();
- var C = F + E;
- var A = this.getScrollWidth() - this.getScrollArea();
- var B = Math.max(0, Math.min(A, C));
- if (B != F) {
- this.scrollTo(B, false)
- }
- },
- onScrollRight : function() {
- var A = this.getScrollWidth() - this.getScrollArea();
- var C = this.getScrollPos();
- var B = Math.min(A, C + this.getScrollIncrement());
- if (B != C) {
- this.scrollTo(B, this.animScroll)
- }
- },
- onScrollLeft : function() {
- var B = this.getScrollPos();
- var A = Math.max(0, B - this.getScrollIncrement());
- if (A != B) {
- this.scrollTo(A, this.animScroll)
- }
- },
- updateScrollButtons : function() {
- var A = this.getScrollPos();
- this.scrollLeft[A == 0 ? "addClass" : "removeClass"]("x-tab-scroller-left-disabled");
- this.scrollRight[A >= (this.getScrollWidth() - this.getScrollArea())
- ? "addClass"
- : "removeClass"]("x-tab-scroller-right-disabled")
- }
- });
- Ext.reg("tabpanel", Ext.TabPanel);
- Ext.TabPanel.prototype.activate = Ext.TabPanel.prototype.setActiveTab;
- Ext.TabPanel.AccessStack = function() {
- var A = [];
- return {
- add : function(B) {
- A.push(B);
- if (A.length > 10) {
- A.shift()
- }
- },
- remove : function(E) {
- var D = [];
- for (var C = 0, B = A.length; C < B; C++) {
- if (A[C] != E) {
- D.push(A[C])
- }
- }
- A = D
- },
- next : function() {
- return A.pop()
- }
- }
- };
|