Extjs 4.1 button click 事件和 cellediting的edit事件

Question

前提描述：
    我有一个grid,toolbar中包含6个Button，分别是 【新增】，【编辑】，【删除】，【查询】，【确定】，【取消。当点击前四个按钮中的一个的时候会隐藏前四个按钮，显示后两个按钮；点击后两个按钮的时候会显示前四个隐藏后两个。grid的plugin是cellediting,它的edit事件会向后台发送一次请求，验证用户的输入是否有效，并弹窗messagebox提醒用户。期望的效果：
    当我点击【编辑】按钮进入编辑状态后，【确定】，【按钮】出现，取消按钮的作用除了对button的状态做改变外，还会调用store.rejectChanges()方法，消除更改。问题：
     我在输入的的时候（此时光标在表格grid的单元格里面），点击【取消】按钮，messagebox会弹出来，但是button的click事件不会触发（因为【确定】【取消】按钮没有消失，而且grid里的数据没有还原）。PS：我只有70分了，倾囊而出请教大家！！
ExtJS事件celleditingbutton

Answer 1

点击取消按钮后出发edit事件弹出的messgagebox应该不会影响绑定在按钮上的事件吧。。贴个demo看看什么问题。。

Answer 2

[code=javascript]
// 源代码有点长，所以我写个类似的小程序
//我用的是Extjs4.1 MVC架构的
Ext.define('MyApp.view.MyPanel',{
    //extend...
    //alias...
    //其他的一些配置项，项store之类的，跟这个问题没有关系，但是都是正确的，因为可以运行
    initComponent : function(){
        var me=this;
        Ext.applyIf(me,{
            columns : [
                {
                    xtype : 'id',
                    dataIndex : 'uid',
                    editor : {
                        xtype : 'textfield'
                    }
                }
                {
                    xtype : 'name',
                    dataIndex : 'uname',
                    editor : {
                        xtype : 'textfield'
                    }
                }
                //其他的一些column，不赘述了，没有影响
            ],
            dockedItems : [
                {
                    xtype : 'toolbar',
                    dock : 'top',
                    items : [
                        {
                            xtype : 'button',//取消按钮，点击的时候grid会变成不可编辑而且【确定】按钮和【取消】按钮会隐藏，【查询】，【新增】等按钮会显示出来；同时还原store的数据
                            text : '取消',
                            id : 'cl'
                        },
                        {
                            xtype ; 'button',//跟【取消】按钮的功能类似，不过是保存更改
                            text ; '确定',
                            id : 'ok'
                        },
                        //其他的按钮：【查询】，【新增】等，跟这个问题无关，这里不赘述了
                        
                    ]
                    
                }
            ],
            plugins : [
                Ext.create('Ext.grid.plugin.CellEditing',{
                    clickToEdit : 1,
                    listeners : {
                        'edit' : function(editor,ctx){
                            //跟后台交互的代码就不贴了，
                             Ext.Msg.show({
                                 title : '提示',
                                 msg : '您输入的值有效（或者无效）',
                                 buttons : Ext.Msg.OK
                             });
                        }
                    }
                }
            ]
        me.callParents(arguments);
        })
    }
});
 //here is the controller
Ext.define('MyApp.controller.MyController',{
    //extend ...
    //requires
    //views:....
    //models:...
    //stores: ...
    //一些配置项不细写了，但是是正确的，因为可以运行
    init : function(){
        this.control({
            'button[id=cl]' :{
                click : me.cancel
            },
            'button[id=ok]' :{
                click : me.confirm
            }
            //还有对其它的事件的监听，跟这个问题无关，也不细写
            
        })
    },
    cancel : function(){
        //源代码中的逻辑不屑了，写一个alert语句看是不是监听到了事件
        alert('Changes will be ignored and button will hide');
    },
    confirm : function(){
        //源代码中的逻辑不屑了，写一个alert语句看是不是监听到了事件
        alert('changes will be saved and grid turns uneditable');
    }
});

Answer 3

// 源代码有点长，所以我写个类似的小程序
//我用的是Extjs4.1 MVC架构的
Ext.define('MyApp.view.MyPanel',{
    //extend...
    //alias...
    //其他的一些配置项，项store之类的，跟这个问题没有关系，但是都是正确的，因为可以运行
    initComponent : function(){
        var me=this;
        Ext.applyIf(me,{
            columns : [
                {
                    xtype : 'id',
                    dataIndex : 'uid',
                    editor : {
                        xtype : 'textfield'
                    }
                }
                {
                    xtype : 'name',
                    dataIndex : 'uname',
                    editor : {
                        xtype : 'textfield'
                    }
                }
                //其他的一些column，不赘述了，没有影响
            ],
            dockedItems : [
                {
                    xtype : 'toolbar',
                    dock : 'top',
                    items : [
                        {
                            xtype : 'button',//取消按钮，点击的时候grid会变成不可编辑而且【确定】按钮和【取消】按钮会隐藏，【查询】，【新增】等按钮会显示出来；同时还原store的数据
                            text : '取消',
                            id : 'cl'
                        },
                        {
                            xtype ; 'button',//跟【取消】按钮的功能类似，不过是保存更改
                            text ; '确定',
                            id : 'ok'
                        },
                        //其他的按钮：【查询】，【新增】等，跟这个问题无关，这里不赘述了
                        
                    ]
                    
                }
            ],
            plugins : [
                Ext.create('Ext.grid.plugin.CellEditing',{
                    clickToEdit : 1,
                    listeners : {
                        'edit' : function(editor,ctx){
                            //跟后台交互的代码就不贴了，
                             Ext.Msg.show({
                                 title : '提示',
                                 msg : '您输入的值有效（或者无效）',
                                 buttons : Ext.Msg.OK
                             });
                        }
                    }
                }
            ]
        me.callParents(arguments);
        })
    }
});
 //here is the controller
Ext.define('MyApp.controller.MyController',{
    //extend ...
    //requires
    //views:....
    //models:...
    //stores: ...
    //一些配置项不细写了，但是是正确的，因为可以运行
    init : function(){
        this.control({
            'button[id=cl]' :{
                click : me.cancel
            },
            'button[id=ok]' :{
                click : me.confirm
            }
            //还有对其它的事件的监听，跟这个问题无关，也不细写
            
        })
    },
    cancel : function(){
        //源代码中的逻辑不屑了，写一个alert语句看是不是监听到了事件
        alert('Changes will be ignored and button will hide');
    },
    confirm : function(){
        //源代码中的逻辑不屑了，写一个alert语句看是不是监听到了事件
        alert('changes will be saved and grid turns uneditable');
    }
});

Answer 4

我想大概知道是为什么；button的'click'事件是MouseDown和MouseUp以后才出发的，而editing的'click'事件是MouseDown就触发，所以触发edit事件后弹出MessageBox，此时切换到了messagbox上,mouseUp动作没有完成，button的click事件就不会触发了