extjs gridpanel 右键菜单问题

Question

代码 
goodsGridUi = new Ext.grid.GridPanel({
    height: 600,
    title: '商品管理',
    store: strGoodsInfo,
    columns:
    [
        
        {
            xtype: 'gridcolumn',
            dataIndex: 'GoodsName',
            header: '品名',
            sortable: true,
            align: 'left',
            editable: false        },
        {
            xtype: 'gridcolumn',
            header: '编码',
            sortable: true,
            dataIndex: 'GoodsCode'
        },
        {
            xtype: 'gridcolumn',
            dataIndex: 'GoodsModel',
            header: '型号',
            sortable: true,
            align: 'left',
            editable: false        },
        {
            xtype: 'gridcolumn',
            dataIndex: 'Sex',
            header: '性别',
            sortable: true,
            align: 'left',
            editable: false        },
        {
            xtype: 'gridcolumn',
            dataIndex: 'GoodsStandard',
            header: '规格',
            sortable: true,
            align: 'left',
            editable: false        },
        {
            xtype: 'gridcolumn',
            dataIndex: 'InPrice',
            header: '单价',
            sortable: true,
            align: 'left',
            editable: false
        }
    ],
    tbar: new Ext.Toolbar({        xtype: 'toolbar',
        height: 40,
        id: 'Goods_SearchTbar',
        items: [
            {
                xtype: 'label',
                text: '品名：',
                width: 50
            },
            {
                xtype: 'textfield',
                id: 'Search_Goods'
            },
            {
                xtype: 'splitbutton',
                text: '查询',
                iconCls: 'search',
                id: 'Goods_SearchBtn',
                handler: fnSearchGoods
            }
        ]
    })});
goodsGridUi.addListener('rowcontextmenu', fnRightClick);rightMenu = new Ext.menu.Menu(
    {
        id: "UserMenu",
        items:
        [
            {
                id: 'AddGoods',
                icon: 'images/write.gif', //图标文件
                handler: fnAddGoods,
                text: '新增商品'
            },
            {
                id: 'EditGoods',
                icon: 'images/write.gif', //图标文件
                handler: fnEditGoods,
                text: '编辑商品'
            },
            {
                id: 'DelGoods',
                icon: 'images/write2.gif', //图标文件
                handler: fnDelGoods,
                text: '删除商品'
            }
        ]
    });///右键菜单function fnRightClick(goodsGridUi, rowIndex, e) {
        alert(e);
        goodsGridUi.getSelectionModel().selectRow(rowIndex);
    e.preventDefault();
    rightMenu.showAt(e.getXY());
};为什么在有数据上右击就能用，其它地方不能用呀，我想实现这样一个功能，右击时鼠标在数据列上，全部显示菜单项，右击gridpanel空白的地方，只显示“新增商品”一项目

Answer 1

var addMenu;
    gridPanel.on("contextmenu",function(e){
        console.log("a");e.preventDefault();
        addMenu=new Ext.menu.Menu({
            items:[{
                text:"添加",
                icon:"https://dl.getdropbox.com/u/2555620/icons/add.png",
                handler:function() {
                    alert('add');
                }
            }],
            minWidth:200
        });
        addMenu.showAt(e.getPoint());
    });
    gridPanel.on("rowcontextmenu",function(grid,rowIndex,e) {
        //用这个事件才能获取到点击的相关行信息
        e.preventDefault();
        addMenu.hide();//这里添加菜单先出来的，隐藏掉它，注意不要让添加的菜单宽度比这个宽度大
        var menus=new Ext.menu.Menu({
            items:[{
                text:"编辑",
                icon:"https://dl.getdropbox.com/u/2555620/icons/calculator_edit.png",
                handler:function() {
                    showEditor(grid,rowIndex,this,e);
                }
            },{
                text:"删除",
                icon:"https://dl.getdropbox.com/u/2555620/icons/plugin_delete.png",
                handler:function() {
                    showEditor(grid,rowIndex,this,e);
                }
            }],
            minWidth:200
        });
        menus.showAt(e.getPoint());
    });

Answer 2

//也可以隐藏菜单项
goodsGridUi = new Ext.grid.GridPanel({
    height: 600,
    title: '商品管理',
    store: strGoodsInfo,
    columns: [    {
        xtype: 'gridcolumn',
        dataIndex: 'GoodsName',
        header: '品名',
        sortable: true,
        align: 'left',
        editable: false    },
    {
        xtype: 'gridcolumn',
        header: '编码',
        sortable: true,
        dataIndex: 'GoodsCode'
    },
    {
        xtype: 'gridcolumn',
        dataIndex: 'GoodsModel',
        header: '型号',
        sortable: true,
        align: 'left',
        editable: false    },
    {
        xtype: 'gridcolumn',
        dataIndex: 'Sex',
        header: '性别',
        sortable: true,
        align: 'left',
        editable: false    },
    {
        xtype: 'gridcolumn',
        dataIndex: 'GoodsStandard',
        header: '规格',
        sortable: true,
        align: 'left',
        editable: false    },
    {
        xtype: 'gridcolumn',
        dataIndex: 'InPrice',
        header: '单价',
        sortable: true,
        align: 'left',
        editable: false
    }],
    tbar: new Ext.Toolbar({        xtype: 'toolbar',
        height: 40,
        id: 'Goods_SearchTbar',
        items: [{
            xtype: 'label',
            text: '品名：',
            width: 50
        },
        {
            xtype: 'textfield',
            id: 'Search_Goods'
        },
        {
            xtype: 'splitbutton',
            text: '查询',
            iconCls: 'search',
            id: 'Goods_SearchBtn',
            handler: fnSearchGoods
        }]
    }),
    listeners: {
        rowcontextmenu: function(g, rowIndex, e) {
            e.stopEvent();
            g.getSelectionModel().selectRow(rowIndex);
            if (!g.rowmenu) {
                g.rowmenu = new Ext.menu.Menu({
                    items: [{
                        id: 'AddGoods',
                        icon: 'images/write.gif',
                        //图标文件
                        handler: fnAddGoods,
                        text: '新增商品'
                    },
                    {
                        id: 'EditGoods',
                        icon: 'images/write.gif',
                        //图标文件
                        handler: fnEditGoods,
                        text: '编辑商品'
                    },
                    {
                        id: 'DelGoods',
                        icon: 'images/write2.gif',
                        //图标文件
                        handler: fnDelGoods,
                        text: '删除商品'
                    }]                });
            }
            g.rowmenu.showAt(e.getXY());
        },
        contextmenu: function(e) {
            e.stopEvent();
            if (!g.rowmenu) {
                g.rowmenu = new Ext.menu.Menu({
                    items: [{
                        id: 'AddGoods',
                        icon: 'images/write.gif',
                        //图标文件
                        handler: fnAddGoods,
                        text: '新增商品'
                    }]
                });
            }
            g.rowmenu.showAt(e.getXY());
        }    });

Answer 3

ls 2位的都可以。
我就提供我的思路给你参考下
其实lz可以在点击没有数据的地方。也就是你点击的时候不是有选择
数据么。你获得选择的数据，判断选择的数据条数。如果为0就因此右键的其他菜单，只显示“新增”
如果点击右键有选择数据，也就是goodsGridUi.getSelectionModel().getCount() > 0
你就显示全部菜单

Answer 4

有数据的地方才是 on  contextmenu
没数据的地方叫  on  containercontextmenu
ext 2.0没的 3.0才加的属性