--- /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.ux.GroupTab = Ext.extend(Ext.Container, {\r
+ mainItem: 0,\r
+ \r
+ expanded: true,\r
+ \r
+ deferredRender: true,\r
+ \r
+ activeTab: null,\r
+ \r
+ idDelimiter: '__',\r
+ \r
+ headerAsText: false,\r
+ \r
+ frame: false,\r
+ \r
+ hideBorders: true,\r
+ \r
+ initComponent: function(config){\r
+ Ext.apply(this, config);\r
+ this.frame = false;\r
+ \r
+ Ext.ux.GroupTab.superclass.initComponent.call(this);\r
+ \r
+ this.addEvents('activate', 'deactivate', 'changemainitem', 'beforetabchange', 'tabchange');\r
+ \r
+ this.setLayout(new Ext.layout.CardLayout({\r
+ deferredRender: this.deferredRender\r
+ }));\r
+ \r
+ if (!this.stack) {\r
+ this.stack = Ext.TabPanel.AccessStack();\r
+ }\r
+ \r
+ this.initItems();\r
+ \r
+ this.on('beforerender', function(){\r
+ this.groupEl = this.ownerCt.getGroupEl(this);\r
+ }, this);\r
+ \r
+ this.on('add', this.onAdd, this, {\r
+ target: this\r
+ });\r
+ this.on('remove', this.onRemove, this, {\r
+ target: this\r
+ });\r
+ \r
+ if (this.mainItem !== undefined) {\r
+ var item = (typeof this.mainItem == 'object') ? this.mainItem : this.items.get(this.mainItem);\r
+ delete this.mainItem;\r
+ this.setMainItem(item);\r
+ }\r
+ },\r
+ \r
+ <div id="method-Ext.ux.layout.RowLayout-setActiveTab"></div>/**\r
+ * Sets the specified tab as the active tab. This method fires the {@link #beforetabchange} event which\r
+ * can return false to cancel the tab change.\r
+ * @param {String/Panel} tab The id or tab Panel to activate\r
+ */\r
+ setActiveTab : function(item){\r
+ item = this.getComponent(item);\r
+ if(!item || this.fireEvent('beforetabchange', this, item, this.activeTab) === false){\r
+ return;\r
+ }\r
+ if(!this.rendered){\r
+ this.activeTab = item;\r
+ return;\r
+ }\r
+ if(this.activeTab != item){\r
+ if(this.activeTab && this.activeTab != this.mainItem){\r
+ var oldEl = this.getTabEl(this.activeTab);\r
+ if(oldEl){\r
+ Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');\r
+ }\r
+ this.activeTab.fireEvent('deactivate', this.activeTab);\r
+ }\r
+ var el = this.getTabEl(item);\r
+ Ext.fly(el).addClass('x-grouptabs-strip-active');\r
+ this.activeTab = item;\r
+ this.stack.add(item);\r
+\r
+ this.layout.setActiveItem(item);\r
+ if(this.layoutOnTabChange && item.doLayout){\r
+ item.doLayout();\r
+ }\r
+ if(this.scrolling){\r
+ this.scrollToTab(item, this.animScroll);\r
+ }\r
+\r
+ item.fireEvent('activate', item);\r
+ this.fireEvent('tabchange', this, item);\r
+ }\r
+ },\r
+ \r
+ getTabEl: function(item){\r
+ if (item == this.mainItem) {\r
+ return this.groupEl;\r
+ }\r
+ return Ext.TabPanel.prototype.getTabEl.call(this, item);\r
+ },\r
+ \r
+ onRender: function(ct, position){\r
+ Ext.ux.GroupTab.superclass.onRender.call(this, ct, position);\r
+ \r
+ this.strip = Ext.fly(this.groupEl).createChild({\r
+ tag: 'ul',\r
+ cls: 'x-grouptabs-sub'\r
+ });\r
+\r
+ this.tooltip = new Ext.ToolTip({\r
+ target: this.groupEl,\r
+ delegate: 'a.x-grouptabs-text',\r
+ trackMouse: true,\r
+ renderTo: document.body,\r
+ listeners: {\r
+ beforeshow: function(tip) {\r
+ var item = (tip.triggerElement.parentNode === this.mainItem.tabEl)\r
+ ? this.mainItem\r
+ : this.findById(tip.triggerElement.parentNode.id.split(this.idDelimiter)[1]);\r
+\r
+ if(!item.tabTip) {\r
+ return false;\r
+ }\r
+ tip.body.dom.innerHTML = item.tabTip;\r
+ },\r
+ scope: this\r
+ }\r
+ });\r
+ \r
+ if (!this.itemTpl) {\r
+ var tt = new Ext.Template('<li class="{cls}" id="{id}">', '<a onclick="return false;" class="x-grouptabs-text {iconCls}">{text}</a>', '</li>');\r
+ tt.disableFormats = true;\r
+ tt.compile();\r
+ Ext.ux.GroupTab.prototype.itemTpl = tt;\r
+ }\r
+ \r
+ this.items.each(this.initTab, this);\r
+ },\r
+ \r
+ afterRender: function(){\r
+ Ext.ux.GroupTab.superclass.afterRender.call(this);\r
+ \r
+ if (this.activeTab !== undefined) {\r
+ var item = (typeof this.activeTab == 'object') ? this.activeTab : this.items.get(this.activeTab);\r
+ delete this.activeTab;\r
+ this.setActiveTab(item);\r
+ }\r
+ },\r
+ \r
+ // private\r
+ initTab: function(item, index){\r
+ var before = this.strip.dom.childNodes[index];\r
+ var p = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);\r
+ \r
+ if (item === this.mainItem) {\r
+ item.tabEl = this.groupEl;\r
+ p.cls += ' x-grouptabs-main-item';\r
+ }\r
+ \r
+ var el = before ? this.itemTpl.insertBefore(before, p) : this.itemTpl.append(this.strip, p);\r
+ \r
+ item.tabEl = item.tabEl || el;\r
+ \r
+ item.on('disable', this.onItemDisabled, this);\r
+ item.on('enable', this.onItemEnabled, this);\r
+ item.on('titlechange', this.onItemTitleChanged, this);\r
+ item.on('iconchange', this.onItemIconChanged, this);\r
+ item.on('beforeshow', this.onBeforeShowItem, this);\r
+ },\r
+ \r
+ setMainItem: function(item){\r
+ item = this.getComponent(item);\r
+ if (!item || this.fireEvent('changemainitem', this, item, this.mainItem) === false) {\r
+ return;\r
+ }\r
+ \r
+ this.mainItem = item;\r
+ },\r
+ \r
+ getMainItem: function(){\r
+ return this.mainItem || null;\r
+ },\r
+ \r
+ // private\r
+ onBeforeShowItem: function(item){\r
+ if (item != this.activeTab) {\r
+ this.setActiveTab(item);\r
+ return false;\r
+ }\r
+ },\r
+ \r
+ // private\r
+ onAdd: function(gt, item, index){\r
+ if (this.rendered) {\r
+ this.initTab.call(this, item, index);\r
+ }\r
+ },\r
+ \r
+ // private\r
+ onRemove: function(tp, item){\r
+ Ext.destroy(Ext.get(this.getTabEl(item)));\r
+ this.stack.remove(item);\r
+ item.un('disable', this.onItemDisabled, this);\r
+ item.un('enable', this.onItemEnabled, this);\r
+ item.un('titlechange', this.onItemTitleChanged, this);\r
+ item.un('iconchange', this.onItemIconChanged, this);\r
+ item.un('beforeshow', this.onBeforeShowItem, this);\r
+ if (item == this.activeTab) {\r
+ var next = this.stack.next();\r
+ if (next) {\r
+ this.setActiveTab(next);\r
+ }\r
+ else if (this.items.getCount() > 0) {\r
+ this.setActiveTab(0);\r
+ }\r
+ else {\r
+ this.activeTab = null;\r
+ }\r
+ }\r
+ },\r
+ \r
+ // private\r
+ onBeforeAdd: function(item){\r
+ var existing = item.events ? (this.items.containsKey(item.getItemId()) ? item : null) : this.items.get(item);\r
+ if (existing) {\r
+ this.setActiveTab(item);\r
+ return false;\r
+ }\r
+ Ext.TabPanel.superclass.onBeforeAdd.apply(this, arguments);\r
+ var es = item.elements;\r
+ item.elements = es ? es.replace(',header', '') : es;\r
+ item.border = (item.border === true);\r
+ },\r
+ \r
+ // private\r
+ onItemDisabled: Ext.TabPanel.prototype.onItemDisabled,\r
+ onItemEnabled: Ext.TabPanel.prototype.onItemEnabled,\r
+ \r
+ // private\r
+ onItemTitleChanged: function(item){\r
+ var el = this.getTabEl(item);\r
+ if (el) {\r
+ Ext.fly(el).child('a.x-grouptabs-text', true).innerHTML = item.title;\r
+ }\r
+ },\r
+ \r
+ //private\r
+ onItemIconChanged: function(item, iconCls, oldCls){\r
+ var el = this.getTabEl(item);\r
+ if (el) {\r
+ Ext.fly(el).child('a.x-grouptabs-text').replaceClass(oldCls, iconCls);\r
+ }\r
+ },\r
+ \r
+ beforeDestroy: function(){\r
+ Ext.TabPanel.prototype.beforeDestroy.call(this);\r
+ this.tooltip.destroy();\r
+ }\r
+});\r
+\r
+Ext.reg('grouptab', Ext.ux.GroupTab);\r
+</pre> \r
+</body>\r
+</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff