.On(string, JFunction) method, supported both on JavaScript and Ext.NET (C#) side!
@{
var x = Html.X();
var d = new Dictionary<string, string>
{
{"key1", "val1"},
{"key2", "val2"},
{"key3", "val3"}
};
}
@(
x.GridPanelFor(d)
.Listeners(l=>l.LongPress.Handler="alert('LongPress');")
.Listeners(l=>l.RowBodyLongPress.Handler="alert('RowBodyLongPress');")
.Listeners(l=>l.CellClick.Handler="alert('CellClick');")
/// W A N T E D:
//.Listeners(l => l.CellLongPress.Handler = "alert('CellLongPress');")
)RowBody* events are called when the row is expandable and interactions happen on the expanded part of the row. For example, in this example you trigger it when you long press in the "hello" word of an expanded row:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>c60818_Index</title>
</head>
<body>
<div>
@Html.X().ResourceManager()
@{
var x = Html.X();
var d = new Dictionary<string, string>
{
{"key1", "val1"},
{"key2", "val2"},
{"key3", "val3"}
};
}
@(
x.GridPanelFor(d)
.Listeners(l =>
{
l.RowBodyLongPress.Handler = "App.statuslbl.setText('Status: rowBodyLongPress triggered.');";
})
.Plugins(x.RowExpander().TemplateHtml("<br />Hello<br />"))
)
@Html.X().Label().ID("statuslbl").Text("Status: ").StyleSpec("font-weigh: bold; color: red")
</div>
</body>
</html>LongPress event in this case. An answer for getting an equivalent of CellLongPress will follow shortly.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>c60818_Index</title>
<script>
var handleMouseEvent = function (evnt) {
if (evnt.record) {
var colId = evnt.target.parentElement.getAttribute("data-columnid"),
el = evnt.target,
gp = null,
item = Ext.getCmp(evnt.item.parentElement.parentElement.id),
td = evnt.target.parentElement,
cellIndex = null,
record = evnt.record,
tr = td.parentElement,
rowIndex = evnt.item.getAttribute("data-recordindex");
// Walk up searching for the containing grid.
while (el) {
el = el.parentElement;
if (el.getAttribute('role') == 'grid') {
gp = Ext.getCmp(el.id);
break;
}
}
if (gp != null) {
var column = null;
for (var i in gp.columns) {
if (gp.columns[i].id == colId) {
column = gp.columns[i];
break;
}
}
if (column != null) {
cellIndex = column.getIndex();
if (column.dataIndex != null) {
handleCellEvent(item, td, cellIndex, record, tr, rowIndex, evnt);
}
}
}
}
}
var handleCellEvent = function (item, td, cellIndex, record, tr, rowIndex, e) {
var msg = 'Status: ' + e.type + ' cell event triggered.\n<br />' +
'ItemID: ' + item.id + '\n<br />' +
'td role: ' + td.getAttribute('role') + '\n<br />' +
'cellId: ' + cellIndex + '\n<br />' +
'recId: ' + record.id + '\n<br />' +
'tr role: ' + tr.getAttribute('role') + '\n<br />' +
'rowId: ' + rowIndex + '\n<br />' +
'event item role: ' + e.item.getAttribute('role') + '\n<br />';
App.statuslbl.setHtml(msg);
}
</script>
</head>
<body>
<div>
@Html.X().ResourceManager()
@{
var x = Html.X();
var d = new Dictionary<string, string>
{
{"key1", "val1"},
{"key2", "val2"},
{"key3", "val3"}
};
}
@(
x.GridPanelFor(d).ID("gp1")
.Listeners(l =>
{
l.LongPress.Fn = "handleMouseEvent";
l.CellClick.Fn = "handleCellEvent";
})
)
@Html.X().Panel().ID("statuslbl").Html("Status: ").StyleSpec("font-weigh: bold; color: red")
</div>
</body>
</html>
Posting Permissions
| Frameworks and Tools for .NET Developers