Issue with inserting multiple records in grid

[n_s_adhikari@rediffmail.com]

Hi Guys,

I am inserting multiple records in the grid. On UI I can see these getting added. But grid.save() method is not firing OnBeforeStoreChanged event.

My store definition as follows:

<ext:Store ID="storeOpeningStock" runat="server" OnBeforeStoreChanged="storeOpeningStock_BeforeChange">
        <Reader>
            <ext:JsonReader ReaderID="StkId">
                <Fields>
                    <ext:RecordField Name="StkId" />
                    <ext:RecordField Name="MobileNumber" />
                    <ext:RecordField Name="IMSI" />
                    <ext:RecordField Name="ExpiryDate"  />
                    <ext:RecordField Name="OpeningStockDate" />
                    <ext:RecordField Name="PurchasePrice" Type="Float"/>
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>

my grid is as follows:

<ext:GridPanel ID="gridOpeningStock" runat="server" StoreID="storeOpeningStock" MaskDisabled="false" AutoExpandColumn="MobileNumber" ClicksToEdit="1" StripeRows="true">

<TopBar>
                                        <ext:Toolbar ID="Toolbar2" runat="server">
                                            <Items>
                                                
                                                <ext:ToolbarButton ID="ToolbarButton4" runat="server" Icon="Disk" Text="Save" >
                                                     <Listeners>
                                                        <Click Handler="#{gridOpeningStock}.save();" />
                                                    </Listeners>
                                                    <ToolTips>
                                                        <ext:ToolTip ID="ToolTip4" runat="server" Html="Save Change" />
                                                    </ToolTips>
                                                </ext:ToolbarButton> 
                                                
                                                 
                                            </Items>
                                        </ext:Toolbar>
                                    </TopBar>
                                                                                        
                                    <ColumnModel ID="ColumnModel2" runat="server">
                                        <Columns>
                                            <ext:Column ColumnID="StkId" DataIndex="StkId" Header="Stock Id" Hidden="true">
                                                <Editor>
                                                    <ext:NumberField ID="txtStkId" runat="server"/>
                                                </Editor>
                                            </ext:Column> 
                                            <ext:Column ColumnID="MobileNumber" DataIndex="MobileNumber" Header="Mobile#">
                                                <Editor>
                                                    <ext:NumberField ID="txtMobileNumber" runat="server"/>
                                                </Editor>
                                            </ext:Column>    
                                            <ext:Column DataIndex="IMSI" Header="IMSI Number">
                                                <Editor>
                                                    <ext:NumberField ID="txtIMSI" runat="server"/>
                                                </Editor>
                                            </ext:Column>
                                            <ext:Column DataIndex="ExpiryDate" Header="Expiry Date" >
                                                
                                                <Editor>
                                                    <ext:DateField ID="txtExpiryDate" runat="server" />
                                                </Editor>
                                            </ext:Column>
                                            <ext:Column DataIndex="OpeningStockDate" Header="Opening Stock Date">
                                                
                                                <Editor>
                                                    <ext:DateField ID="txtOpeningStockDate" runat="server" AllowBlank="false" MsgTarget="Under"/>
                                                </Editor>
                                            </ext:Column>
                                            <ext:Column DataIndex="PurchasePrice" Header="Purchase Price">
                                                <Editor>
                                                    <ext:NumberField ID="txtPurchasePrice" runat="server" AllowBlank="false" MsgTarget="Under"/>
                                                </Editor>
                                            </ext:Column>
                                        </Columns>
                                    </ColumnModel>
                                     <SelectionModel>
                                         <ext:RowSelectionModel ID="RowSelectionModel2" runat="server" SingleSelect="true"/>
                                     </SelectionModel>
                                    <BottomBar>
                                        <ext:PagingToolBar ID="PagingToolBar2" runat="server" PageSize="10" StoreID="storeOpeningStock" />
                                    </BottomBar>
                                    <LoadMask ShowMask="true" />
                                    <SaveMask ShowMask="true" />
                                </ext:GridPanel>

Javascript to insert multiple records are as follows:

function insertRange()
            {
                        mobilestart = eval(txtRngMobileFrom.value);
                        imsistart = eval(txtRngIMSIFrom.value);
                        for(i=0;i< eval(txtRngQuantity.value);i++)
                        {
                            mobile = eval(txtRngMobileFrom.value)+i;
                            imsi = eval(txtRngIMSIFrom.value)+i;
insertOpeningStockRecord(mobile,imsi,txtRngExpiry.value, txtRngOpeningStock.value,txtRngPurchasePrice.value);
                        }
            }


function insertOpeningStockRecord(m,i,exd,os,pr) {
                var grid = <%= gridOpeningStock.ClientID %>;
                var Rec = <%= gridOpeningStock.ClientID %>.getStore().recordType;
                var store = grid.getStore();
                var row;
                var r = new Rec({
                    StkId: m,
                    MobileNumber:       m,
                    IMSI:    i, 
                    ExpiryDate:    exd,
                    OpeningStockDate: os,
                    PurchasePrice : pr
                });

                    r.firstEdit = true;
                    r.newRecord = true;
                    r.data.newRecord = true;
                    r.commit();
                    store.add(r);

                    row = store.indexOf(r);
                    if(row &amp;&amp; undefined !== this.editOnAddCol) {
                        grid.getView().focusRow(row);
                        grid.startEditing(row, this.editOnAddCol);
                    }
            }

every thing is working fine. I Can see the records getting inserted into the grid. But when i click the Save button storeOpeningStock_BeforeChange is not getting fired. But, after records are inserted If I change any record, storeOpeningStock_BeforeChange is getting fired.

Can someone give me any clue.

Thanks in advance.

[n_s_adhikari@rediffmail.com]

Just figured it out. Need to grid.stopEditing() before calling store.insert().

Solved.