examples/ux/GroupTabPanel.js

   1 /**
   2  * @author Nicolas Ferrero
   3  * @class Ext.ux.GroupTabPanel
   4  * @extends Ext.Container
   5  * A TabPanel with grouping support.
   6  */
   7 Ext.define('Ext.ux.GroupTabPanel', {
   8     extend: 'Ext.Container',
   9
  10     alias: 'widget.grouptabpanel',
  11
  12     requires:[
  13         'Ext.data.*',
  14         'Ext.tree.*',
  15         'Ext.layout.*'
  16     ],
  17
  18     baseCls : Ext.baseCSSPrefix + 'grouptabpanel',
  19
  20     initComponent: function(config) {
  21         var me = this,
  22             items = [];
  23
  24         Ext.apply(me, config);
  25
  26         me.store = me.createItemsStore();
  27         me.layout = {
  28             type: 'hbox',
  29             pack: 'start',
  30             align: 'stretch'
  31         };
  32         me.defaults = {
  33             border: false
  34         };
  35
  36         me.items = Ext.each(me.items, function(item) {
  37             items.push(item.items);
  38         });
  39
  40         me.items = [{
  41             xtype: 'treepanel',
  42             cls: 'x-tree-panel x-grouptabbar',
  43             width: 150,
  44             rootVisible: false,
  45             height: 400,
  46             store: me.store,
  47             hideHeaders: true,
  48             useArrows: true,
  49             animate: false,
  50             viewConfig: {
  51                 overItemCls: ''
  52             },
  53             columns: [{
  54                 xtype: 'treecolumn',
  55                 sortable: false,
  56                 dataIndex: 'text',
  57                 flex: 1,
  58                 renderer: function (value, cell, node, idx1, idx2, store, tree) {
  59                     var cls = '';
  60
  61                     if (!node.data.activeGroup) {
  62                         cls += ' x-inactive-group';
  63                     } else if (node.parentNode && node.parentNode.parentNode === null) {
  64                         cls += ' x-grouptab-first';
  65                         if (node.previousSibling) {
  66                             cls += ' x-grouptab-prev';
  67                         }
  68                     } else if (node.nextSibling === null) {
  69                         cls += ' x-grouptab-last';
  70                     } else {
  71                         cls += ' x-grouptab-center';
  72                     }
  73                     if (node.data.activeTab) {
  74                             cls += ' x-active-tab';
  75                     }
  76                     cell.tdCls= 'x-grouptab'+ cls;
  77
  78                     return value;
  79                 }
  80              }]
  81         },{
  82             xtype: 'container',
  83             flex: 1,
  84             layout: 'card',
  85             activeItem: me.mainItem,
  86             baseCls: Ext.baseCSSPrefix + 'grouptabcontainer',
  87             items: items
  88         }];
  89
  90         me.addEvents(
  91             /**
  92              * @event beforetabchange
  93              * Fires before a tab change (activated by {@link #setActiveTab}). Return false in any listener to cancel
  94              * the tabchange
  95              * @param {Ext.ux.GroupTabPanel} grouptabPanel The GroupTabPanel
  96              * @param {Ext.Component} newCard The card that is about to be activated
  97              * @param {Ext.Component} oldCard The card that is currently active
  98              */
  99             'beforetabchange',
 100
 101             /**
 102              * @event tabchange
 103              * Fires when a new tab has been activated (activated by {@link #setActiveTab}).
 104              * @param {Ext.ux.GroupTabPanel} grouptabPanel The GroupTabPanel
 105              * @param {Ext.Component} newCard The newly activated item
 106              * @param {Ext.Component} oldCard The previously active item
 107              */
 108             'tabchange',
 109
 110             /**
 111              * @event beforegroupchange
 112              * Fires before a group change (activated by {@link #setActiveGroup}). Return false in any listener to cancel
 113              * the groupchange
 114              * @param {Ext.ux.GroupTabPanel} grouptabPanel The GroupTabPanel
 115              * @param {Ext.Component} newGroup The root group card that is about to be activated
 116              * @param {Ext.Component} oldGroup The root group card that is currently active
 117              */
 118             'beforegroupchange',
 119
 120             /**
 121              * @event groupchange
 122              * Fires when a new group has been activated (activated by {@link #setActiveGroup}).
 123              * @param {Ext.ux.GroupTabPanel} grouptabPanel The GroupTabPanel
 124              * @param {Ext.Component} newGroup The newly activated root group item
 125              * @param {Ext.Component} oldGroup The previously active root group item
 126              */
 127             'groupchange'
 128         );
 129
 130         me.callParent(arguments);
 131         me.setActiveTab(me.activeTab);
 132         me.setActiveGroup(me.activeGroup);
 133         me.mon(me.down('treepanel').getSelectionModel(), 'select', me.onNodeSelect, me);
 134     },
 135
 136     /**
 137      * @private
 138      * Node selection listener.
 139      */
 140     onNodeSelect: function (selModel, node) {
 141         var me = this,
 142             currentNode = me.store.getRootNode(),
 143             parent;
 144
 145         if (node.parentNode && node.parentNode.parentNode === null) {
 146             parent = node;
 147         } else {
 148             parent = node.parentNode;
 149         }
 150
 151         if (me.setActiveGroup(parent.get('id')) === false || me.setActiveTab(node.get('id')) === false) {
 152             return false;
 153         }
 154
 155         while(currentNode) {
 156             currentNode.set('activeTab', false);
 157             currentNode.set('activeGroup', false);
 158             currentNode = currentNode.firstChild || currentNode.nextSibling || currentNode.parentNode.nextSibling;
 159         }
 160
 161         parent.set('activeGroup', true);
 162
 163         parent.eachChild(function(child) {
 164
 165             child.set('activeGroup', true);
 166         });
 167         node.set('activeTab', true);
 168         selModel.view.refresh();
 169     },
 170
 171     /**
 172      * Makes the given component active (makes it the visible card in the GroupTabPanel's CardLayout)
 173      * @param {Ext.Component} cmp The component to make active
 174      */
 175     setActiveTab: function(cmp) {
 176         var me = this,
 177             newTab = cmp,
 178             oldTab;
 179
 180         if(Ext.isString(cmp)) {
 181             newTab = Ext.getCmp(newTab);
 182         }
 183
 184         if (newTab === me.activeTab) {
 185             return false;
 186         }
 187
 188         oldTab = me.activeTab;
 189         if (me.fireEvent('beforetabchange', me, newTab, oldTab) !== false) {
 190              me.activeTab = newTab;
 191              if (me.rendered) {
 192                  me.down('container[baseCls=' + Ext.baseCSSPrefix + 'grouptabcontainer' + ']').getLayout().setActiveItem(newTab);
 193              }
 194              me.fireEvent('tabchange', me, newTab, oldTab);
 195          }
 196          return true;
 197     },
 198
 199     /**
 200      * Makes the given group active
 201      * @param {Ext.Component} cmp The root component to make active.
 202      */
 203     setActiveGroup: function(cmp) {
 204         var me = this,
 205             newGroup = cmp,
 206             oldGroup;
 207
 208         if(Ext.isString(cmp)) {
 209             newGroup = Ext.getCmp(newGroup);
 210         }
 211
 212         if (newGroup === me.activeGroup) {
 213             return true;
 214         }
 215
 216         oldGroup = me.activeGroup;
 217         if (me.fireEvent('beforegroupchange', me, newGroup, oldGroup) !== false) {
 218              me.activeGroup = newGroup;
 219              me.fireEvent('groupchange', me, newGroup, oldGroup);
 220          } else {
 221              return false;
 222          }
 223          return true;
 224     },
 225
 226     /**
 227      * @private
 228      * Creates the TreeStore used by the GroupTabBar.
 229      */
 230     createItemsStore: function() {
 231         var me = this,
 232             data = {
 233             text:'.',
 234             children: []
 235         };
 236         me.activeGroup = me.activeGroup || 0;
 237
 238         Ext.each(me.items, function(item, idx){
 239             var items = item.items,
 240                 rootItem = (items[item.mainItem] || items[0]),
 241                 root = {
 242                     children: []
 243                 };
 244
 245             if (!rootItem.id) {
 246                 rootItem.id = Ext.id();
 247             }
 248
 249             root.id = rootItem.id;
 250             root.text = rootItem.title;
 251             root.iconCls = rootItem.iconCls;
 252             delete rootItem.iconCls;
 253             delete rootItem.title;
 254             root.expanded = true;
 255             root.activeGroup = (me.activeGroup === idx);
 256             root.activeTab = root.activeGroup ? true : false;
 257             if (root.activeTab) {
 258                 me.activeTab = root.id;
 259             }
 260
 261             if (root.activeGroup) {
 262                 me.mainItem = item.mainItem || 0;
 263                 me.activeGroup = root.id;
 264             }
 265
 266             Ext.each(item.items, function(childItem) {
 267                 if (!childItem.id) {
 268                     childItem.id = Ext.id();
 269                 }
 270                 if(childItem.id !== root.id) {
 271                     var child = {
 272                         id: childItem.id,
 273                         leaf: true,
 274                         text: childItem.title,
 275                         iconCls: childItem.iconCls,
 276                         activeTab: false
 277                     };
 278                     delete childItem.title;
 279                     delete childItem.iconCls;
 280
 281                     child.activeGroup = root.activeGroup;
 282                     root.children.push(child);
 283                 }
 284             }, me);
 285
 286             data.children.push(root);
 287
 288       }, me);
 289
 290        return Ext.create('Ext.data.TreeStore', {
 291             fields: ['id', 'text', 'activeGroup', 'activeTab'],
 292             root: {expanded: true},
 293             proxy: {
 294                 type: 'memory',
 295                 data: data
 296             }
 297         });
 298     },
 299
 300     /**
 301      * Returns the item that is currently active inside this GroupTabPanel.
 302      * @return {Ext.Component/Integer} The currently active item
 303      */
 304     getActiveTab: function() {
 305         return this.activeTab;
 306     },
 307
 308     /**
 309      * Returns the root group item that is currently active inside this GroupTabPanel.
 310      * @return {Ext.Component/Integer} The currently active root group item
 311      */
 312     getActiveGroup: function() {
 313         return this.activeGroup;
 314     }
 315 });