+Ext.define('Ext.ux.GroupTabPanel', {
+ extend: 'Ext.Container',
+
+ alias: 'widget.grouptabpanel',
+
+ requires:[
+ 'Ext.data.*',
+ 'Ext.tree.*',
+ 'Ext.layout.*'
+ ],
+
+ baseCls : Ext.baseCSSPrefix + 'grouptabpanel',
+
+ initComponent: function(config) {
+ var me = this,
+ items = [];
+
+ Ext.apply(me, config);
+
+ me.store = me.createItemsStore();
+ me.layout = {
+ type: 'hbox',
+ pack: 'start',
+ align: 'stretch'
+ };
+ me.defaults = {
+ border: false
+ };
+
+ 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
+ */