ExtJS TabPanel 标签操作

ExtJS TabPanel 标签操作
示例目标：
    1.鼠标右键于标签上:关闭标签,关闭其他标签,关闭所有标签
    2.双击关闭标签:参考 http://atian25.iteye.com/blog/413920
    3.标签加入样式图片
    4.添加新的TabPanel
    5.隐藏TabPanel
主要代码:

Ext.onReady(function () {
    Ext.override(Ext.TabPanel, {
        initEvents: function () {
            Ext.TabPanel.superclass.initEvents.call(this);
            this.on('add', this.onAdd, this, {
                target: this
            });
            this.on('remove', this.onRemove, this, {
                target: this
            });
            this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);
            this.mon(this.strip, 'contextmenu', this.onStripContextMenu, this);
            if (this.enableTabScroll) {
                this.mon(this.strip, 'mousewheel', this.onWheel, this);
            }
            //ADD:monitor title dbclick   
            this.mon(this.strip, 'dblclick', this.onTitleDblClick, this);
        }
    });
    var tabs = new Ext.TabPanel({
        id: 'tabs',
        renderTo: document.body,
        width: 500,
        resizeTabs: true,
        enableTabScroll: true,
        height: 400,
        frame: true,
        activeTab: 0,
        frame: false,
        enableTabScroll: true,
        defaults: {
            autoHeight: true
        },
        items: [{
            contentEl: 'script',
            title: 'Short Text',
            html: '内容区',
            enableTabScroll: true,
            iconCls: 'tabIcon',
            tabWidth: 200,
            width: 220,
            closable: true
        },
        {
            contentEl: 'markup',
            title: 'Long Text',
            html: 'tab2',
            enableTabScroll: true,
            iconCls: 'tabIcon',
            tabWidth: 200,
            width: 220,
            closable: true
        },
        {
            title: 'tab3',
            html: 'tab2',
            enableTabScroll: true,
            iconCls: 'tabIcon',
            tabWidth: 200,
            width: 220,
            closable: true
        }],
        plugins: new Ext.ux.TabCloseMenu(),
        //ADD: handler   
        onTitleDblClick: function (e, target, o) {
            var t = this.findTargets(e);
            if (t.item.fireEvent('beforeclose', t.item) !== false) {
                t.item.fireEvent('close', t.item);
                this.remove(t.item);
            }
        },
        tbar: [{
            text: '隐藏所有',
            handler: function () {
                Ext.getCmp('tabs').hide();
            }
        },
        '|', {
            text: '添加新的panel',
            handler: function () {
                Ext.getCmp('tabs').add(new Ext.TabPanel({
                    title: 'newTabPanel',
                    html: 'newTabPanel',
                    enableTabScroll: true,
                    iconCls: 'tabIcon',
                    tabWidth: 200,
                    width: 220,
                    closable: true
                }) //Ext.TabPanel over
                );
            }
        }]
    });
});