[OPEN] [#219] Editor of GridPanel goes off grid when "Tab" is pressed or window is maximized

Page 1 of 2 12 LastLast
  1. #1

    [OPEN] [#219] Editor of GridPanel goes off grid when "Tab" is pressed or window is maximized

    Hi, I'm using ExtJS version 4.2.0.663 and Ext.net version 2.2.0. IE browser. After running the code below, follow this steps:

    1. Click on a cell.
    2. Press "Tab" a few times.
    3. Notice the cell goes off the grid. (See attachment)

    Another way to reproduce this:
    1. Click on a cell to edit a value.
    2. Expand the window.
    3. Notice the cell is off the grid.

    Not reproducible in Chrome or Firefox.

    <script runat="server">
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            Dim list = New List(Of NewObj)()
            For i As Integer = 0 To 30
                Dim obj = New NewObj()
                obj.Name = "Item " & i.ToString
                obj.ID = i
                obj.Number = CInt(Int((1000 - 0 + 1) * Rnd() + 0))
                obj.Text = ""
                list.Add(obj)
            Next
            Me.Store1.DataSource = list
            Me.Store1.DataBind()
        End Sub
        
        Class NewObj
            
            Private _ID As Integer
            Public Property ID() As Integer
                Get
                    Return _ID
                End Get
                Set(ByVal value As Integer)
                    _ID = value
                End Set
            End Property
    
            
            Private _Name As String
            Public Property Name() As String
                Get
                    Return _Name
                End Get
                Set(ByVal value As String)
                    _Name = value
                End Set
            End Property
            
            
            Private _Number As Integer
            Public Property Number() As Integer
                Get
                    Return _Number
                End Get
                Set(ByVal value As Integer)
                    _Number = value
                End Set
            End Property
    
            
            Private _Text As String
            Public Property Text() As String
                Get
                    Return _Text
                End Get
                Set(ByVal value As String)
                    _Text = value
                End Set
            End Property
    
        End Class
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Test Page </title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <script type="text/javascript">
        </script>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" ScriptMode="Debug" Theme="Gray"
            DisableViewState="true" />
        <ext:Viewport runat="server" ID="asd" Layout="FitLayout">
            <Items>
                <ext:GridPanel ID="GridPanel1" runat="server" Width="600" Height="300" Title="Test">
                    <Store>
                        <ext:Store ID="Store1" runat="server">
                            <Model>
                                <ext:Model ID="Model1" runat="server" IDProperty="ID">
                                    <Fields>
                                        <ext:ModelField Name="ID" Type="String" />
                                        <ext:ModelField Name="Name" Type="String" />
                                        <ext:ModelField Name="Number" Type="String" />
                                        <ext:ModelField Name="Text" Type="String" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                            <Sorters>
                                <ext:DataSorter Property="Name" Direction="ASC" />
                            </Sorters>
                        </ext:Store>
                    </Store>
                    <TopBar>
                        <ext:Toolbar ID="Toolbar1" runat="server">
                            <Items>
                                <ext:Button ID="Button1" runat="server" Text="Add" />
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <ColumnModel ID="ColumnModel1" runat="server">
                        <Columns>
                            <ext:Column ID="Column1" runat="server" Text="ID" DataIndex="ID" Width="300">
                                <Editor>
                                    <ext:TextField ID="TextField1" runat="server" AllowBlank="false" />
                                </Editor>
                            </ext:Column>
                            <ext:Column ID="Column2" runat="server" Text="Name" DataIndex="Name" Width="300">
                                <Editor>
                                    <ext:TextField ID="TextField2" runat="server" AllowBlank="false" />
                                </Editor>
                            </ext:Column>
                            <ext:Column ID="Column3" runat="server" Text="Number" DataIndex="Number" Width="300">
                                <Editor>
                                    <ext:TextField ID="TextField3" runat="server" AllowBlank="false" />
                                </Editor>
                            </ext:Column>
                            <ext:Column ID="Column4" runat="server" Text="Text" DataIndex="Text" Width="300">
                                <Editor>
                                    <ext:TextField ID="TextField4" runat="server" AllowBlank="false" />
                                </Editor>
                            </ext:Column>
                        </Columns>
                    </ColumnModel>
                    <SelectionModel>
                        <ext:CellSelectionModel ID="CellSelectionModel1" runat="server" />
                    </SelectionModel>
                    <Plugins>
                        <ext:CellEditing ID="CellEditing1" runat="server" ClicksToEdit="1" />
                    </Plugins>
                </ext:GridPanel>
            </Items>
        </ext:Viewport>
        </form>
    </body>
    </html>
    Attached Thumbnails Click image for larger version. 

Name:	1.png 
Views:	28 
Size:	7.3 KB 
ID:	6094  
    Last edited by Daniil; Apr 29, 2013 at 4:03 AM. Reason: [OPEN] [#219]
  2. #2
    Sorry, correction: Not reproducible in IE Compatibility View
  3. #3
    Hi @stratadev,

    I could not reproduce with IE9.

    What is IE version where it is reproducible?
  4. #4
    Thanks @Daniil for your prompt reply. I am still able to reproduce this, not sure why.
  5. #5
    I can reproduce it for some reason and I was able to do a workaround for now by overriding one of Ext.net's overrides:

    Ext.Editor.override({
        onFieldBlur: function (field, e) {
            var me = this,
                target = Ext.Element.getActiveElement();
    
            if (me.editing && me.cancelOnBlur === true && me.selectSameEditor !== true) {
                me.cancelEdit();
            }
            else if (me.allowBlur === true && me.editing && me.selectSameEditor !== true) {
                me.completeEdit();
            }
    
            // If newly active element is focusable, prevent reacquisition of focus by editor owner
            if (Ext.fly(target).isFocusable() || target.getAttribute('tabIndex')) {
                //target.focus(); <- THIS IS WHERE IS COMMENTED OUT.
            }
        }
    });
  6. #6
    Quote Originally Posted by Daniil View Post
    I could not reproduce with IE9.

    What is IE version where it is reproducible?
    Could you answer, please?
  7. #7
    sorry, I could reproduce with all versions of IE.
  8. #8
    I edited my original post. There's a second way to reproduce this. Thanks for your help
  9. #9
    Reproducible with ExtJS as well:

                Ext.create('Ext.data.Store', {
                    storeId: 'simpsonsStore',
                    fields: ['name', 'email', 'phone'],
                    data: {
                        'items': [
                            { "name": "Lisa", "email": "lisa@simpsons.com", "phone": "555-111-1224" },
                            { "name": "Bart", "email": "bart@simpsons.com", "phone": "555-222-1234" },
                            { "name": "Homer", "email": "home@simpsons.com", "phone": "555-222-1244" },
                            { "name": "Marge", "email": "marge@simpsons.com", "phone": "555-222-1254" }
                        ]
                    },
                    proxy: {
                        type: 'memory',
                        reader: {
                            type: 'json',
                            root: 'items'
                        }
                    }
                });
    
                var panel = new Ext.grid.Panel({
                    title: 'Simpsons',
                    hidden: false,
                    store: Ext.data.StoreManager.lookup('simpsonsStore'),
                    columns: [
                        { header: 'Name', dataIndex: 'name', editor: 'textfield', width: 500 },
                        { header: 'Email', dataIndex: 'email', editor: 'textfield', width: 500 },
                        { header: 'Phone', dataIndex: 'phone', editor: 'textfield', width: 500 }
                    ],
                    selType: 'cellmodel',
                    plugins: [
                        Ext.create('Ext.grid.plugin.CellEditing', {
                            clicksToEdit: 1
                        })
                    ]
                });
    
                Ext.create('Ext.net.Viewport', {
                    items: [
                       panel
                    ],
                    layout: 'fit',
                    renderTo: Ext.getBody(),
                    autoScroll: true
                });
  10. #10
    I still can't reproduce the issue pressing Tab, but I can with another scenario. Thanks you.

    So, I reported to Sencha.
    http://www.sencha.com/forum/showthread.php?262338

    As far as I can understand you have a workaround for now, don't?
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 2
    Last Post: Jan 07, 2013, 8:08 AM
  2. Replies: 5
    Last Post: May 02, 2012, 5:37 PM
  3. Replies: 4
    Last Post: Oct 11, 2011, 2:42 AM
  4. [CLOSED] Set ImageButton to "pressed" on server-side.
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 12, 2011, 2:42 PM
  5. Replies: 4
    Last Post: Feb 17, 2011, 2:17 PM

Posting Permissions