ExtJS:关闭TabPanel内的Panel时使用TabPanel的’beforeremove’和其内的Panel的’beforeclose’事件弹出关闭确认提示对话框 (修正！！)

现在的位置: 首页 > 综合 > 正文

RSS

ExtJS:关闭TabPanel内的Panel时使用TabPanel的’beforeremove’和其内的Panel的’beforeclose’事件弹出关闭确认提示对话框 (修正！！)

2012年07月20日 ⁄ 综合 ⁄ 共 2568字 ⁄ 字号小中大 ⁄ 评论关闭

当前系统使用Extjs做为前端框架，系统首页布局采用border方式，左边手风琴式的菜单栏，中间区域为TabPanel容器，点击左边菜单栏内的对应菜单在中间区域添加对应的Panel，Panel嵌入添加的gridview；

当前问题是，想在用户关闭时弹出对话框提示用户，根据用户选择是否销毁当前页面(Panel)，或是隐藏当前Panel，保存临时数据；

查看Extjs API文档，对添加的panel监听beforeclose事件

主要代码如下

中间区域部分：

//centerPanel
centerPanel = new Ext.TabPanel({
    id: 'centerPnl'
    , region: 'center'
    , border: false
    , iconCls: 'tabs'
    , enableTabScroll: true
    , items: [{
        title: '首页'
         , autoScroll: true
        }]
    , defaults: { autoScroll: true }
 });

增加一个新的Panel

function addCMUAMS_LogTab() {
    activeCMUAMS_LogTab = centerPanel.add({
        id: 'CMUAMS_LogShowAll'
        , title: '系统日志'
        , iconCls: 'tabs'
        , closable: true
        , bodyStyle: 'padding:10px'
        , items: CMUAMS_LogGrid
        , listeners: { beforeclose:TabCloseConfirm }
    })
    activeCMUAMS_LogTab.show();
}

但是这样的话，情况如下：

Panel在’beforeclose’前已经关闭了；

后来上网Google，查阅资料，忽然想到TabePanel作为容器是不是要在其处先进行事件拦截？

于是修改中间区域部分代码如下

//centerPanel
centerPanel = new Ext.TabPanel({
    id: 'centerPnl'
    , region: 'center'
    , border: false
    , iconCls: 'tabs'
    , enableTabScroll: true
    , items: [{
        title: '首页'
         , autoScroll: true
        }]
    , defaults: { autoScroll: true }
      //首先监听beforeremove事件
    , listeners: { beforeremove: function(ct,component ) { return false; } }
 });

再运行，查看效果：

搞定

想必点击Panel上的关闭按钮时，应该是首先执行的所在TabPanel容器的Remove事件，然后再执行Panel自身的Close事件；

项目赶时间，没过多时间深究了，小弟也是对JS和Extjs了解不深，有路过熟知的朋友望告知真实原因。

-----------------------------------------以下为修正部分---------------------------------------------------------

 昨天发布的上面的内容今天中午实际使用时还是有问题的，具体的就是关闭按钮的时候不能执行；╮(╯_╰)╭（高兴太早）

今天查阅资料做了如下修改：

代码

//beforeremove事件响应函数

　　function removeTabEvent(tabpanel, tab) {
        Ext.MessageBox.show({
            title: '关闭' + tab.title + '窗口确认'
            , msg: '是否关闭当前窗口'
            , buttons: Ext.Msg.YESNO
            , icon: Ext.Msg.QUESTION
            , fn: function(btn,text) {
                if (btn == 'yes') {

　　　　　　　　　　　　//移除beforeremove事件，为了防止tabpanel.remove(tab)时进入死循环
tabpanel.un('beforeremove', removeTabEvent);

　　　　　　　　　　　　//移除tab
tabpanel.remove(tab);

　　　　　　　　　　　　//增加beforeremove事件
                    tabpanel.addListener('beforeremove', removeTabEvent, tabpanel);
                }
            }
        });

　　　　//这一句很关键
        return false;
    }

    //centerPanel
    centerPanel = new Ext.TabPanel({
        id: 'centerPnl'
        , region: 'center'
        , border: false
        , iconCls: 'tabs'
        , enableTabScroll: true
        , items: [{
            title: '首页'
             , autoScroll: true
          }]
        , defaults: { autoScroll: true }

　　　　　//监听beforeremove事件
, listeners: { beforeremove: removeTabEvent }
});

这样只在Tabpanel处对beforeremove事件进行全局拦截。

这样才能完美的解决文章一开始提出的问题；

PS：文章昨天发了，今天就被好多网站转载了，而且没留地址。+_+

参考网址：http://www.extjs.com/forum/showthread.php?t=5846