I was working on a requirement where in my TabPanel we have many tabs open parallelly. If user wants to close any if the tab, we should first ask user whether he really want to close this tab. If in the TabPanel we have only one tab remaining then we should not allow user from closing this only tab by showing error message.
ExtJS provide TabPanel where we can add Panels as an item. To implement the above requirement in ExtJS first we need to extend Panel to create a customized panel with beforeclose event. If user wants to close it, first check the number of items in current TabPanel. If item count is more than 1 then show message else show error message and return false. Returning false from beforeclose event will prevent calling close event and hence panel will not close.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
Ext.onReady(function () {
/****************
* first create a customized Panel which
* later we can extends
*/
Ext.define(‘TechZoo.BaseTab’, {
extend : ‘Ext.panel.Panel’,
alias : ‘widget.base_tab’,
closable: true,
border : false,
initComponent : function() {
this.addListener({
beforeclose :{
fn : this.onClose,
scope : this
}
});
this.callParent(arguments);
},
onClose: function(me) {
var bar = me.up(‘tabpanel’).getTabBar(),
tabsCount = bar.items.length;
if(tabsCount > 1) {
Ext.Msg.show({
title : ‘Confirm’,
msg : ‘Are you sure you want to close \” + me.title +‘\’ panel ?’,
width : 400,
icon : Ext.MessageBox.INFO,
buttons : Ext.MessageBox.OKCANCEL,
fn : function(btn){
switch(btn){
case ‘ok’:
this.ownerCt.remove(me);
break;
case ‘cancel’:
// leave blank if no action required on cancel
break;
}
},
scope: this
});
}
else {
Ext.Msg.show({
title : ‘Error !’,
msg : ‘You can\’t close \” + me.title +‘\’ panel.
‘+ ‘
Application requires atleast one panel to be rendered.’, width : 400,
icon : Ext.MessageBox.ERROR,
buttons : Ext.Msg.OK
});
}
return false;
}
});
//exnent the basetan panel
Ext.define(‘TechZoo.Tab1’, {
extend : ‘TechZoo.BaseTab’,
alias : ‘widget.cTab’
});
//Now create a tabpabel contain Tabs
Ext.create(‘Ext.tab.Panel’, {
renderTo : ‘output’,
width : 400,
height : 300,
items : [{
xtype : ‘cTab’,
title : ‘Tab1’
},{
xtype : ‘cTab’,
title : ‘Tab2’
},{
xtype : ‘cTab’,
title : ‘Tab3’
}]
});
});
|
Output:
When tab count is greater then 1, show confirmation message.
and when tab count equal to 1, show error message and return false.
Source techzoo.org
