Ext之GridPanel实现鼠标右键删查改功能

itemcontextmenu: function (t, record, item, index, e, eOpts) {                e.preventDefault();//取消浏览器的默认右键点击事件                Ext.create('Ext.menu.Menu', {                    width: 100,                    height: 100,                    margin: '0 0 10 0',                    items: [{                        text: 'regular item 1'                    }, {                        text: 'regular item 2'                    }, {                        text: 'regular item 3'                    }]                }).showAt(e.getXY());

//------------------------------grid鼠标右键事件--------------------------------------
        //grid鼠标右键事件，grid是gridpanel对象
        grid.on("rowcontextmenu", open_rowcontextmenu);

        function open_rowcontextmenu(griditem, rowIndex, e) {

            //右键选中当前行
              sm.clearSelections(); //gridpanel的CheckboxSelectionModel对象
            sm.selectRow(rowIndex);

            e.preventDefault();
            var menus = new Ext.menu.Menu
        ([
            {
                text: "查看细则", pressed: true, icon: "../Images/ausCP/grid.png",
                handler: function() { Edit(griditem, rowIndex, e, "查看"); }
            },
            {
                text: "编辑", pressed: true, icon: "../Images/ausCP/edit.png",
                handler: function() { Edit(griditem, rowIndex, e, "编辑"); }
            },
            {
                text: "删除", pressed: true, icon: "../Images/ausCP/cross.gif",
                handler: function() { Edit(griditem, rowIndex, e, "删除"); }
            }
        ]);
            menus.showAt(e.getPoint());
        }

        //鼠标右键点击响应事件
        function Edit(griditem, rowIndex, e, titleInfo) {
            var record = griditem.getStore().getAt(rowIndex);
            var currID = record.data.编号;

            //删除窗口
            if (titleInfo == "删除") {
                Ext.Msg.confirm('提示', '确实要删除所选的记录吗?', function(btn) {
                    if (btn == 'yes') {
                        var jsonData = "," + currID + ",";
                        var conn = new Ext.data.Connection();
                        conn.request({
                            url: "ylDelete.asmx/DelProject", //请注意引用的路径
                            params: { strProjects: jsonData },
                            method: 'POST',
                            scope: this,
                            callback: function(options, success, response) {
                                if (success) {
                                    Ext.MessageBox.alert("提示", "所选记录成功删除！");
                                    store.load({ params: { start: 0, limit: 25} });
                                }
                                else
                                { Ext.MessageBox.alert("提示", "所选记录删除失败！"); }
                            }
                        })
                    }
                });
            }
            //查看细则窗口
            else if (titleInfo == "查看") {
                var p = new Ext.FormPanel
                ({
                    layout: 'column',
                    labelWidth: 120,
                    frame: true,
                    width: 680,
                    region: 'center',
                    autoScroll: true,
                    items: [{
                        columnWidth: 0.5,
                        layout: 'form',
                        border: false,
                        items: [
                            ]
                       }]
                    });

                    //评估结果数据窗口信息
                    var resultp = new Ext.Panel
                    ({
                        layout: 'column',
                        labelWidth: 120,
                        frame: true,
                        width: 680,
                        region: 'center',
                        autoScroll: true,
                        items: [{
                            columnWidth: 0.5,
                            layout: 'form',
                            border: false,
                            items: [

                              ]
                           }]
                            });

                            //评估结果图片窗口信息
                            var resultimg = new Ext.Panel
                    ({
                        layout: 'column',
                        labelWidth: 120,
                        frame: true,
                        width: 680,
                        //height:290,
                        region: 'center',
                        autoScroll: true,
                        items: [{
                            xtype: 'box', //或者xtype: 'component',    
                            width: 680, //图片宽度    
                            height: 290, //图片高度    
                            autoEl: {
                                tag: 'img',    //指定为img标签
                                id: 'ylimg',
                                src: 'images/yl.bmp'    //指定url路径    
                            }
                         }]
                        });

                            //tabpanel窗口，装载详细信息、图片信息以及评估结果信息等
                            var detab = new Ext.TabPanel({
                                activeTab: 0,
                                width: 700,
                                height: 300,
                                plain: true,
                                defaults: { frame: true },
                                xtype: 'tabpanel',
                                closable: true,
                                items: [{
                                    title: '基本信息',
                                    layout: 'column',
                                    cls: 'x-plain',
                                    items: [
                                    p
                                    ]
                                },
                        {
                            title: '评估结果',
                            layout: 'column',
                            cls: 'x-plain',
                            items: [
                                    resultp
                                    ]
                        },
                        {
                            title: '评估图',
                            cls: 'x-plain',
                            layout: 'column',
                            items: [
                                resultimg
                            ]
}]
                            });

                            var win = new Ext.Window
                    ({
                        xtype: 'window',
                        title: titleInfo + "窗口",
                        buttonAlign: 'right',
                        closable: true,
                        layout: 'column',
                        modal: 'true',
                        width: 720,
                        height: 368,
                        closeAction: 'hide',
                        plain: true,
                        items: [detab],
                        buttons:
                          [
                              { xtype: "button", text: "关闭", handler: function() { win.destroy(); } }
                          ]
                    });
                            win.show();
                        }
                        //编辑窗口
                        else {
                            var p = new Ext.FormPanel
                ({
                    layout: 'column',
                    labelWidth: 120,
                    frame: true,
                    width: 700,
                    region: 'center',
                    autoScroll: true,
                    items: [{
                        columnWidth: 0.5,
                        layout: 'form',
                        border: false,
                        items: []
}]
                    });

                            var win = new Ext.Window
                ({
                    title: titleInfo + "窗口", layout: 'border', height: 330, width: 710, resizable: false, buttonAlign: "center", modal: true, //height:300,          
                    items: [p],
                    buttons:
                      [
                          { xtype: "button", text: "确定" + titleInfo, handler: function() { doUpdate(p, win); } },
                          '', '',
                          { xtype: "button", text: "关闭", handler: function() { win.destroy(); } }
                      ]
                });
                            win.show();
                        }

                    }
                    //-------------------------------------------------------------------------------

                    //----------------------------------编辑方法--------------------------------------
                    function doUpdate(p, win) {
                        Ext.MessageBox.show({
                            msg: '正在更改数据, 请稍侯',
                            progressText: '正在更改中',
                            width: 300,
                            wait: true,
                            waitConfig: { interval: 200 },
                            icon: 'ext-mb-save',
                            nimEl: 'btnEdit'
                        });

                        p.getForm().submit({
                            url: 'modules/yl/ylEdit.aspx',
                            method: 'POST',
                            success: function(form, action) {
                                Ext.MessageBox.hide();
                                Ext.MessageBox.alert('提示', '数据修改成功！');
                                win.hide();
                                store.load({ params: { start: 0, limit: 25} });
                            },
                            failure: function(form, action) {
                                Ext.MessageBox.hide();
                                Ext.MessageBox.show({
                                    title: '错误',
                                    msg: '数据修改失败！',
                                    buttons: Ext.Msg.OK,
                                    icon: Ext.MessageBox.ERROR
                                });
                            }
                        });
                    }
                    //--------------------------------------------------------------------------------

 

下面是实现的结果的截图