--- /dev/null
+<html>\r
+<head>\r
+ <title>The source code</title>\r
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body onload="prettyPrint();">\r
+ <pre class="prettyprint lang-js">Ext.ns('Ext.ux');\r
+\r
+Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {\r
+ tabPosition: 'left',\r
+ \r
+ alternateColor: false,\r
+ \r
+ alternateCls: 'x-grouptabs-panel-alt',\r
+ \r
+ defaultType: 'grouptab',\r
+ \r
+ deferredRender: false,\r
+ \r
+ activeGroup : null,\r
+ \r
+ initComponent: function(){\r
+ Ext.ux.GroupTabPanel.superclass.initComponent.call(this);\r
+ \r
+ this.addEvents(\r
+ 'beforegroupchange',\r
+ 'groupchange'\r
+ );\r
+ this.elements = 'body,header';\r
+ this.stripTarget = 'header';\r
+ \r
+ this.tabPosition = this.tabPosition == 'right' ? 'right' : 'left';\r
+ \r
+ this.addClass('x-grouptabs-panel');\r
+ \r
+ if (this.tabStyle && this.tabStyle != '') {\r
+ this.addClass('x-grouptabs-panel-' + this.tabStyle);\r
+ }\r
+ \r
+ if (this.alternateColor) {\r
+ this.addClass(this.alternateCls);\r
+ }\r
+ \r
+ this.on('beforeadd', function(gtp, item, index){\r
+ this.initGroup(item, index);\r
+ }); \r
+ },\r
+ \r
+ initEvents : function() {\r
+ this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);\r
+ },\r
+ \r
+ onRender: function(ct, position){\r
+ Ext.TabPanel.superclass.onRender.call(this, ct, position);\r
+\r
+ if(this.plain){\r
+ var pos = this.tabPosition == 'top' ? 'header' : 'footer';\r
+ this[pos].addClass('x-tab-panel-'+pos+'-plain');\r
+ }\r
+\r
+ var st = this[this.stripTarget];\r
+\r
+ this.stripWrap = st.createChild({cls:'x-tab-strip-wrap ', cn:{\r
+ tag:'ul', cls:'x-grouptabs-strip x-grouptabs-tab-strip-'+this.tabPosition}});\r
+\r
+ var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);\r
+ this.strip = new Ext.Element(this.stripWrap.dom.firstChild);\r
+\r
+ this.header.addClass('x-grouptabs-panel-header');\r
+ this.bwrap.addClass('x-grouptabs-bwrap');\r
+ this.body.addClass('x-tab-panel-body-'+this.tabPosition + ' x-grouptabs-panel-body');\r
+\r
+ if (!this.itemTpl) {\r
+ var tt = new Ext.Template(\r
+ '<li class="{cls}" id="{id}">', \r
+ '<a class="x-grouptabs-expand" onclick="return false;"></a>', \r
+ '<a class="x-grouptabs-text {iconCls}" href="#" onclick="return false;">',\r
+ '<span>{text}</span></a>', \r
+ '</li>'\r
+ );\r
+ tt.disableFormats = true;\r
+ tt.compile();\r
+ Ext.ux.GroupTabPanel.prototype.itemTpl = tt;\r
+ }\r
+\r
+ this.items.each(this.initGroup, this);\r
+ },\r
+ \r
+ afterRender: function(){\r
+ Ext.ux.GroupTabPanel.superclass.afterRender.call(this);\r
+ \r
+ this.tabJoint = Ext.fly(this.body.dom.parentNode).createChild({\r
+ cls: 'x-tab-joint'\r
+ });\r
+ \r
+ this.addClass('x-tab-panel-' + this.tabPosition);\r
+ this.header.setWidth(this.tabWidth);\r
+ \r
+ if (this.activeGroup !== undefined) {\r
+ var group = (typeof this.activeGroup == 'object') ? this.activeGroup : this.items.get(this.activeGroup);\r
+ delete this.activeGroup;\r
+ this.setActiveGroup(group);\r
+ group.setActiveTab(group.getMainItem());\r
+ }\r
+ },\r
+\r
+ getGroupEl : Ext.TabPanel.prototype.getTabEl,\r
+ \r
+ // private\r
+ findTargets: function(e){\r
+ var item = null;\r
+ var itemEl = e.getTarget('li', this.strip);\r
+ if (itemEl) {\r
+ item = this.findById(itemEl.id.split(this.idDelimiter)[1]);\r
+ if (item.disabled) {\r
+ return {\r
+ expand: null,\r
+ item: null,\r
+ el: null\r
+ };\r
+ }\r
+ }\r
+ return {\r
+ expand: e.getTarget('.x-grouptabs-expand', this.strip),\r
+ isGroup: !e.getTarget('ul.x-grouptabs-sub', this.strip),\r
+ item: item,\r
+ el: itemEl\r
+ };\r
+ },\r
+ \r
+ // private\r
+ onStripMouseDown: function(e){\r
+ if (e.button != 0) {\r
+ return;\r
+ }\r
+ e.preventDefault();\r
+ var t = this.findTargets(e);\r
+ if (t.expand) {\r
+ this.toggleGroup(t.el);\r
+ }\r
+ else if (t.item) {\r
+ if(t.isGroup) {\r
+ t.item.setActiveTab(t.item.getMainItem());\r
+ }\r
+ else {\r
+ t.item.ownerCt.setActiveTab(t.item);\r
+ }\r
+ }\r
+ },\r
+ \r
+ expandGroup: function(groupEl){\r
+ if(groupEl.isXType) {\r
+ groupEl = this.getGroupEl(groupEl);\r
+ }\r
+ Ext.fly(groupEl).addClass('x-grouptabs-expanded');\r
+ },\r
+ \r
+ toggleGroup: function(groupEl){\r
+ if(groupEl.isXType) {\r
+ groupEl = this.getGroupEl(groupEl);\r
+ } \r
+ Ext.fly(groupEl).toggleClass('x-grouptabs-expanded');\r
+ this.syncTabJoint();\r
+ }, \r
+ \r
+ syncTabJoint: function(groupEl){\r
+ if (!this.tabJoint) {\r
+ return;\r
+ }\r
+ \r
+ groupEl = groupEl || this.getGroupEl(this.activeGroup);\r
+ if(groupEl) {\r
+ this.tabJoint.setHeight(Ext.fly(groupEl).getHeight() - 2); \r
+ \r
+ var y = Ext.isGecko2 ? 0 : 1;\r
+ if (this.tabPosition == 'left'){\r
+ this.tabJoint.alignTo(groupEl, 'tl-tr', [-2,y]);\r
+ }\r
+ else {\r
+ this.tabJoint.alignTo(groupEl, 'tr-tl', [1,y]);\r
+ } \r
+ }\r
+ else {\r
+ this.tabJoint.hide();\r
+ }\r
+ },\r
+ \r
+ getActiveTab : function() {\r
+ if(!this.activeGroup) return null;\r
+ return this.activeGroup.getTabEl(this.activeGroup.activeTab) || null; \r
+ },\r
+ \r
+ onResize: function(){\r
+ Ext.ux.GroupTabPanel.superclass.onResize.apply(this, arguments);\r
+ this.syncTabJoint();\r
+ },\r
+ \r
+ createCorner: function(el, pos){\r
+ return Ext.fly(el).createChild({\r
+ cls: 'x-grouptabs-corner x-grouptabs-corner-' + pos\r
+ });\r
+ },\r
+ \r
+ initGroup: function(group, index){\r
+ var before = this.strip.dom.childNodes[index]; \r
+ var p = this.getTemplateArgs(group);\r
+ if (index === 0) {\r
+ p.cls += ' x-tab-first';\r
+ }\r
+ p.cls += ' x-grouptabs-main';\r
+ p.text = group.getMainItem().title;\r
+ \r
+ var el = before ? this.itemTpl.insertBefore(before, p) : this.itemTpl.append(this.strip, p);\r
+ \r
+ var tl = this.createCorner(el, 'top-' + this.tabPosition);\r
+ var bl = this.createCorner(el, 'bottom-' + this.tabPosition);\r
+\r
+ if (group.expanded) {\r
+ this.expandGroup(el);\r
+ }\r
+\r
+ if (Ext.isIE6 || (Ext.isIE && !Ext.isStrict)){\r
+ bl.setLeft('-10px');\r
+ bl.setBottom('-5px');\r
+ tl.setLeft('-10px');\r
+ tl.setTop('-5px');\r
+ }\r
+\r
+ this.mon(group, 'changemainitem', this.onGroupChangeMainItem, this);\r
+ this.mon(group, 'beforetabchange', this.onGroupBeforeTabChange, this);\r
+ },\r
+ \r
+ setActiveGroup : function(group) {\r
+ group = this.getComponent(group);\r
+ if(!group || this.fireEvent('beforegroupchange', this, group, this.activeGroup) === false){\r
+ return;\r
+ }\r
+ if(!this.rendered){\r
+ this.activeGroup = group;\r
+ return;\r
+ }\r
+ if(this.activeGroup != group){\r
+ if(this.activeGroup){\r
+ var oldEl = this.getGroupEl(this.activeGroup);\r
+ if(oldEl){\r
+ Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');\r
+ }\r
+ this.activeGroup.fireEvent('deactivate', this.activeTab);\r
+ }\r
+\r
+ var groupEl = this.getGroupEl(group);\r
+ Ext.fly(groupEl).addClass('x-grouptabs-strip-active');\r
+ \r
+ this.activeGroup = group;\r
+ this.stack.add(group);\r
+\r
+ this.layout.setActiveItem(group);\r
+ this.syncTabJoint(groupEl);\r
+\r
+ group.fireEvent('activate', group);\r
+ this.fireEvent('groupchange', this, group);\r
+ } \r
+ },\r
+ \r
+ onGroupBeforeTabChange: function(group, newTab, oldTab){\r
+ if(group !== this.activeGroup || newTab !== oldTab) {\r
+ this.strip.select('.x-grouptabs-sub > li.x-grouptabs-strip-active', true).removeClass('x-grouptabs-strip-active');\r
+ } \r
+ \r
+ this.expandGroup(this.getGroupEl(group));\r
+ this.setActiveGroup(group);\r
+ },\r
+ \r
+ getFrameHeight: function(){\r
+ var h = this.el.getFrameWidth('tb');\r
+ h += (this.tbar ? this.tbar.getHeight() : 0) +\r
+ (this.bbar ? this.bbar.getHeight() : 0);\r
+ \r
+ return h;\r
+ },\r
+ \r
+ adjustBodyWidth: function(w){\r
+ return w - this.tabWidth;\r
+ }\r
+});\r
+\r
+Ext.reg('grouptabpanel', Ext.ux.GroupTabPanel);</pre> \r
+</body>\r
+</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff