ExtJS 4: show confirmation dialog before closing Tab

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.

Output:

When tab count is greater then 1, show confirmation message.

and when tab count equal to 1, show error message and return false.

View Online Demo

About the Author

has written 68 posts.

I Love Coding, Analyzing, Designing and doing it the right way. I am obsessed about learn anything new daily and sharing what I have learn each Day. This Blog is journey of my Zeal, going through step by step to the mountain of desire to become prefect. Google Wanna Hire me ?

Copyright © 2017 http://www.techzoo.org. All rights reserved.
Proudly powered by WordPress. Developed by 7Tech Solutions