[CLOSED] How to catch every Key Input

[blueworld]

Hi.

I am currently developing an application that involves a barcode scanner.
Is there any way to globaly catch every incoming key input, except arrow keys?

I have tried to setup a hidden textfield with autofocus = true, somehow this did not work...

                                    <ext:TextField ID="TextFieldHiddenVerleihRead" runat="server" Note="Name des Fahrers" Hidden="true"  AutoFocus="true">
                                        <Listeners>
                                            <Change Handler="alert(#{TextFieldHiddenVerleihRead}.getValue())" />
                                        </Listeners>

Anyway, I think that the solution with the textfield is not the best one, because there is also a grid that gets reloaded after an item has been scanned, therefore the user could not scroll trough the grid if the textbox has always focus.

Is there any idea what component I could use to process the barcode-scanner input?

Thanks

[Daniil]

Hi @blueworld,

What about just to listen to the KeyDown event globally?

<ext:ResourceManager runat="server">
<Listeners>
    <DocumentReady Handler="var t = Ext.isGecko ? Ext.getDoc() : Ext.getBody();
                    
                            t.on('keydown', function (e) { alert(e.getKey()); })" />
</Listeners>
</ext:ResourceManager>

[blueworld]

Hi Daniil,

thank you for the hint, seems like a good point to start. Your function catches a single char, a barcode-scanner returns something like "0000313534562" + Enter

What would be the right event to catch that string?


Edit: I did a test with the textbox. this works fine in terms of that the complete string is shown there and the listener fires after enter key, but why does it not work if the textbox is hidden=true or visible=false?

[Daniil]

thank you for the hint, seems like a good point to start. Your function catches a single char, a barcode-scanner returns something like "0000313534562" + Enter

What would be the right event to catch that string?

You can put pressed keys somewhere, then extract all of them on Enter.

Edit: I did a test with the textbox. this works fine in terms of that the complete string is shown there and the listener fires after enter key, but why does it not work if the textbox is hidden=true or visible=false?

Well, because of a hidden or non-rendered TextField cannot be focused. We can't type into a non-focused TextField, so, it doesn't trigger its Change event.

[blueworld]

Hi Daniil, thank you I have solved it like this now:

    <ext:ResourceManager ID="ResourceManager1" runat="server" >
        <Listeners>
    <DocumentReady Handler="var t = Ext.isGecko ? Ext.getDoc() : Ext.getBody();
                     
    t.on('keydown', function (e) {
        if(e.getKey() == 16) return;
        if (e.getKey() == 13 && currentString.length != 16){
        // Invalid KeyString
        currentString='';
        }
        else if (e.getKey() == 13 && currentString.length == 16)
        {
        //Valid KeyString
        App.direct.doStuff(currentString);
        currentString='';
        }
        else
        {
        // Still appending
        currentString = currentString + String.fromCharCode(e.getKey());
        }
    })" />
</Listeners>
    </ext:ResourceManager>

The codes have 16 digits, so only if there are 16 chars in the buffer followed by the enter key it is valid.
Of course some could accidentally hit 16 random keys and press enter, but on the serverside I will do another check if the DB contains this key.


Btw. is there any way to render something so it is accesable but not visible? I remember I had the same problem with a grid inside a hidden window, I wanted to preload that grid in the background already before the user had opened the window, it did not work.

I think my main problem has been solved, thank you

[Daniil]

Btw. is there any way to render something so it is accesable but not visible?

Please specify what exactly do you need under "accessable".

I remember I had the same problem with a grid inside a hidden window, I wanted to preload that grid in the background already before the user had opened the window, it did not work.

I think it should be possible. Here is a similar problem discussed.
http://forums.ext.net/showthread.php?25670

[blueworld]

Hi Daniil,

I have discovered a big problem Today.

If I have selected a grid row, the global keyDown listener does not react on the Enter Key anymore.

Do you have any idea how to solve that problem?

[Daniil]

Please provide a test case.

[blueworld]

Hi Daniil,

very simple testcase:

Load page, press enter, it will alert "Enter"
Select a row, press enter, nothing happens.
If you click somewhere else, like at the panel header, it alerts enter again even if the row is still selected in the grid.
But it does not alert after select.

All other keys get catched if a row is selected, but NOT enter. (You can test it if you remove the comment from "//alert(e.getKey());"
I really need a fix or workaround, because this behaviour is destroying my whole barcode-scanner application

<%@ Page Language="VB" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
 
<!DOCTYPE html>
 
<html>
<head id="Head1" runat="server">
    <title></title>
 
    <script runat="server">
        Private Class TestObject
            Public Property ID As Integer
            Public Property Name As String
            Public Property IsValid As Boolean
        End Class
           
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            If Not ExtNet.IsAjaxRequest Then
                Dim xx As New Generic.List(Of TestObject)
                For counter = 0 To 30
                    Dim testObject As New TestObject
                    testObject.ID = counter
                    testObject.Name = "Name" + counter.ToString()
                    If counter Mod 2 Then
                        testObject.IsValid = False
                    Else
                        testObject.IsValid = True
                    End If
                    xx.Add(testObject)
                Next
               
                FahrzeugeStore.DataSource = xx
                FahrzeugeStore.DataBind()
               
            End If
        End Sub
         
    </script>
 
    <script>
 
 
    </script>
 
    <style>
   
    </style>
</head>
<body>
    <form runat="server" >
    <ext:ResourceManager ID="ResourceManager1" runat="server">
        <Listeners>
                <DocumentReady Handler="var t = Ext.isGecko ? Ext.getDoc() : Ext.getBody();
                     
    t.on('keydown', function (e) {
               if(e.getKey() == 13) alert('Enter'); 
               //alert(e.getKey());
    })" />
            </Listeners>
    </ext:ResourceManager>
 
    <ext:Viewport ID="Viewport1" runat="server" Layout="borderLayout">
        <Items>
            <ext:Panel ID="Panel1" runat="server" Region="Center" Layout="FitLayout">
                <Items>
                    <ext:GridPanel ID="FahrzeugeGrid" runat="server" Title="Fahrzeugauswahl"
                        Icon="Lorry" Flex="3" ForceFit="true" SelectionMemory="false">
                        <View>
                            <ext:GridView ID="Gridview1" runat="server" StripeRows="true"></ext:GridView>
                        </View>
                        <Store>
                            <ext:Store ID="FahrzeugeStore" runat="server">
                                <Model>
                                    <ext:Model ID="Model1" runat="server" IDProperty="ID">
                                        <Fields>
                                            <ext:ModelField Name="ID" />
                                            <ext:ModelField Name="Name" />
                                            <ext:ModelField Name="IsValid" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                                <Listeners>
 
                                </Listeners>
                            </ext:Store>
                        </Store>
                        <ColumnModel>
                            <Columns>
                                <ext:Column ID="Column1" runat="server" Text="ID" DataIndex="ID"
                                    Sortable="True" Flex="1" Visible="false" />
 
                                <ext:Column ID="Column2" runat="server" Text="Name" DataIndex="Name"
                                    Sortable="True" Flex="1" />
 
                            </Columns>
                        </ColumnModel>
                        <SelectionModel>
                            <ext:RowSelectionModel ID="RowSelectionModel1" Mode="Multi" runat="server" />
                        </SelectionModel>
                    </ext:GridPanel>
 
                </Items>
            </ext:Panel>
 
 
 
        </Items>
    </ext:Viewport>
        </form>
</body>
</html>

[Daniil]

Thank you.

A RowSelectionModel instantiates a KeyNav by default. It catches Enter and stops the event.

You can disable it.

<ext:RowSelectionModel EnableKeyNav="false" />

http://docs-origin.sencha.com/extjs/...g-enableKeyNav