1

我有一个选项卡，用户必须在其中输入信息，并且我想在用户尝试更改选项卡时验证数据。如果数据输入不完整，我会提示用户验证他是否要离开。

我在标签面板上添加了监听器activeitemchange:，可以提示用户。但是，Ext.Msg 似乎并没有阻止方法调用，而且我总是从 activeitemchange 中“返回 true”。

如何更改代码，以便仅在用户单击“是”时更改选项卡？

Ext.Loader.setConfig({enabled: true});

Ext.application({
    name: "Sencha",

    launch: function () {

        var tabPanel = Ext.create('Ext.tab.Panel', {
            layout: 'card',
            tabBarPosition: 'bottom',
            listeners: {

                activeitemchange: function (me, value, oldValue, eOpts) {
                    console.log("activeitemchange");

                    var oldTabIdx = me.getInnerItems().indexOf(oldValue);
                    var newTabIdx = me.getInnerItems().indexOf(me.getActiveItem());

                    console.log(oldTabIdx + " => " + newTabIdx);
                    if (oldTabIdx == 2) {
//                  me.getTabBar().setActiveItem(2);
                        Ext.Msg.confirm("Leave Screen?", "Are you sure you?", function (response) {
                            console.log(response);
                            if (response === 'no') {
                                console.log("User says stay.");
                                return false;
                            } else {
                                console.log("User says leave.");
                                return true;
                            }
                        });
                    }
                    // Always returns true because Ext.Msg.confirm doesn't block
                    return true; // false prevents tab change
                }
            },
            items: [
                {
                    id: 'tab1',
                    title: 'Home',
                    layout: 'fit',
                    xtype: 'container',
                    iconCls: 'home',
                    items: [
                        {html: 'page #1'}
                    ]
                },
                {
                    id: 'tab2',
                    title: 'Two',
                    layout: 'fit',
                    xtype: 'container',
                    iconCls: 'star',
                    items: [
                        {html: 'page #2'}
                    ]
                },
                {
                    id: 'tab3',
                    title: 'three',
                    layout: 'fit',
                    xtype: 'container',
                    iconCls: 'team',
                    items: [
                        {html: 'page #3'}
                    ]
                }
            ]
        });
        Ext.Viewport.add(tabPanel);
    }
});

尝试修复：

Ext.Loader.setConfig({enabled: true});

Ext.application({
    name: "Sencha",

    launch: function () {

        var tabPanel = Ext.create('Ext.tab.Panel', {
            layout: 'card',
            tabBarPosition: 'bottom',
            confirm: true,

            listeners: {

                activeitemchange: {
                    order: 'before',

                    fn: function (list, value, oldValue, eOpts) {
                        var me = this;

                        console.log(me.getConfirm()); // ERROR: getConfirm() is undefined

                        var oldTabIdx = me.getInnerItems().indexOf(oldValue);
                        var newTabIdx = me.getInnerItems().indexOf(value);

                        console.log(oldTabIdx + " => " + newTabIdx);

                        if (oldTabIdx == 2 && me.getConfirm()) {
                            Ext.Msg.confirm("Leave Screen?", "Are you sure you?", function (response) {
                                console.log(response);
                                if (response === 'no') {
                                    console.log("User says stay.");
                                } else {
                                    console.log("User says leave.");
                                    me.setConfirm(false);
                                    me.setActiveItem(newTabIdx);
                                }
                            });
                            return false;
                        } else {
                            me.setConfirm(true);
                        }
                    }

                }
            },

            items: [
                {
                    id: 'tab1',
                    title: 'Home',
                    layout: 'fit',
                    xtype: 'container',
                    iconCls: 'home',
                    items: [
                        {html: 'page #1'}
                    ]
                },
                {
                    id: 'tab2',
                    title: 'Two',
                    layout: 'fit',
                    xtype: 'container',
                    iconCls: 'star',
                    items: [
                        {html: 'page #2'}
                    ]
                },
                {
                    id: 'tab3',
                    title: 'three',
                    layout: 'fit',
                    xtype: 'container',
                    iconCls: 'team',
                    items: [
                        {html: 'page #3'}
                    ]
                }
            ]
        });
        Ext.Viewport.add(tabPanel);
    }
});
4

1 回答 1

3

问题是因为 Ext.Msg.confirm() 是一个异步方法。它打开一个不同的线程，因此无论子线程上发生什么，侦听器都会继续正常执行。

我看到的唯一方法是在“是”回调中触发 setActiveItem()。

此外，为了避免确认循环，我添加了一个标志：

Ext.application({
    name: "Sencha",

    requires: [
        'Sencha.MyPanel',
        'Ext.MessageBox'
    ],

    launch: function () {
        var tabPanel = Ext.create('Sencha.MyPanel');
        Ext.Viewport.add(tabPanel);
    }
});

Ext.define('Sencha.MyPanel', {
    extend: 'Ext.tab.Panel',

    config: {
        layout: 'card',
        tabBarPosition: 'bottom',
        confirm: true,

        listeners: {
            activeitemchange: {
                order: 'before',

                fn: function (list, value, oldValue, eOpts) {
                    var me = this;

                    console.log(me.getConfirm()); // ERROR: getConfirm() is undefined

                    var oldTabIdx = me.getInnerItems().indexOf(oldValue);
                    var newTabIdx = me.getInnerItems().indexOf(value);

                    console.log(oldTabIdx + " => " + newTabIdx);

                    if (oldTabIdx == 2 && me.getConfirm()) {
                        Ext.Msg.confirm("Leave Screen?", "Are you sure you?", function (response) {
                            console.log(response);
                            if (response === 'no') {
                                console.log("User says stay.");
                            } else {
                                console.log("User says leave.");
                                me.setConfirm(false);
                                me.setActiveItem(newTabIdx);
                            }
                        });
                        return false;
                    } else {
                        me.setConfirm(true);
                    }
                }
            }
        },

        items: [
            {
                id: 'tab1',
                title: 'Home',
                layout: 'fit',
                xtype: 'container',
                iconCls: 'home',
                items: [
                    {html: 'page #1'}
                ]
            }, {
                id: 'tab2',
                title: 'Two',
                layout: 'fit',
                xtype: 'container',
                iconCls: 'star',
                items: [
                {html: 'page #2'}
                ]
            }, {
                id: 'tab3',
                title: 'three',
                layout: 'fit',
                xtype: 'container',
                iconCls: 'team',
                items: [
                    {html: 'page #3'}
                ]
            }
        ]
    }
});

希望能帮助到你-

于 2013-08-05T19:57:20.717 回答