[CLOSED] Problem with Grid Multiple KeyBindings

  1. #1

    [CLOSED] Problem with Grid Multiple KeyBindings

    Hi,

    Due to this example, I see that only the last key binding is rendered as javascript sencha code. And the other key bindings doesn't work and display alert's.

    TEST CASE
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Bug Report - Ext.NET Examples</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        <ext:Container runat="server" ItemID="seleccion" Region="Center" Layout="BorderLayout"
                Border="false" Cls="splitter" Width="550" Height="400">
                <Items>
                    <ext:Panel runat="server" ItemID="containerDisponibles" Region="West" Layout="FitLayout"
                        Draggable="false" Split="true" Border="false">
                        <TopBar>
                            <ext:Toolbar runat="server" Height="30">
                                <Items>
                                    <ext:ToolbarTextItem runat="server" Text="Available">
                                        <Listeners>
                                            <AfterRender Handler="this.setText(this.getText() +':');" />
                                        </Listeners>
                                    </ext:ToolbarTextItem>
                                    <ext:TriggerField ItemID="txtFiltro" runat="server" EnableKeyEvents="true" Flex="1"
                                        MaxLength="30">
                                        <Triggers>
                                            <ext:FieldTrigger Icon="Clear" />
                                        </Triggers>
                                        <Listeners>
                                            <KeyUp Handler="item.up('#seleccion').filtro.applyFilter();" Buffer="250" />
                                            <TriggerClick Handler="item.up('#seleccion').filtro.clearFilter();" />
                                        </Listeners>
                                    </ext:TriggerField>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                        <Items>
                            <ext:GridPanel ItemID="gridDisponibles" runat="server" Border="false" Flex="1" AutoScroll="true"
                                EnableColumnHide="false">
                                <View>
                                    <ext:GridView runat="server" TrackOver="true" StripeRows="true" LoadingUseMsg="false"
                                        LoadMask="false">
                                        <KeyMap runat="server">
                                            <Binding>
                                                <ext:KeyBinding Handler="Ext.getCmp(this.target.id).up('#seleccion').down('#btnAdd').fireEvent('click');">
                                                    <Keys>
                                                        <ext:Key Code="RIGHT" />
                                                    </Keys>
                                                </ext:KeyBinding>
                                            </Binding>
                                        </KeyMap>
                                    </ext:GridView>
                                </View>
                                <Store>
                                    <ext:Store runat="server" ItemID="dsDisponibles" AutoLoad="false" ShowWarningOnFailure="false"
                                        RemoteSort="false" AutoDataBind="true">
                                        <Model>
                                            <ext:Model runat="server" IDProperty="CodigoInterno">
                                                <Fields>
                                                    <ext:ModelField Name="company" />
                                                    <ext:ModelField Name="price" Type="Float" />
                                                    <ext:ModelField Name="change" Type="Float" />
                                                    <ext:ModelField Name="pctChange" Type="Float" />
                                                    <ext:ModelField Name="lastChange" Type="Date" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                        <Sorters>
                                            <ext:DataSorter Property="company" Direction="ASC"/>
                                        </Sorters>
                                    </ext:Store>
                                </Store>
                                <ColumnModel runat="server">
                                    <Columns>
                                        <ext:Column runat="server" DataIndex="company" Text="text"
                                            Width="100" Sortable="true" MenuDisabled="true">
                                            <Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
                                        </ext:Column>
                                        <ext:Column runat="server" DataIndex="price" Text="text"
                                            Flex="1" Sortable="true" MenuDisabled="true">
                                            <Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
                                        </ext:Column>
                                    </Columns>
                                </ColumnModel>
                                <SelectionModel>
                                    <ext:RowSelectionModel runat="server" Mode="Multi" />
                                </SelectionModel>
                                <Listeners>
                                    <CellDblClick Handler="item.up('#seleccion').down('#btnAdd').fireEvent('click');" />
                                </Listeners>
                            </ext:GridPanel>
                        </Items>
                        <Listeners>
                        </Listeners>
                    </ext:Panel>
                    <ext:Container runat="server" ItemID="containerBotones" Region="Center" Layout="VBoxLayout"
                        Draggable="false" Width="50" Frame="false" Split="true" Border="false">
                        <LayoutConfig>
                            <ext:VBoxLayoutConfig Align="Center" Pack="Center" DefaultMargins="5" />
                        </LayoutConfig>
                        <Items>
                            <ext:Button ItemID="btnAdd" runat="server" Icon="ResultsetNext" ToolTip="text">
                                <Listeners>
                                </Listeners>
                            </ext:Button>
                            <ext:Button ItemID="btnAddAll" runat="server" Icon="ResultsetLast" ToolTip="text">
                                <Listeners>
                                </Listeners>
                            </ext:Button>
                            <ext:Button ItemID="btnRemove" runat="server" Icon="ResultsetPrevious" ToolTip="text">
                                <Listeners>
                                </Listeners>
                            </ext:Button>
                            <ext:Button ItemID="btnRemoveAll" runat="server" Icon="ResultsetFirst" ToolTip="text">
                                <Listeners>
                                </Listeners>
                            </ext:Button>
                        </Items>
                        <Listeners>
                        </Listeners>
                    </ext:Container>
                    <ext:Panel runat="server" ItemID="containerSeleccionados" Region="East" Layout="FitLayout"
                        Draggable="false" Split="true" Border="false">
                        <TopBar>
                            <ext:Toolbar runat="server" Height="30">
                                <Items>
                                    <ext:ToolbarTextItem runat="server" Text="Selected">
                                        <Listeners>
                                            <AfterRender Handler="this.setText(this.getText() +':');" />
                                        </Listeners>
                                    </ext:ToolbarTextItem>
                                    <ext:ToolbarFill runat="server" />
                                    <ext:Button ItemID="btnUp" runat="server" IconCls="arrowUp-icon" Disabled="true">
                                        <Listeners>
                                        </Listeners>
                                    </ext:Button>
                                    <ext:Button ItemID="btnDown" runat="server" IconCls="arrowDown-icon" Disabled="true">
                                        <Listeners>
                                        </Listeners>
                                    </ext:Button>
                                    <ext:ToolbarSpacer runat="server" Width="10" />
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                        <Items>
                            <ext:GridPanel ItemID="gridSeleccionados" runat="server" Border="false" Flex="1"
                                AutoScroll="true" SortableColumns="false">
                                <View>
                                    <ext:GridView runat="server" TrackOver="true" StripeRows="true" LoadingUseMsg="false"
                                        LoadMask="false" MarkDirty="false">
                                        <KeyMap runat="server">
                                            <Binding>
                                                <ext:KeyBinding Ctrl="false" Alt="false" Shift="false" DefaultEventAction="StopEvent"
                                                    Handler="alert('left')">
                                                    <Keys>
                                                        <ext:Key Code="LEFT" />
                                                    </Keys>
                                                </ext:KeyBinding>
                                            </Binding>
                                        </KeyMap>
                                        <KeyMap runat="server">
                                            <Binding>
                                                <ext:KeyBinding Ctrl="false" Alt="false" Shift="false" DefaultEventAction="StopEvent"
                                                    Handler="alert('up')">
                                                    <Keys>
                                                        <ext:Key Code="UP" />
                                                    </Keys>
                                                </ext:KeyBinding>
                                            </Binding>
                                        </KeyMap>
                                        <KeyMap runat="server">
                                            <Binding>
                                                <ext:KeyBinding Ctrl="false" Alt="false" Shift="false" DefaultEventAction="StopEvent"
                                                    Handler="alert('down')">
                                                    <Keys>
                                                        <ext:Key Code="DOWN" />
                                                    </Keys>
                                                </ext:KeyBinding>
                                            </Binding>
                                        </KeyMap>
                                        <Plugins>
                                            <ext:GridDragDrop runat="server" />
                                        </Plugins>
                                    </ext:GridView>
                                </View>
                                <Store>
                                    <ext:Store runat="server" ItemID="dsSeleccionados" AutoLoad="false" ShowWarningOnFailure="false"
                                        RemoteSort="false">
                                        <Model>
                                            <ext:Model runat="server" IDProperty="company">
                                                <Fields>
                                                    <ext:ModelField Name="company" />
                                                    <ext:ModelField Name="price" Type="Float" />
                                                    <ext:ModelField Name="change" Type="Float" />
                                                    <ext:ModelField Name="pctChange" Type="Float" />
                                                    <ext:ModelField Name="lastChange" Type="Date" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                    </ext:Store>
                                </Store>
                                <ColumnModel runat="server">
                                    <Columns>
                                        <ext:Column runat="server" DataIndex="Color" Resizable="false" Sortable="false" MenuDisabled="true"
                                            Width="10">
                                        </ext:Column>
                                        <ext:Column runat="server" DataIndex="company" Text="text"
                                            Width="100" Sortable="true" MenuDisabled="true">
                                            <Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
                                        </ext:Column>
                                        <ext:Column runat="server" DataIndex="price" Text="text"
                                            Flex="1" Sortable="true" MenuDisabled="true">
                                            <Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
                                        </ext:Column>
                                        <ext:Column runat="server" DataIndex="change" Text="text"
                                            Width="100" Sortable="true" MenuDisabled="true">
                                            <Editor>
                                                <ext:ComboBox ItemID="change" runat="server" AllowBlank="false">
                                                    <Items>
                                                        <ext:ListItem Text="text" Value="0" Mode="Raw" />
                                                        <ext:ListItem Text="text" Value="1" Mode="Raw" />
                                                        <ext:ListItem Text="text" Value="2" Mode="Raw" />
                                                        <ext:ListItem Text="text" Value="4"
                                                            Mode="Raw" />
                                                        <ext:ListItem Text="text" Value="5" Mode="Raw" />
                                                    </Items>
                                                </ext:ComboBox>
                                            </Editor>
                                        </ext:Column>
                                        <ext:Column runat="server" DataIndex="pctChange" Text="text"
                                            Width="100" Sortable="true" MenuDisabled="true">
                                            <Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
                                            <Editor>
                                                <ext:TextField ItemID="pctChange" runat="server" />
                                            </Editor>
                                        </ext:Column>
                                    </Columns>
                                </ColumnModel>
                                <SelectionModel>
                                    <ext:RowSelectionModel runat="server" Mode="Multi">
                                    </ext:RowSelectionModel>
                                </SelectionModel>
                                <Plugins>
                                    <ext:CellEditing runat="server" ClicksToEdit="1"/>
                                </Plugins>
                                <Listeners>
                                    <CellDblClick Handler="item.up('#seleccion').down('#btnRemove').fireEvent('click');" />
                                </Listeners>
                            </ext:GridPanel>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Container>
    </body>
    </html>
    Tested with Ext.NET 2.1 r4377 (used currently in my project) and latest SVN Ext.NET 2.2 r4997.
    In v2.2 it only renders a blue square and I couldn't test it.

    Any workaround, or fix for v2.1?
    Are you able to reproduce the error?
    Last edited by Daniil; Apr 09, 2013 at 9:14 AM. Reason: [CLOSED]
  2. #2
    Hi @softmachine2011,

    There must a single KeyMap, no need to create a KeyMap for each Binding.

    Example
    <ext:GridView runat="server">
        <KeyMap runat="server">
            <Binding>
                <ext:KeyBinding Handler="alert('left')">
                    <Keys>
                        <ext:Key Code="LEFT" />
                    </Keys>
                </ext:KeyBinding>
            </Binding>
            <Binding>
                <ext:KeyBinding Handler="alert('up')">
                    <Keys>
                        <ext:Key Code="UP" />
                    </Keys>
                </ext:KeyBinding>
            </Binding>
            <Binding>
                <ext:KeyBinding Handler="alert('down')">
                    <Keys>
                        <ext:Key Code="DOWN" />
                    </Keys>
                </ext:KeyBinding>
            </Binding>
        </KeyMap>
        <Plugins>
            <ext:GridDragDrop runat="server" />
        </Plugins>
    </ext:GridView>
    In v2.2 it only renders a blue square and I couldn't test it.
    The East and West regions requires Flex or Width setting.

    For your layout, i.e. | flex | fixed width | flex |, it is better to use an HBoxLayout.
  3. #3
    Hi,

    Yes, my mistake was to create multiple keymap.

    Thanks

Similar Threads

  1. Filter multiple data in grid
    By Anburaja in forum 1.x Help
    Replies: 4
    Last Post: Nov 24, 2012, 1:10 AM
  2. [CLOSED] Multiple Grid Sorting Example Error
    By marco.morreale in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 19, 2012, 9:19 AM
  3. Multiple Scroll Problem
    By ITECH-Developer in forum 1.x Help
    Replies: 0
    Last Post: Sep 26, 2011, 1:07 PM
  4. [CLOSED] Multiple User Controls problem
    By CMA in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: May 12, 2011, 12:38 PM
  5. problem with multiple dropdownlists using the same storeid
    By LeeTheGreek in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jan 22, 2009, 7:34 AM

Tags for this Thread

Posting Permissions