Hello! Interesting use case! We should add an example about this in our Examples Explorer! You can use grid item-level binding.
Check this out:
<%@ Page Language="C#" %>
<script runat="server">
public static List<object> Data = new List<object>
{
new
{
name = "Lisa",
email = "lisa@simpsons.com",
phone = "555-111-1224"
},
new
{
name = "Bart",
email = "bart@simpsons.com",
phone = "555-222-1234"
},
new
{
name = "Homer",
email = "homer@simpsons.com",
phone = "555-222-1244"
},
new
{
name = "Marge",
email = "marge@simpsons.com",
phone = "555-222-1254"
}
};
public string RowButton = new Ext.Net.Mobile.Button()
{
BindString = "{record.name} details",
Handler = "handleButtonTap(item, e);",
Width = 140
}.ToConfig();
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<script type="text/javascript">
var handleButtonTap = function (item, e)
{
var record = item.getParent().getRecord();
Ext.Msg.alert(record.data.name + ' user details', 'Phone: ' + record.data.phone);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager runat="server" />
<ext:Store runat="server" ID="Store1" Data="<%# Data %>" AutoDataBind="true">
<Fields>
<ext:ModelField Name="name" />
<ext:ModelField Name="email" />
<ext:ModelField Name="phone" />
</Fields>
</ext:Store>
<ext:Grid
runat="server"
Title="Simpsons"
FullScreen="true"
AutoDataBind="true"
ItemConfigObject="<%# new { viewModel = true } %>"
StoreID="Store1">
<Columns>
<ext:Column runat="server" Text="Name" DataIndex="name" Width="100" />
<ext:Column runat="server" Text="Email" DataIndex="email" Width="210" />
<ext:Column runat="server" Text="Phone" DataIndex="phone" Width="150" />
<ext:Column runat="server" Width="160">
<Cell>
<ext:Parameter Name="xtype" Value="widgetcell" />
<ext:Parameter
Name="widget"
Value="<%# RowButton %>"
Mode="Raw" AutoDataBind="true" />
</Cell>
</ext:Column>
</Columns>
</ext:Grid>
</div>
</form>
</body>
</html>
Hope this helps!