    /**
     * @author Nicolas Ferrero
     * @class Ext.ux.GroupTabPanel
     * @extends Ext.Container
     * A TabPanel with grouping support.
     */
    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;

            Ext.apply(me, config);

            // Processes items to create the TreeStore and also set up
            // "this.cards" containing the actual card items.
            me.store = me.createTreeStore();

            me.layout = {
                type: 'hbox',
                align: 'stretch'
            };
            me.defaults = {
                border: false
            };

            me.items = [{
                xtype: 'treepanel',
                cls: 'x-tree-panel x-grouptabbar',
                width: 150,
                rootVisible: false,
                store: me.store,
                hideHeaders: true,
                animate: false,
                processEvent: Ext.emptyFn,
                viewConfig: {
                    overItemCls: '',
                    getRowClass: me.getRowClass,
                    itemSelector: 'div.' + Ext.baseCSSPrefix + 'grouptab-row',
                    cellSelector: 'div.' + Ext.baseCSSPrefix + 'grouptab',
                    getTableChunker: function() {
                        return Ext.ux.GroupTreeChunker;
                    },
                    onHeaderResize: function(header, w, suppressFocus) {
                        var me = this,
                            el = me.el;

                        if (el) {
                            el.select('div.' + Ext.baseCSSPrefix + 'grid-table-resizer').setWidth(me.headerCt.getFullWidth());
                            if (!me.ignoreTemplate) {
                                me.setNewTemplate();
                            }
                            if (!suppressFocus) {
                                me.el.focus();
                            }
                            me.forceReflow();
                        }
                    }
                },
                columns: [{
                    xtype: 'treecolumn',
                    sortable: false,
                    dataIndex: 'text',
                    flex: 1,
                    renderer: function (value, cell, node, idx1, idx2, store, tree) {
                        var cls = '';

                        if (node.parentNode && node.parentNode.parentNode === null) {
                            cls += ' x-grouptab-first';
                            if (node.previousSibling) {
                                cls += ' x-grouptab-prev';
                            }
                            if (!node.get('expanded')) {
                                cls += ' x-grouptab-last';
                            }
                        } 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: me.cards
            }];

            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'
            );

            me.callParent(arguments);
            me.setActiveTab(me.activeTab);
            me.setActiveGroup(me.activeGroup);
            me.mon(me.down('treepanel').getSelectionModel(), 'select', me.onNodeSelect, me);
        },

        getRowClass: function(node, rowIndex, rowParams, store) {
            var cls = '';
            if (node.data.activeGroup) {
               cls += ' x-active-group';
            }
            return cls;
        },

        /**
         * @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 (me.setActiveGroup(parent.get('id')) === false || me.setActiveTab(node.get('id')) === false) {
                return false;
            }

            while (currentNode) {
                currentNode.set('activeTab', false);
                currentNode.set('activeGroup', false);
                currentNode = currentNode.firstChild || currentNode.nextSibling || currentNode.parentNode.nextSibling;
            }

            parent.set('activeGroup', true);
            parent.eachChild(function(child) {
                child.set('activeGroup', true);
            });
            node.set('activeTab', true);
            selModel.view.refresh();
        },

        /**
         * 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);
            }

            if (newTab === me.activeTab) {
                return false;
            }

            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;
        },

        /**
         * 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);
            }

            if (newGroup === me.activeGroup) {
                return true;
            }

            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;
        },

        /**
         * @private
         * Creates the TreeStore used by the GroupTabBar.
         */
        createTreeStore: function() {
            var me = this,
                groups = me.prepareItems(me.items),
                data = {
                    text: '.',
                    children: []
                },
                cards = me.cards = [];
            me.activeGroup = me.activeGroup || 0;

            Ext.each(groups, function(groupItem, idx) {
                var leafItems = groupItem.items.items,
                    rootItem = (leafItems[groupItem.mainItem] || leafItems[0]),
                    groupRoot = {
                        children: []
                    };

                // Create the root node of the group
                groupRoot.id = rootItem.id;
                groupRoot.text = rootItem.title;
                groupRoot.iconCls = rootItem.iconCls;

                groupRoot.expanded = true;
                groupRoot.activeGroup = (me.activeGroup === idx);
                groupRoot.activeTab = groupRoot.activeGroup ? true : false;
                if (groupRoot.activeTab) {
                    me.activeTab = groupRoot.id;
                }

                if (groupRoot.activeGroup) {
                    me.mainItem = groupItem.mainItem || 0;
                    me.activeGroup = groupRoot.id;
                }

                Ext.each(leafItems, function(leafItem) {
                    // First node has been done
                    if (leafItem.id !== groupRoot.id) {
                        var child = {
                            id: leafItem.id,
                            leaf: true,
                            text: leafItem.title,
                            iconCls: leafItem.iconCls,
                            activeGroup: groupRoot.activeGroup,
                            activeTab: false
                        };
                        groupRoot.children.push(child);
                    }

                    // Ensure the items do not get headers
                    delete leafItem.title;
                    delete leafItem.iconCls;
                    cards.push(leafItem);
                });

                data.children.push(groupRoot);
          });

           return Ext.create('Ext.data.TreeStore', {
                fields: ['id', 'text', 'activeGroup', 'activeTab'],
                root: {
                    expanded: true
                },
                proxy: {
                    type: 'memory',
                    data: data
                }
            });
        },

        /**
         * Returns the item that is currently active inside this GroupTabPanel.
         * @return {Ext.Component/Number} The currently active item
         */
        getActiveTab: function() {
            return this.activeTab;
        },

        /**
         * Returns the root group item that is currently active inside this GroupTabPanel.
         * @return {Ext.Component/Number} The currently active root group item
         */
        getActiveGroup: function() {
            return this.activeGroup;
        }
    });

    /**
     * Allows GroupTab to render a table structure.
     */
    Ext.define('Ext.ux.GroupTreeChunker', {
        singleton: true,
        requires: ['Ext.XTemplate'],
        metaTableTpl: [
            '{%if (this.openTableWrap)out.push(this.openTableWrap())%}',
            '<div class="' + Ext.baseCSSPrefix + 'grid-table-resizer" border="0" cellspacing="0" cellpadding="0" {[this.embedFullWidth(values)]}>',
                '{[this.openRows()]}',
                    '{row}',
                '{[this.closeRows()]}',
            '</div>',
            '{%if (this.closeTableWrap)out.push(this.closeTableWrap())%}'
        ],

        constructor: function() {
            Ext.XTemplate.prototype.recurse = function(values, reference) {
                return this.apply(reference ? values[reference] : values);
            };
        },

        embedFullWidth: function(values) {
            var result = 'style="width:{fullWidth}px;';

            // If there are no records, we need to give the table a height so that it
            // is displayed and causes q scrollbar if the width exceeds the View's width.
            if (!values.rowCount) {
                result += 'height:1px;';
            }
            return result + '"';
        },

        openRows: function() {
            return '<tpl for="rows">';
        },

        closeRows: function() {
            return '</tpl>';
        },

        metaRowTpl: [
            '<div class="' + Ext.baseCSSPrefix + 'grouptab-row {[this.embedRowCls()]}" {[this.embedRowAttr()]}>',
                '<tpl for="columns">',
                    '<div class="{cls} ' + Ext.baseCSSPrefix + 'grouptab-cell ' + Ext.baseCSSPrefix + 'grid-cell-{columnId} {{id}-modified} {{id}-tdCls} {[this.firstOrLastCls(xindex, xcount)]}" {{id}-tdAttr}>',
                        '<div {unselectableAttr} class="' + Ext.baseCSSPrefix + 'grid-cell-inner {unselectableCls}" style="text-align: {align}; {{id}-style};">{{id}}</div>',
                        '<div class="x-grouptabs-corner x-grouptabs-corner-top-left" id="ext-gen25"></div>',
                        '<div class="x-grouptabs-corner x-grouptabs-corner-bottom-left" id="ext-gen26"></div>',
                    '</div>',
                '</tpl>',
            '</div>'
        ],

        firstOrLastCls: function(xindex, xcount) {
            if (xindex === 1) {
                return Ext.view.Table.prototype.firstCls;
            } else if (xindex === xcount) {
                return Ext.view.Table.prototype.lastCls;
            }
        },

        embedRowCls: function() {
            return '{rowCls}';
        },

        embedRowAttr: function() {
            return '{rowAttr}';
        },

        getTableTpl: function(cfg, textOnly) {
            var tpl,
                tableTplMemberFns = {
                    openRows: this.openRows,
                    closeRows: this.closeRows,
                    embedFullWidth: this.embedFullWidth
                },
                tplMemberFns = {},
                features = cfg.features || [],
                ln = features.length,
                i  = 0,
                memberFns = {
                    embedRowCls: this.embedRowCls,
                    embedRowAttr: this.embedRowAttr,
                    firstOrLastCls: this.firstOrLastCls,
                    unselectableAttr: cfg.enableTextSelection ? '' : 'unselectable="on"',
                    unselectableCls: cfg.enableTextSelection ? '' : Ext.baseCSSPrefix + 'unselectable'
                },
                // copy the default
                metaRowTpl = Array.prototype.slice.call(this.metaRowTpl, 0),
                metaTableTpl;

            for (; i < ln; i++) {
                if (!features[i].disabled) {
                    features[i].mutateMetaRowTpl(metaRowTpl);
                    Ext.apply(memberFns, features[i].getMetaRowTplFragments());
                    Ext.apply(tplMemberFns, features[i].getFragmentTpl());
                    Ext.apply(tableTplMemberFns, features[i].getTableFragments());
                }
            }

            metaRowTpl = new Ext.XTemplate(metaRowTpl.join(''), memberFns);
            cfg.row = metaRowTpl.applyTemplate(cfg);

            metaTableTpl = new Ext.XTemplate(this.metaTableTpl.join(''), tableTplMemberFns);

            tpl = metaTableTpl.applyTemplate(cfg);

            // TODO: Investigate eliminating.
            if (!textOnly) {
                tpl = new Ext.XTemplate(tpl, tplMemberFns);
            }
            return tpl;

        }
    });