Dienstag, 9. November 2010

Enter quickly data into Ext.Net GridPanel with Keybinding

This Blog moved to http://webapps-in-action.com/

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