基于FineUI Grid控件添加右键菜单

fineui官方demo上一直没有grid右键菜单的实现，其实从4.1.x的版本开始，允许添加自定义的事件监听（listeners），所以要实现这个功能已经相当容易了。

extjs右键菜单有很多种，对于grid控件来说，我这里只简单说明两种实现。即在表格的数据行上右键单击时弹出的菜单，以及在空白位置右键单击时弹出的菜单。

时间有限，废话不多说了，先看两个效果图。（实现环境 fineui4.1.6，.net 4.0因为需要指定控件的id）

1. 数据行右键菜单

2. 空白处右键菜单

实现方法：

第一步：添加grid控件。。。不多说了

第二步：往grid控件后面添加两个menu控件，分别对应要实现的两个右键菜单，要指定clientidmode为static，hidden为true 

<f:menu id="containermenu" runat="server" clientidmode="static" hidden="true">
 <f:menubutton icon="add" text="添加" onclick="onaddclick"></f:menubutton>
 <f:menuseparator />
 <f:menubutton icon="reload" text="刷新"></f:menubutton>
 </f:menu>
 <f:menu id="itemmenu" runat="server" clientidmode="static" hidden="true">
 <f:menubutton icon="pencil" text="修改" onclick="oneditclick"></f:menubutton>
 <f:menubutton icon="delete" text="删除"></f:menubutton>
 <f:menuseparator />
 <f:menubutton icon="reload" text="刷新"></f:menubutton>
 </f:menu>

第三步：为grid添加事件“containercontextmenu”，“itemcontextmenu”事件监听

 <f:grid id="grid1" runat="server" title="fineui grid右键菜单demo" cssstyle="margin: 10px;" allowpaging="true" pagesize="20"
 enableheadermenu="false" enablecolumnlines="true" datakeynames="id" >
 <columns>
 .....省略
 </columns>
 <listeners>
 <f:listener event="containercontextmenu" handler="function (grid, e, eopts) { e.stopevent(); f('containermenu').showat(e.getxy()); }" />
 <f:listener event="itemcontextmenu" handler="function (grid, record, item, index, e, eopts) { e.stopevent(); f('itemmenu').showat(e.getxy()); }" />
 </listeners>
 </f:grid> 

这两个事件属于extjs的gridpanel控件，参数说明如下：

containercontextmenu：grid：表格对象，e：事件对象，eopts：事件对象参数；

itemcontextmenu：grid：表格对象，record：选择的行对像(可以通过record.rawdata属性获得所选行的全部数据)，item：html元素对象，index：行索引，e：事件对象，eopts：事件对象参数；

如有其它想了解的地方，请去翻查extjs的api doc http://docs.sencha.com/extjs/4.2.1/#!/api/ext.grid.panel

一般情况下，照抄上面的代码就ok了，除非你对事件处理函数有更多的要求。

第四步：实现菜单功能。按照正常的方法绑定菜单按钮的事件就可以了，没什么需要特别说明的

在第二步的代码里可以看到，已经为添加和修改按钮添加了服务端onclick事件绑定。下面看一下后台代码的实现

 protected void onaddclick(object sender, eventargs e)
 {
 fineui.alert.show("add click!", fineui.messageboxicon.information);
 }
 protected void oneditclick(object sender, eventargs e)
 {
 var selectedrow = grid1.rows[grid1.selectedrowindex].datakeys[0].tostring();
 fineui.alert.show(string.format("修改id为{0}的记录", selectedrow), fineui.messageboxicon.warning);
 }

如何使用fineui grid控件，添加分页功能，然后高度填充整个页面。具体请看下面文字说明和代码分析。

      使用fineui 控件的每个页面都有一个f:pagemanager控件，它包含属性：autosizepanelid，设置需要填充的控件id，从它的demo可以看出，正常情况下需要再放置一个容器panel，就可以使整个页面填充。

<f:pagemanager id="pagemanager1" runat="server" autosizepanelid="resultsetgrid" />
<f:grid id="resultsetgrid" runat="server" enablecheckboxselect="true" title="" datakeynames="id"
 showborder="false"
 pagesize="3"
 allowpaging="true"
 isdatabasepaging="true"
 onpageindexchange="resultsetgrid_pageindexchange"
 onsort="resultsetgrid_sort"
 allowsorting="true"
 sortfield="id">
 <toolbars>
 <f:toolbar id="resultsetgrid_toolbar" runat="server">
  <items>
  <f:button id="btnadd" runat="server" text="添加" onclientclick="add();" enablepostback="false" icon="applicationadd"></f:button>
  <f:button id="btnedit" runat="server" text="编辑" enableajax="true" onclick="btnedit_click" icon="applicationedit"></f:button>
  <f:button id="btndelete" runat="server" text="删除" onclick="btndelete_click" icon="applicationdelete"></f:button>
  <f:button id="btnimport" runat="server" onclientclick="import();" text="数据采集" icon="applicationlink"></f:button>
  <f:button id="btnself" runat="server" onclientclick="filter();" text="自定义筛选" icon="applicationkey"></f:button>
  </items>
 </f:toolbar>
 </toolbars>
 <columns>
 <f:rownumberfield enablepagingnumber="true" />
 </columns>
 </f:grid>

以上内容是基于fineui grid控件添加右键菜单的全部叙述，希望对大家有所帮助。