Hi,
please see the following sample
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic"%>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
List<object> data = new List<object>(50);
for (int i = 1; i <= 50; i++)
{
data.Add(new{ text = "Item " + i });
}
this.Store1.DataSource = data;
this.Store1.DataBind();
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
.dataview-block {
border:1px solid silver;
background-color:#f0f080;
width:40px;
height:40px;
margin:10px;
text-align:center;
line-height:40px;
font-size:11px;
font-family:sans-serif;
float:left;
}
.block-label
{
font-weight:bold;
font-size:12px;
padding:5px 0px 5px 28px;
width:150px;
}
</style>
<script type="text/javascript">
function setNoneItemMenu(view, menu) {
view.el.on("contextmenu", function(e, t) {
if(Ext.isEmpty(e.getTarget('div.dataview-block'))){
e.preventDefault();
menu.showAt(e.getXY());
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" />
<ext:Store runat="server" ID="Store1" AutoLoad="true">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="text" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Menu ID="DataViewContextMenu" runat="server">
<Items>
<ext:TextMenuItem ID="BlockLabel" runat="server" CtCls="block-label" />
<ext:MenuItem ID="MenuItem1" runat="server" Text="Delete" Icon="Delete">
<Listeners>
<Click Handler="Ext.Msg.alert(this.parentMenu.block.id, 'Delete');" />
</Listeners>
</ext:MenuItem>
<ext:MenuItem ID="MenuItem2" runat="server" Text="Print" Icon="Printer">
<Listeners>
<Click Handler="Ext.Msg.alert(this.parentMenu.block.id, 'Print');" />
</Listeners>
</ext:MenuItem>
</Items>
<Listeners>
<BeforeShow Handler="#{BlockLabel}.el.update(this.block.innerHTML);" />
</Listeners>
</ext:Menu>
<ext:Menu ID="DataViewNoneItemMenu" runat="server">
<Items>
<ext:MenuItem ID="MenuItem3" runat="server" Text="Item 1">
</ext:MenuItem>
<ext:MenuItem ID="MenuItem4" runat="server" Text="Item 2">
</ext:MenuItem>
</Items>
</ext:Menu>
<ext:Panel
runat="server"
ID="ImagePanel"
Frame="true"
Height="500"
Width="535"
Title="Simple DataView">
<Body>
<ext:FitLayout ID="FitLayout1" runat="server">
<ext:DataView ID="DataView1" runat="server"
StoreID="Store1"
ItemSelector="div.dataview-block">
<Template ID="Template1" runat="server">
<tpl for=".">
<div id="item-{#}" class="dataview-block">{text}
</tpl>
<div class="x-clear">
</Template>
<Listeners>
<ContextMenu Handler="e.preventDefault(); #{DataViewContextMenu}.block = node;#{DataViewContextMenu}.showAt(e.getXY());" />
<Render Handler="setNoneItemMenu(this, #{DataViewNoneItemMenu});" />
</Listeners>
</ext:DataView>
</ext:FitLayout>
</Body>
</ext:Panel>
</form>
</body>
</html>