Roo/bootstrap/dash/TabBox.js

/*
 * - LGPL
 *
 * TabBox
 * 
 */
Roo.bootstrap.dash = Roo.bootstrap.dash || {};

/**
 * @class Roo.bootstrap.dash.TabBox
 * @extends Roo.bootstrap.Component
 * Bootstrap TabBox class
 * @cfg {String} title Title of the TabBox
 * @cfg {String} icon Icon of the TabBox
 * @cfg {Boolean} showtabs (true|false) show the tabs default true
 * @cfg {Boolean} tabScrollable (true|false) tab scrollable when mobile view default false
 * 
 * @constructor
 * Create a new TabBox
 * @param {Object} config The config object
 */


Roo.bootstrap.dash.TabBox = function(config){
    Roo.bootstrap.dash.TabBox.superclass.constructor.call(this, config);
    this.addEvents({
        // raw events
        /**
         * @event addpane
         * When a pane is added
         * @param {Roo.bootstrap.dash.TabPane} pane
         */
        "addpane" : true,
        /**
         * @event activatepane
         * When a pane is activated
         * @param {Roo.bootstrap.dash.TabPane} pane
         */
        "activatepane" : true


    });

    this.panes = [];
};

Roo.extend(Roo.bootstrap.dash.TabBox, Roo.bootstrap.Component,  {

    title : '',
    icon : false,
    showtabs : true,
    tabScrollable : false,

    getChildContainer : function()
    {
        return this.el.select('.tab-content', true).first();
    },

    getAutoCreate : function(){

        var header = {
            tag: 'li',
            cls: 'pull-left header',
            html: this.title,
            cn : []
        };

        if(this.icon){
            header.cn.push({
                tag: 'i',
                cls: 'fa ' + this.icon
            });
        }

        var h = {
            tag: 'ul',
            cls: 'nav nav-tabs pull-right',
            cn: [
                header
            ]
        };

        if(this.tabScrollable){
            h = {
                tag: 'div',
                cls: 'tab-header',
                cn: [
                    {
                        tag: 'ul',
                        cls: 'nav nav-tabs pull-right',
                        cn: [
                            header
                        ]
                    }
                ]
            };
        }

        var cfg = {
            tag: 'div',
            cls: 'nav-tabs-custom',
            cn: [
                h,
                {
                    tag: 'div',
                    cls: 'tab-content no-padding',
                    cn: []
                }
            ]
        };

        return  cfg;
    },
    initEvents : function()
    {
        //Roo.log('add add pane handler');
        this.on('addpane', this.onAddPane, this);
    },
     /**
     * Updates the box title
     * @param {String} html to set the title to.
     */
    setTitle : function(value)
    {
        this.el.select('.nav-tabs .header', true).first().dom.innerHTML = value;
    },
    onAddPane : function(pane)
    {
        this.panes.push(pane);
        //Roo.log('addpane');
        //Roo.log(pane);
        // tabs are rendere left to right..
        if(!this.showtabs){
            return;
        }

        var ctr = this.el.select('.nav-tabs', true).first();


        var existing = ctr.select('.nav-tab',true);
        var qty = existing.getCount();;


        var tab = ctr.createChild({
            tag : 'li',
            cls : 'nav-tab' + (qty ? '' : ' active'),
            cn : [
                {
                    tag : 'a',
                    href:'#',
                    html : pane.title
                }
            ]
        }, qty ? existing.first().dom : ctr.select('.header', true).first().dom );
        pane.tab = tab;

        tab.on('click', this.onTabClick.createDelegate(this, [pane], true));
        if (!qty) {
            pane.el.addClass('active');
        }


    },
    onTabClick : function(ev,un,ob,pane)
    {
        //Roo.log('tab - prev default');
        ev.preventDefault();


        this.el.select('.nav-tabs li.nav-tab', true).removeClass('active');
        pane.tab.addClass('active');
        //Roo.log(pane.title);
        this.getChildContainer().select('.tab-pane',true).removeClass('active');
        // technically we should have a deactivate event.. but maybe add later.
        // and it should not de-activate the selected tab...
        this.fireEvent('activatepane', pane);
        pane.el.addClass('active');
        pane.fireEvent('activate');


    },

    getActivePane : function()
    {
        var r = false;
        Roo.each(this.panes, function(p) {
            if(p.el.hasClass('active')){
                r = p;
                return false;
            }

            return;
        });

        return r;
    }


});