在GridPanel上单击右键显示菜单的制作

literary_fly

浏览: 92972 次
性别:
来自: 西安

最近访客更多访客>>

haoyi198

maoweiwer

dldajbgs

wuzuyu365

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Extjs

EXT

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>
    <script type="text/javascript" src="ExtBase/ext-base.js"></script>
    <script type="text/javascript" src="ExtBase/ext-all.js"></script>
    <script type="text/javascript" src="ExtBase/ext-lang-zh_CN.js"></script>
</head>
<body>
    <form runat="server">
    <div>
    <div ></div>
    <script type="text/javascript">
   var grid;
   function DataGrid()
   {
        var cm = new Ext.grid.ColumnModel
        ([
            {header: "编号", width: 120, dataIndex: 'ID', sortable: true},
            {header: "标题", width: 180, dataIndex: 'Title', sortable: true},
            {header: "作者", width: 115, dataIndex: 'Author', sortable: true},
            {header: "来源", width: 100, dataIndex: 'Source', sortable: true},
            {header: "日期", width: 100, dataIndex: 'PostDate', sortable: true}
        ]);
        var titleInfo = "编辑数据";
        var fields = [{name:"ID"},{name:"Title"},{name:"Author"},{name:"Source"},{name:"PostDate"}];
        var newStore = new Ext.data.Store
        ({
                proxy:new Ext.data.HttpProxy({url:"JsonData.aspx?param=initData"}),
                reader:new Ext.data.JsonReader({totalProperty:"totalPorperty",root:"result",fields:fields})
        });
        newStore.load({params:{start:0,limit:16}});
        var pagingBar = new Ext.PagingToolbar
        ({
                displayInfo:true,
                emptyMsg:"没有数据显示",
                displayMsg:"显示从{0}条数据到{1}条数据，共{2}条数据",
                store:newStore,
                pageSize:16
        });
        this.gridPanel = new Ext.grid.GridPanel
        ({
                cm:cm,
                id:"grid_panel",
                title:titleInfo,
                store:newStore,
                frame:false,
                border:true,
                layout:"fit",
                pageSize:16,
                autoWidth:true,
                height:400,
                clicksToEdit:1,
                viewConfig:{forceFit:true},
                bbar:pagingBar
        });
        this.gridPanel.on("rowcontextmenu",open_rowcontextmenu);
    }
    function open_rowcontextmenu(grid,rowIndex,e)
    {
        e.preventDefault();
        var menus = new Ext.menu.Menu
        ([
            {
                xtype:"button",text:"编辑",pressed:true,icon:"imgMenus/3.png",
                handler:function(){Edit(grid,rowIndex,e ,"编辑");}
            },
            {
                xtype:"button",text:"删除",pressed:true,icon:"imgMenus/3.png",
                handler:function(){Edit(grid,rowIndex,e ,"删除");}
            }
        ]);
        menus.showAt(e.getPoint());
    }
    function Edit(grid,rowIndex,e,titleInfo)
    {
        var record = grid.getStore().getAt(rowIndex);
        var currID =    record.data.ID;
        var currAuthor = record.data.Author;
        var currTitle = record.data.Title;
        var currSource = record.data.Source;
        var currPostDate = record.data.PostDate;

        var p = new Ext.FormPanel
        ({
             frame:true,labelWidth:36,
             items:
              [
                  {xtype:"hidden",id:"ID",width:201,value:currID},
                  {xtype:"textfield",fieldLabel:"标题",id:"Title",width:201,value:currTitle},
                  {xtype:"textfield",fieldLabel:"作者",id:"Author",width:200,value:currAuthor},
                  {xtype:"textfield",fieldLabel:"来源",id:"Source",width:201,value:currSource},
                  {xtype:"datefield",fieldLabel:"日期",id:"PostDate",width:201,value:currPostDate,format:"Y年m月d日"}
              ]
        });

        var win = new Ext.Window
        ({
              title:titleInfo+"窗口",autoHeight:true,width:300,resizable:false,buttonAlign:"center", modal:true,//height:300,
              items:[p],
              bbar:
              [
                  {xtype:"button",text:"确定"+titleInfo,handler:function(){Edit_Sub(win,titleInfo);}},
                  '','',
                  {xtype:"button",text:"关闭",handler:function(){win.destroy();}}
              ]
        });
        win.show();
    }
    function Edit_Sub(winParam,titleInfo)
    {
       var currID = Ext.getCmp("ID").getValue();
       winParam.destroy();
       if(titleInfo=="删除")
       {
            Ext.Msg.alert("消息提示","删除成功");
            //具体删除代码自己实现
       }
       else
       {
            Ext.Msg.alert("消息提示","编辑成功");
            //具体修改代码自己实现
       }
    }
    function MakePanel(obj)
    {
        this.panel_def = new Ext.Panel
        ({
            layout:"fit",
            border:true,
            frame:true,
            title:"数据浏览",
            autoWidth:true,
            height:500,
            id:"Viewport_ID",
            renderTo:"panel_id",
            items:[obj.gridPanel]
        });
    }
    function loader()
    {
        Ext.QuickTips.init();
        grid = new DataGrid();
        MakePanel(grid);
    }
    Ext.onReady(loader);
    </script>
    </div>
    </form>
</body>
</html>

分享到：

extjs更换皮肤 | CSS 制作的三级菜单

2011-02-12 13:49
浏览 1060
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论