日期:2014-05-16  浏览次数:20343 次

Extjs关闭tabPanel时的确认
操作员在切换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>