X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/0494b8d9b9bb03ab6c22b34dae81261e3cd7e3e6..7a654f8d43fdb43d78b63d90528bed6e86b608cc:/examples/ux/GroupTabPanel.js diff --git a/examples/ux/GroupTabPanel.js b/examples/ux/GroupTabPanel.js index b356e3c9..92f7b109 100644 --- a/examples/ux/GroupTabPanel.js +++ b/examples/ux/GroupTabPanel.js @@ -1,304 +1,315 @@ -/*! - * Ext JS Library 3.3.1 - * Copyright(c) 2006-2010 Sencha Inc. - * licensing@sencha.com - * http://www.sencha.com/license +/** + * @author Nicolas Ferrero + * @class Ext.ux.GroupTabPanel + * @extends Ext.Container + * A TabPanel with grouping support. */ -Ext.ns('Ext.ux'); +Ext.define('Ext.ux.GroupTabPanel', { + extend: 'Ext.Container', -Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, { - tabPosition: 'left', + alias: 'widget.grouptabpanel', - alternateColor: false, + requires:[ + 'Ext.data.*', + 'Ext.tree.*', + 'Ext.layout.*' + ], - alternateCls: 'x-grouptabs-panel-alt', + baseCls : Ext.baseCSSPrefix + 'grouptabpanel', - defaultType: 'grouptab', + initComponent: function(config) { + var me = this, + items = []; - deferredRender: false, + Ext.apply(me, config); - activeGroup : null, + me.store = me.createItemsStore(); + me.layout = { + type: 'hbox', + pack: 'start', + align: 'stretch' + }; + me.defaults = { + border: false + }; - initComponent: function(){ - Ext.ux.GroupTabPanel.superclass.initComponent.call(this); - - this.addEvents( + me.items = Ext.each(me.items, function(item) { + items.push(item.items); + }); + + me.items = [{ + xtype: 'treepanel', + cls: 'x-tree-panel x-grouptabbar', + width: 150, + rootVisible: false, + height: 400, + store: me.store, + hideHeaders: true, + useArrows: true, + animate: false, + viewConfig: { + overItemCls: '' + }, + columns: [{ + xtype: 'treecolumn', + sortable: false, + dataIndex: 'text', + flex: 1, + renderer: function (value, cell, node, idx1, idx2, store, tree) { + var cls = ''; + + if (!node.data.activeGroup) { + cls += ' x-inactive-group'; + } else if (node.parentNode && node.parentNode.parentNode === null) { + cls += ' x-grouptab-first'; + if (node.previousSibling) { + cls += ' x-grouptab-prev'; + } + } else if (node.nextSibling === null) { + cls += ' x-grouptab-last'; + } else { + cls += ' x-grouptab-center'; + } + if (node.data.activeTab) { + cls += ' x-active-tab'; + } + cell.tdCls= 'x-grouptab'+ cls; + + return value; + } + }] + },{ + xtype: 'container', + flex: 1, + layout: 'card', + activeItem: me.mainItem, + baseCls: Ext.baseCSSPrefix + 'grouptabcontainer', + items: items + }]; + + me.addEvents( + /** + * @event beforetabchange + * Fires before a tab change (activated by {@link #setActiveTab}). Return false in any listener to cancel + * the tabchange + * @param {Ext.ux.GroupTabPanel} grouptabPanel The GroupTabPanel + * @param {Ext.Component} newCard The card that is about to be activated + * @param {Ext.Component} oldCard The card that is currently active + */ + 'beforetabchange', + + /** + * @event tabchange + * Fires when a new tab has been activated (activated by {@link #setActiveTab}). + * @param {Ext.ux.GroupTabPanel} grouptabPanel The GroupTabPanel + * @param {Ext.Component} newCard The newly activated item + * @param {Ext.Component} oldCard The previously active item + */ + 'tabchange', + + /** + * @event beforegroupchange + * Fires before a group change (activated by {@link #setActiveGroup}). Return false in any listener to cancel + * the groupchange + * @param {Ext.ux.GroupTabPanel} grouptabPanel The GroupTabPanel + * @param {Ext.Component} newGroup The root group card that is about to be activated + * @param {Ext.Component} oldGroup The root group card that is currently active + */ 'beforegroupchange', + + /** + * @event groupchange + * Fires when a new group has been activated (activated by {@link #setActiveGroup}). + * @param {Ext.ux.GroupTabPanel} grouptabPanel The GroupTabPanel + * @param {Ext.Component} newGroup The newly activated root group item + * @param {Ext.Component} oldGroup The previously active root group item + */ 'groupchange' ); - this.elements = 'body,header'; - this.stripTarget = 'header'; - - this.tabPosition = this.tabPosition == 'right' ? 'right' : 'left'; - this.addClass('x-grouptabs-panel'); + me.callParent(arguments); + me.setActiveTab(me.activeTab); + me.setActiveGroup(me.activeGroup); + me.mon(me.down('treepanel').getSelectionModel(), 'select', me.onNodeSelect, me); + }, - if (this.tabStyle && this.tabStyle != '') { - this.addClass('x-grouptabs-panel-' + this.tabStyle); + /** + * @private + * Node selection listener. + */ + onNodeSelect: function (selModel, node) { + var me = this, + currentNode = me.store.getRootNode(), + parent; + + if (node.parentNode && node.parentNode.parentNode === null) { + parent = node; + } else { + parent = node.parentNode; } - if (this.alternateColor) { - this.addClass(this.alternateCls); + if (me.setActiveGroup(parent.get('id')) === false || me.setActiveTab(node.get('id')) === false) { + return false; } - this.on('beforeadd', function(gtp, item, index){ - this.initGroup(item, index); - }); - this.items.each(function(item){ - item.on('tabchange',function(item){ - this.fireEvent('tabchange', this, item.activeTab); - }, this); - },this); - }, - - initEvents : function() { - this.mon(this.strip, 'mousedown', this.onStripMouseDown, this); - }, - - onRender: function(ct, position){ - Ext.TabPanel.superclass.onRender.call(this, ct, position); - if(this.plain){ - var pos = this.tabPosition == 'top' ? 'header' : 'footer'; - this[pos].addClass('x-tab-panel-'+pos+'-plain'); + while(currentNode) { + currentNode.set('activeTab', false); + currentNode.set('activeGroup', false); + currentNode = currentNode.firstChild || currentNode.nextSibling || currentNode.parentNode.nextSibling; } - var st = this[this.stripTarget]; - - this.stripWrap = st.createChild({cls:'x-tab-strip-wrap ', cn:{ - tag:'ul', cls:'x-grouptabs-strip x-grouptabs-tab-strip-'+this.tabPosition}}); - - var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null); - this.strip = new Ext.Element(this.stripWrap.dom.firstChild); - - this.header.addClass('x-grouptabs-panel-header'); - this.bwrap.addClass('x-grouptabs-bwrap'); - this.body.addClass('x-tab-panel-body-'+this.tabPosition + ' x-grouptabs-panel-body'); - - if (!this.groupTpl) { - var tt = new Ext.Template( - '
  • ', - '', - '', - '{text}', - '
    • ' - ); - tt.disableFormats = true; - tt.compile(); - Ext.ux.GroupTabPanel.prototype.groupTpl = tt; - } - this.items.each(this.initGroup, this); - }, + parent.set('activeGroup', true); - afterRender: function(){ - Ext.ux.GroupTabPanel.superclass.afterRender.call(this); + parent.eachChild(function(child) { - this.tabJoint = Ext.fly(this.body.dom.parentNode).createChild({ - cls: 'x-tab-joint' + child.set('activeGroup', true); }); - - this.addClass('x-tab-panel-' + this.tabPosition); - this.header.setWidth(this.tabWidth); - - if (this.activeGroup !== undefined) { - var group = (typeof this.activeGroup == 'object') ? this.activeGroup : this.items.get(this.activeGroup); - delete this.activeGroup; - this.setActiveGroup(group); - group.setActiveTab(group.getMainItem()); - } + node.set('activeTab', true); + selModel.view.refresh(); }, - getGroupEl : Ext.TabPanel.prototype.getTabEl, - - // private - findTargets: function(e){ - var item = null, - itemEl = e.getTarget('li', this.strip); - if (itemEl) { - item = this.findById(itemEl.id.split(this.idDelimiter)[1]); - if (item.disabled) { - return { - expand: null, - item: null, - el: null - }; - } - } - return { - expand: e.getTarget('.x-grouptabs-expand', this.strip), - isGroup: !e.getTarget('ul.x-grouptabs-sub', this.strip), - item: item, - el: itemEl - }; - }, - - // private - onStripMouseDown: function(e){ - if (e.button != 0) { - return; - } - e.preventDefault(); - var t = this.findTargets(e); - if (t.expand) { - this.toggleGroup(t.el); - } - else if (t.item) { - if(t.isGroup) { - t.item.setActiveTab(t.item.getMainItem()); - } - else { - t.item.ownerCt.setActiveTab(t.item); - } + /** + * Makes the given component active (makes it the visible card in the GroupTabPanel's CardLayout) + * @param {Ext.Component} cmp The component to make active + */ + setActiveTab: function(cmp) { + var me = this, + newTab = cmp, + oldTab; + + if(Ext.isString(cmp)) { + newTab = Ext.getCmp(newTab); } - }, - - expandGroup: function(groupEl){ - if(groupEl.isXType) { - groupEl = this.getGroupEl(groupEl); - } - Ext.fly(groupEl).addClass('x-grouptabs-expanded'); - this.syncTabJoint(); - }, - toggleGroup: function(groupEl){ - if(groupEl.isXType) { - groupEl = this.getGroupEl(groupEl); + if (newTab === me.activeTab) { + return false; } - Ext.fly(groupEl).toggleClass('x-grouptabs-expanded'); - this.syncTabJoint(); - }, - collapseGroup: function(groupEl){ - if(groupEl.isXType) { - groupEl = this.getGroupEl(groupEl); - } - Ext.fly(groupEl).removeClass('x-grouptabs-expanded'); - this.syncTabJoint(); + oldTab = me.activeTab; + if (me.fireEvent('beforetabchange', me, newTab, oldTab) !== false) { + me.activeTab = newTab; + if (me.rendered) { + me.down('container[baseCls=' + Ext.baseCSSPrefix + 'grouptabcontainer' + ']').getLayout().setActiveItem(newTab); + } + me.fireEvent('tabchange', me, newTab, oldTab); + } + return true; }, - syncTabJoint: function(groupEl){ - if (!this.tabJoint) { - return; + /** + * Makes the given group active + * @param {Ext.Component} cmp The root component to make active. + */ + setActiveGroup: function(cmp) { + var me = this, + newGroup = cmp, + oldGroup; + + if(Ext.isString(cmp)) { + newGroup = Ext.getCmp(newGroup); } - groupEl = groupEl || this.getGroupEl(this.activeGroup); - if(groupEl) { - this.tabJoint.setHeight(Ext.fly(groupEl).getHeight() - 2); - - var y = Ext.isGecko2 ? 0 : 1; - if (this.tabPosition == 'left'){ - this.tabJoint.alignTo(groupEl, 'tl-tr', [-2,y]); - } - else { - this.tabJoint.alignTo(groupEl, 'tr-tl', [1,y]); - } - } - else { - this.tabJoint.hide(); + if (newGroup === me.activeGroup) { + return true; } - }, - getActiveTab : function() { - if(!this.activeGroup) return null; - return this.activeGroup.getTabEl(this.activeGroup.activeTab) || null; - }, - - onResize: function(){ - Ext.ux.GroupTabPanel.superclass.onResize.apply(this, arguments); - this.syncTabJoint(); - }, - - createCorner: function(el, pos){ - return Ext.fly(el).createChild({ - cls: 'x-grouptabs-corner x-grouptabs-corner-' + pos - }); + oldGroup = me.activeGroup; + if (me.fireEvent('beforegroupchange', me, newGroup, oldGroup) !== false) { + me.activeGroup = newGroup; + me.fireEvent('groupchange', me, newGroup, oldGroup); + } else { + return false; + } + return true; }, - initGroup: function(group, index){ - var before = this.strip.dom.childNodes[index], - p = this.getTemplateArgs(group); - if (index === 0) { - p.cls += ' x-tab-first'; - } - p.cls += ' x-grouptabs-main'; - p.text = group.getMainItem().title; - - var el = before ? this.groupTpl.insertBefore(before, p) : this.groupTpl.append(this.strip, p), - tl = this.createCorner(el, 'top-' + this.tabPosition), - bl = this.createCorner(el, 'bottom-' + this.tabPosition); - - group.tabEl = el; - if (group.expanded) { - this.expandGroup(el); - } + /** + * @private + * Creates the TreeStore used by the GroupTabBar. + */ + createItemsStore: function() { + var me = this, + data = { + text:'.', + children: [] + }; + me.activeGroup = me.activeGroup || 0; - if (Ext.isIE6 || (Ext.isIE && !Ext.isStrict)){ - bl.setLeft('-10px'); - bl.setBottom('-5px'); - tl.setLeft('-10px'); - tl.setTop('-5px'); - } + Ext.each(me.items, function(item, idx){ + var items = item.items, + rootItem = (items[item.mainItem] || items[0]), + root = { + children: [] + }; - this.mon(group, { - scope: this, - changemainitem: this.onGroupChangeMainItem, - beforetabchange: this.onGroupBeforeTabChange - }); - }, + if (!rootItem.id) { + rootItem.id = Ext.id(); + } - setActiveGroup : function(group) { - group = this.getComponent(group); - if(!group){ - return false; - } - if(!this.rendered){ - this.activeGroup = group; - return true; - } - if(this.activeGroup != group && this.fireEvent('beforegroupchange', this, group, this.activeGroup) !== false){ - if(this.activeGroup){ - this.activeGroup.activeTab = null; - var oldEl = this.getGroupEl(this.activeGroup); - if(oldEl){ - Ext.fly(oldEl).removeClass('x-grouptabs-strip-active'); - } + root.id = rootItem.id; + root.text = rootItem.title; + root.iconCls = rootItem.iconCls; + delete rootItem.iconCls; + delete rootItem.title; + root.expanded = true; + root.activeGroup = (me.activeGroup === idx); + root.activeTab = root.activeGroup ? true : false; + if (root.activeTab) { + me.activeTab = root.id; } - var groupEl = this.getGroupEl(group); - Ext.fly(groupEl).addClass('x-grouptabs-strip-active'); + if (root.activeGroup) { + me.mainItem = item.mainItem || 0; + me.activeGroup = root.id; + } - this.activeGroup = group; - this.stack.add(group); + Ext.each(item.items, function(childItem) { + if (!childItem.id) { + childItem.id = Ext.id(); + } + if(childItem.id !== root.id) { + var child = { + id: childItem.id, + leaf: true, + text: childItem.title, + iconCls: childItem.iconCls, + activeTab: false + }; + delete childItem.title; + delete childItem.iconCls; + + child.activeGroup = root.activeGroup; + root.children.push(child); + } + }, me); - this.layout.setActiveItem(group); - this.syncTabJoint(groupEl); + data.children.push(root); - this.fireEvent('groupchange', this, group); - return true; - } - return false; - }, + }, me); - onGroupBeforeTabChange: function(group, newTab, oldTab){ - if(group !== this.activeGroup || newTab !== oldTab) { - this.strip.select('.x-grouptabs-sub > li.x-grouptabs-strip-active', true).removeClass('x-grouptabs-strip-active'); - } - this.expandGroup(this.getGroupEl(group)); - if(group !== this.activeGroup) { - return this.setActiveGroup(group); - } + return Ext.create('Ext.data.TreeStore', { + fields: ['id', 'text', 'activeGroup', 'activeTab'], + root: {expanded: true}, + proxy: { + type: 'memory', + data: data + } + }); }, - getFrameHeight: function(){ - var h = this.el.getFrameWidth('tb'); - h += (this.tbar ? this.tbar.getHeight() : 0) + - (this.bbar ? this.bbar.getHeight() : 0); - - return h; + /** + * Returns the item that is currently active inside this GroupTabPanel. + * @return {Ext.Component/Integer} The currently active item + */ + getActiveTab: function() { + return this.activeTab; }, - adjustBodyWidth: function(w){ - return w - this.tabWidth; + /** + * Returns the root group item that is currently active inside this GroupTabPanel. + * @return {Ext.Component/Integer} The currently active root group item + */ + getActiveGroup: function() { + return this.activeGroup; } }); - -Ext.reg('grouptabpanel', Ext.ux.GroupTabPanel);