Extjs confirmation when closing tabPanel

Operator when switching tab, often misuse, resulting tab is closed, and can not be restored, made previous operation is lost.

The solution is to increase a close, that, to study the events under the TabPanel, may be used incident beforeclose, in the production of this event, it is the operation to confirm the entry point.

Ext.MessageBox.show.

The key code is simple, the main principle is to add a tab to sign a listeners, listening to trigger the event, matching the event's name, if it is "beforeclose", the Executive Ext.MessageBox.show pop-up window of a question, ask for confirmation Close tab .

Note that: Ext.MessageBox.show occurred, and did not stop the run as window.confirm, so will continue to implement the following code.

Therefore, in order to avoid this situation, and after calling Ext.MessageBox.show, Ext the MessageBox pop up, but the process will continue to implement to return false, this would make the tab's close event is not triggered without being shut down, Implementation tab of the temporarily closed.

Asked the window when the user clicks "No" button, without any action on the line, as close event has not triggered;
Asked the window when the user clicks "Yes" button, to re-invoke the remove method of tabs to achieve closure tab.

<script language="JavaScript">
var tabs;
Ext.onReady(function(){
    tabs = new Ext.TabPanel({
        renderTo: '#contentPanel',
        resizeTabs:false,
        minTabWidth: 115,
        tabWidth:235,
        activeItem:0,
        enableTabScroll:true,
        width:600,
        height:250,
        border:true,
        defaults: {autoScroll:true},
        items:[{
            title:' Start page  ',
            closable:false,
            html:'<b>haha</b>'
        },{
            autoWidth:true,
            title: ' Control items  1',
            id: 'tab-1',
            html: " The window contents  1",
            closable: true,
            listeners: {
                'beforeclose':conrirmTab
            }
        },{
            autoWidth:true,
            title: ' Control items  2',
            id: 'tab-2',
            html: " The window contents  2",
            closable: true,
            listeners: {
                 'beforeclose': conrirmTab
            }
       }]
    });
});

function conrirmTab(e) {
        Ext.MessageBox.show({
            title:' Operation confirmation  ',
            msg:' Are you sure you want to exit    <b>'+e.title+'</b>  Mody  ?',
            buttons:Ext.MessageBox.YESNO,
            icon:Ext.MessageBox.QUESTION,
            fn:function(btn, text) {
                if(btn=='yes') {
                    tabs.remove(e);
                }
            }
        });
        return false;
}
</script>
分类:Web 时间:2010-06-02 人气:363
分享到:
blog comments powered by Disqus

相关文章

  • Javascript Closure 2009-04-22

    Translation Original: http://blog.csdn.net/Ant_Yan/archive/2008/09/24/2972572.aspx English Original: http://jibbering.com/faq/faq_notes/closures.html Closure Introduction Js closure is a closure of the code block (it is generally a function), it cont

  • Depth understanding of Javascript closure (closure) 2009-03-06

    Recently, online access to a lot of Javascript closure (closure) of relevant information and writing are very academic and professional. For beginners to understand let alone closure, and even the language describing it is very difficult to understan

  • EJB2.0 Tutorial Xiangjie EJB technology and implementation principle (1) 2010-06-14

    EJB2.0 Tutorial Xiangjie EJB technology and implementation principle (1) http://developer.51cto.com 2009-06-11 16:25 IT technology I want to comment (0) This article introduces you to the remote EJB is called javaBean. As well as details of the EJB2.

  • java HashMap implementation principle [Z] 2010-10-12

    In-depth collection of Java Learning Series: HashMap implementation principle 1. HashMap Overview: HashMap Hash table based on asynchronous Map interface implementation. This implementation provides all optional map operations, and allows the use of

  • In-depth collection of Java Learning Series: HashMap implementation principle (to) 2010-10-29

    In-depth collection of Java Learning Series: HashMap implementation principle Articles Category: Java Programming 1. HashMap Overview: HashMap Hash table based on asynchronous Map interface implementation. This implementation provides all optional ma

  • With regard to the implementation of the order of javascript code 2009-02-21

    With regard to the implementation of the order of javascript 1. On the page, JS implementation of the order of the first block in accordance with the order to execute <Script>, such as <Script> alert ( 'first implementation.'); </ Script>

  • (Turn) in-depth understanding of Javascript closure (closure) 2010-04-24

    Recent on-line access to a lot of Javascript closure (closure) related information is written mostly academic and professional. For beginners, let alone understand the closure, and even the narrative are hard to understand. The purpose of this writin

  • In-depth understanding of Javascript closure (closure) 2010-05-31

    Thank http://softbbs.pconline.com.cn/9497825.html Recent on-line access to a lot of Javascript closure (closure) related information is written mostly academic and professional. For beginners, let alone understand the closure, and even the narrative

  • [Reprinted] in-depth understanding of JavaScript closure (closure) 2010-08-20

    Reprinted] [ depth understanding of JavaScript closure (closure) [reproduced Source: http://www.felixwoo.com/archives/247] Recent on-line access to a lot of Javascript closure (closure) related information is written mostly academic and professional.

  • No website MSN Robot rice Implementation Principle and Code Dotmsn2.0 2010-04-12

    "Transfer from http://tb.blog.csdn.net/TrackBack.aspx?PostId=1749348 Authors: funy> No rice, jack distortion are MSN, QQ, GTalk Robot Implementation Principle and Code - No rice, jack distortion MSN Robot implementation principle (DotMSN2.0 analyt

iOS 开发

Android 开发

Python 开发

JAVA 开发

开发语言

PHP 开发

Ruby 开发

搜索

前端开发

数据库

开发工具

开放平台

Javascript 开发

.NET 开发

云计算

服务器

Copyright (C) codeweblog.com, All Rights Reserved.

CodeWeblog.com 版权所有 闽ICP备15018612号

processed in 0.037 (s). 13 q(s)