View Full Version : How to prevent Ext.form.Panel from opening multi times?

14 Aug 2012, 11:21 PM
Hi all,
after opening a Ext.form.Panel normally the same panel should not be opened again as long as the same panel is open. How can we solve the same panel opening multiple times?
Thanks in advance...

15 Aug 2012, 5:04 AM
The code which creates the panel should check for an existing instance, prior to creating a new instance. This can be accomplished in a variety of ways, depending on your app's architecture.

Are you using MVC architecture? Is your panel defined as a class or are you calling Ext.create('Ext.panel.Panel', {<config here>})?

16 Aug 2012, 2:56 AM
I only want to prevent users from opening the same tab opened before. I use MVC and there is a method used for opening new tab. I simply send this method the tab's id I want to open. At this stage, I think I have to check if the requested tab is already opened and then if no open this tab and make it active tab. Could you provide a sample method performing these steps please?

16 Aug 2012, 6:01 AM

you may use getCmp , to find if a Panel by that ID exists or not.

var yourPanel= Ext.getCmp('panelId'),
if (!yourPanel) {
//panel not exists
//panel exists.

also, if you have hide or show functionality with your panels, you may try Ext.Component.isVisible() to detect your panel is visible or not.

17 Aug 2012, 4:41 AM
If you wish to avoid hard-coded IDs in your app and your tab class has a 'widget' alias, you can also do something like below. Note that this code takes into account tabs which are hidden/shown, as needed:

var yourTab = yourTabPanel.child("yourWidgetName");

if (yourTab == null) {
yourTab = <create new tab component>;
else {
if(yourTab.tab.hidden == true) {


17 Aug 2012, 5:19 AM
Thank you very much for your helps. Actually now the only problem I have is that; I can open and close a tab and switch to another tab by opening it. Also this time the open tab is not opened again as long as it is open. But, after closing and opening a tab, the data cannot be listed on the grid on it as listed the first opening. The problem is related to getUpdater() method as ExtJS4 does not have this method. So, which method should I use instead of getUpdater() in order to perform an update on the tab indicated below? :-/ Thanks in advance...

var tabPanel = Ext.getCmp('tab-panel-id');
var myTab = tabPanel.getChildByElement('myTabId', false);
var menu = Ext.menu.MenuMgr.get('myTabId');

var updater =myTab.getUpdater();
updater.on('beforeupdate', function (x, y, z) {});
updater.on('update', function (x, y) {});

myTab = addTab(tabId, targetUrlParam);

24 Aug 2012, 6:01 AM
Thanks for good explanations. You are right, but I think every time tab is opened in tabpanel, we should connect the database and select the records as the records may be changed commonly. I think the problem is related to getUpdater() method of Ext.tab.Panel. We were using that method before, but by the release of ExtJs4, I do not know which method performs its job. Could you give an example please what changes has to be made in order to transform these code to ExtJs4.1? Thanks in advance...

Note: tab is a components in Ext.tab.Panel type.

var updater =tab.getUpdater();
updater.on('beforeupdate', function (x, y, z) {/**/});
updater.on('update', function (x, y) {/**/});
tab.setTitle('any title');