Extjs关闭tabPanel时的确认

最新推荐文章于 2016-06-25 13:53:17 发布

原创最新推荐文章于 2016-06-25 13:53:17 发布 · 560 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #HTML

ext基础专栏收录该内容

72 篇文章

订阅专栏

本文介绍如何在ExtJS中为TabPanel添加关闭确认功能，防止用户误操作导致工作丢失。通过监听beforeclose事件并使用Ext.MessageBox.show弹窗询问用户是否确认关闭。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

操作员在切换tab的时候，经常误操作，造成tab被关闭，而且无法恢复，先前所做的操作就丢失了。

解决方案是增加个关闭确认，就研究了下TabPanel的事件，用到得事件是beforeclose，在产生这个事件的时候就是操作确认的切入点。

Ext.MessageBox.show。

关键代码很简单，主要原理就是在一个tab签上增加一个listeners，监听触发的事件，匹配事件的名字，如果是“beforeclose”，则执Ext.MessageBox.show弹出一个提问窗口，询问是否确认关闭tab。

需要注意的是：Ext.MessageBox.show发生后，并不会像window.confirm那样阻止程序运行，所以会继续执行下面的代码。

所以，为避免这种情况，调用Ext.MessageBox.show方法后，Ext的MessageBox弹出来了，但程序会继续，执行到return false，这会使该tab的close事件不被触发而不被关闭，实现tab的暂时不关闭。

当用户点击询问窗口的“否”按钮时，不用进行任何操作就行了，因为close事件已经不可能触发了；
当用户点击询问窗口的“是”按钮时，重新调用tabs的remove方法，实现关闭tab。

<script language="JavaScript">
var tabs;
Ext.onReady(function(){
    tabs = new Ext.TabPanel({
        renderTo: '#contentPanel',
        resizeTabs:false,
        minTabWidth: 115,
        tabWidth:235,
        activeItem:0,
        enableTabScroll:true,
        width:600,
        height:250,
        border:true,
        defaults: {autoScroll:true},
        items:[{
            title:'起始页',
            closable:false,
            html:'<b>haha</b>'
        },{
            autoWidth:true,
            title: '管理项1',
            id: 'tab-1',
            html: "窗口内容1",
            closable: true,
            listeners: {
                'beforeclose':conrirmTab
            }
        },{
            autoWidth:true,
            title: '管理项2',
            id: 'tab-2',
            html: "窗口内容2",
            closable: true,
            listeners: {
                 'beforeclose': conrirmTab
            }
       }]
    });
});


function conrirmTab(e) {
	Ext.MessageBox.show({
	    title:'操作确认',
	    msg:'您确定要退出  <b>'+e.title+'</b> 么？',
	    buttons:Ext.MessageBox.YESNO,
	    icon:Ext.MessageBox.QUESTION,
	    fn:function(btn, text) {
	        if(btn=='yes') {
	            tabs.remove(e);
	        }
	    }
	});
	return false;
}
</script>