Ext.Net is not only a nice GUI for the Mouse. As far as your browser allows to bind keys via Javascript you can have a pretty nice fat client usability.
On the following Code Sample, I'll show how to use the INSERT, DELETE and ARROW Keys to quickly add and delete data rows. You can also do multiple selection while holding SHIFT Key just like in MS Excel.
ASPX
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GPanel.GetStore();
store.DataSource = new System.Collections.Generic.List<object>
{
new {
Name = "Bill Foot",
Email = "bill.foot@ext.net",
Start = new DateTime(2007, 2, 5),
Salary = 37000,
Active = true
},
new {
Name = "Bill Little",
Email = "bill.little@ext.net",
Start = new DateTime(2009, 6, 13),
Salary = 53000,
Active = true
}
};
store.DataBind();
}
}
</script>
<body>
<ext:ResourceManager ID="resManager" runat="server" Theme="Gray" RemoveViewState="true" />
<form runat="server" id="app" onsubmit="return false">
<ext:KeyMap runat="server" Target="={Ext.isGecko ? Ext.getDoc() : Ext.getBody()}">
<ext:KeyBinding>
<Keys>
<ext:Key Code="INSERT" />
</Keys>
<Listeners>
<Event Handler="insertKey();" />
</Listeners>
</ext:KeyBinding>
</ext:KeyMap>
<ext:TextField runat="server" EmptyText="Enter MATNR" ID="addMatNr" AutoPostBack="false">
<Listeners>
<SpecialKey Fn="enterKeyPressHandler" />
</Listeners>
</ext:TextField>
<ext:GridPanel ID="GPanel" runat="server" Height="500" StripeRows="true">
<Store>
<ext:Store ID="Store" runat="server">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="Name" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column Header="Name" DataIndex="Name">
</ext:Column>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
<KeyMap>
<ext:KeyBinding>
<Keys>
<ext:Key Code="DELETE" />
</Keys>
<Listeners>
<Event Fn="deleteRows" />
</Listeners>
</ext:KeyBinding>
</KeyMap>
</ext:GridPanel>
<ext:XScript runat="server" ID="scripts">
<script type="text/javascript">
// ENTER KEY
var enterKeyPressHandler = function (f, e)
{
if (e.getKey() == 13)
{
var grid = #{GPanel};
grid.insertRecord(0, {Name:#{addMatNr}.getValue()});
grid.getView().refresh();
grid.getSelectionModel().selectFirstRow();
grid.getView().focusEl.focus();
#{addMatNr}.setValue('');
e.stopEvent();
}
}
// INSERT KEY
var insertKey = function()
{
#{addMatNr}.focus(true);
}
// DELETE ROW
var deleteRows = function () {
var grid = #{GPanel};
Ext.Msg.confirm('Delete Rows', 'Are you sure?', function (btn) {
if (btn == 'yes') {
grid.deleteSelected();
}
grid.getSelectionModel().selectFirstRow();
grid.getView().focusEl.focus();
})
}
</script>
</ext:XScript>
</form>
</body>
</html>
Keine Kommentare:
Kommentar veröffentlichen