What's New?

Adding row to grid in JS causes mouse tracking to fail with error

  1. #1
    Feb 03, 2012, 3:33 AM

    Adding row to grid in JS causes mouse tracking to fail with error

    EXT.net 1.2
    with grid below, add a record with grid.store.insert(0, record);
    Move the mouse OVER the bottom row of the grid. a JS error is thrown. Since the grid
    grew by 1 row, the triggerElement has a bug and did not recognize the new row and
    therefore, we cannot find the row or the data and get an error 

     
<script>
        var showTip = function () {
            var rowIndex = GridPanelT.view.findRowIndex(this.triggerElement),
                cellIndex = GridPanelT.view.findCellIndex(this.triggerElement),
                record = GridPanelT.store.getAt(rowIndex),
                fieldName = GridPanelT.getColumnModel().getDataIndex(cellIndex),
                data = record.get(fieldName);
            this.body.dom.innerHTML = data;
        };
</script>
 <ext:GridPanel 
        ColumnLines="true"
        ID="GridPanelT"
        runat="server"
        ClicksToEdit="1"
        StripeRows="true"
        TrackMouseOver="true"
        Layout="fit"
        Border="true"
        AutoHeight="true">
        <ColumnModel ID="ColumnModelT" runat="server">
            <Columns>
                <ext:Column Header="Id" ColumnID="id" DataIndex="id" Width="35" Hidden="true"/>
                <ext:CommandColumn Width="24">
                    <Commands>
                        <ext:GridCommand CommandName="AddRow" Icon="Add">
                            <ToolTip Text="Add New Row" />
                        </ext:GridCommand>
                    </Commands>
                </ext:CommandColumn>
                <ext:DateColumn Header="Date" ColumnId="dateVate"  Width="90"  DataIndex="dateVate" Format="ddd MM/dd">
                    <Editor>
                        <ext:DateField ID="dateFieldDateVate" runat="server" />
                    </Editor>
                </ext:DateColumn>
       ....
     </ext:GridPanel>

    <ext:ToolTip 
        ID="CellTip" 
        runat="server" 
        Target="={GridPanelT.getView().mainBody}"
        Delegate=".x-grid3-cell"
        TrackMouse="true">
        <Listeners>
            <Show Fn="showTip" />
        </Listeners>
    </ext:ToolTip>
  2. #2
    Feb 03, 2012, 8:52 AM
    Hi,

    I was unable to reproduce. Here is my test case.

    Example
    <%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "test1", "test2", "test3" },
                new object[] { "test4", "test5", "test6" },
                new object[] { "test7", "test8", "test9" },
            };
            store.DataBind();
        }
    }
</script>

<!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>Ext.NET Example</title>

    <script type="text/javascript">
        var showTip = function () {
            var rowIndex = GridPanel1.view.findRowIndex(this.triggerElement), 
                cellIndex = GridPanel1.view.findCellIndex(this.triggerElement),
                record = Store1.getAt(rowIndex),
                fieldName = GridPanel1.getColumnModel().getDataIndex(cellIndex),
                data = record.get(fieldName);
                
            this.body.dom.innerHTML = data;
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store ID="Store1" runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test1" />
                                <ext:RecordField Name="test2" />
                                <ext:RecordField Name="test3" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1" />
                    <ext:Column Header="Test2" DataIndex="test2" />
                    <ext:Column Header="Test3" DataIndex="test3" />
                </Columns>
            </ColumnModel>
        </ext:GridPanel>
        <ext:ToolTip 
            ID="RowTip" 
            runat="server" 
            Target="={GridPanel1.getView().mainBody}"
            Delegate=".x-grid3-cell"
            TrackMouse="true">
            <Listeners>
                <Show Fn="showTip" />
            </Listeners>
        </ext:ToolTip>
        <ext:Button runat="server" Text="Add a record">
            <Listeners>
                <Click Handler="GridPanel1.addRecord({
                                    test1 : 'new',
                                    test2 : 'new',
                                    test3 : 'new'
                                });" />
            </Listeners>
        </ext:Button>
    </form>
</body>
</html>
  3. #3
    Feb 03, 2012, 12:30 PM

    grids

    I changed by JS method as below. Notice that i call insertRecord and addRecord directly instead of calling it on the store. Even after this, if i did grid.store.getCount(), the count is still the same as original. Also, assume 10 rows, if I insert first in row 2, then insert into row 4. The second insert is off a row since it doesnt realize that the first insert pushed everything down 1 row.

    Am I missing a doLayout() or do I have a code mistake?

    /Z

            var generateNewRow = function (command, rowData, grid, record) {
            var rowIndex = index = grid.store.indexOf(record);
            var newRecord = new grid.store.recordType({ calendarDate: rowData.calendarDate, companyId: rowData.companyId, employeeId: rowData.employeeId });
            if (rowIndex == grid.store.getCount() - 1) {
                grid.addRecord(newRecord);
            } else {
                grid.insertRecord(rowIndex + 1, newRecord);
            }
        }
  4. #4
    Feb 10, 2012, 12:50 PM
    Please provide a full, but simplified, runnable sample to reproduce the problem.

Similar Threads

  1. Grid Panel Adding ext:GridView and ext:GroupingView to <view> creates an error.
    By eqttester in forum 1.x Help
    Replies: 4
    Last Post: Mar 07, 2012, 3:52 PM
  2. [CLOSED] ext:Notification - error when mouse over
    By supera in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 20, 2012, 1:47 PM
  3. [CLOSED] Adding Google Marker with mouse
    By kenanhancer in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 22, 2011, 1:30 PM
  4. [CLOSED] [1.0] Stores fail with error
    By ljankowski in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: Sep 02, 2010, 3:33 PM
  5. [CLOSED] Getting Grid Rows Error after Adding Row
    By CMA in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 12, 2010, 1:17 PM

Posting Permissions