ExtJS TabPanel 双击标签关闭该页

最新推荐文章于 2025-11-19 19:13:46 发布

最新推荐文章于 2025-11-19 19:13:46 发布 · 138 阅读

文章标签：

#EXT

ExtJS 专栏收录该内容

40 篇文章

订阅专栏

本文介绍如何在ExtJS中为TabPanel组件添加自定义的双击关闭功能，通过监听'dblclick'事件实现对标签页的关闭操作。

var tabs = new Ext.TabPanel({
        renderTo: 'tabs1',
        width:450,
        activeTab: 0,
        frame:true,
        defaults:{autoHeight: true},
        items:[
            {contentEl:'script', title: 'Short Text'},
            {contentEl:'markup', title: 'Long Text'}
        ],
        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.onTitleDbClick,this);
		    },
                     //ADD: handler
		    onTitleDbClick: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);                
                       }
		    }
    });

回答问题: http://www.iteye.com/problems/19385

可以进一步修改为添加一个titiledbclick event.