Ext右键菜单完整版

系统管理员 2021-04-23 15:09 500阅读 0赞

````
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="gridContextMenu.aspx.cs" Inherits="gridContextMenu" %>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "  http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">  
<html xmlns="< /FONT>http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title>无标题页</title>  
    <link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css" />  
    <link rel="Stylesheet" type="text/css" href="ExtJS/resources/css/xtheme-green.css" />  
    <script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js"></script>  
    <script type="text/javascript" src="ExtJS/ext-all.js"></script>  
    <script type="text/javascript" src="ExtJS/ext-lang-zh_CN.js"></script>  
    <style type="text/css">  
    .panel_icon11 { background-image:url(images/first.gif)}  
    .center_icon { background-image:url(images/center.png)}  
    </style>  
</head>  
<body>  
    <form id="form1" runat="server">  
    <div>  
    <script type="text/javascript">      
    function ready()  
    {   
        var url = "jsonGrid.aspx?Param=select";  
        var sm = new Ext.grid.CheckboxSelectionModel();          
        var cm = new Ext.grid.ColumnModel  
        ([          
            sm,new Ext.grid.RowNumberer({header:"编号",width:50}),  
            {header:"编号",dataIndex:"ID",width:10,hidden:true},  
            {header:"标题",dataIndex:"TypeCName",width:100,editor:new Ext.form.TextField()},  
            {header:"英文名称",dataIndex:"TypeEName",width:100,editor:new Ext.form.TextField()},  
            {header:"状态",dataIndex:"DelFlag",width:100,renderer:function(value) {if(value==false) {return "显示";} else {return "隐藏";}}},  
            {header:"添加日期",dataIndex:"AddDate",width:100,renderer:Ext.util.Format.dateRenderer('Y年m月d日')}  
        ]);  
        cm.defaultSortable = true;   
        var fields =   
            [  
                {name:"ID"},  
                {name:"TypeCName"},  
                {name:"TypeEName"},  
                {name:"DelFlag"},  
                {name:"AddDate"}  
          ];  
        var store = new Ext.data.Store  
        ({   
            proxy:new Ext.data.HttpProxy({url:url}),  
            reader:new Ext.data.JsonReader({totalProperty:"totalPorperty",root:"root",fields:fields})  
        });  
        store.load({params:{start:0,limit:12}});          
        var pagingBar = new Ext.PagingToolbar  
        ({   
            displayInfo:true,  
            emptyMsg:"没有数据显示",  
            displayMsg:"显示从{0}条数据到{1}条数据，共{2}条数据",  
            store:store,  
            pageSize:12  
        });  
        var grid = new Ext.grid.GridPanel   
        ({   
            id:"MenuGridPanel",  
            renderTo:document.body,  
            layout:"fit",  
            frame:true,  
            border:true,  
            width:600,  
            height:360,  
            autoScroll:true,   
            store:store,  
            sm:sm,  
            cm:cm,  
            viewConfig:{forceFit: true},  
            title:'<img style="height:auto; width:auto;" src="images/first.gif" /> Ext2.2全新功能版系列之--右键菜单',  
            bbar:pagingBar  
        });  
        grid.on("rowcontextmenu",function(grid,rowIndex,e)  
        {   
            e.preventDefault();if(rowIndex<0){return;}  
            var treeMenu = new Ext.menu.Menu  
            ([  
                {xtype:"button",text:"添加",icon:"Images/Icons/button/add.gif",pressed:true,handler:function(){}},  
                {xtype:"button",text:"编辑",icon:"Images/Icons/button/delete.gif",pressed:true,handler:function(){}},  
                {xtype:"button",text:"隐藏",icon:"Images/Icons/arrow-down.gif",pressed:true,handler:function(){}},  
                {xtype:"button",text:"显示",icon:"Images/Icons/arrow-up.gif",pressed:true,handler:function(){}},  
                {xtype:"button",text:"删除",icon:"Images/Icons/button /cross.gif",pressed:true, handler:function(){}},                
                {xtype:"button",text:"上传图片",icon:"Images/Icons/plugin_add.gif",pressed:true,handler:function(){}}  
            ]);  
            treeMenu.showAt(e.getPoint());  
        });   
    }  
    </script>      
    <script type="text/javascript">  
    Ext.onReady(ready);  
    </script>  
    </div>  
    </form>  
</body>

</html>
````