ExtJS TabPanel beforeremove beforeclose使用说明
程序员文章站
2022-03-07 11:19:00
当前系统使用extjs做为前端框架,系统首页布局采用border方式,左边手风琴式的菜单栏,中间区域为tabpanel容器,点击左边菜单栏内的对应菜单在中间区域添加对应的p...
当前系统使用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 }
});增加一个新的panelfunction 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了解不深,有路过熟知的朋友望告知真实原因。
当前问题是,想在用户关闭时弹出对话框提示用户,根据用户选择是否销毁当前页面(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 }
});增加一个新的panelfunction 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了解不深,有路过熟知的朋友望告知真实原因。