[CLOSED] GridPanel Refresh grid problem

Hi,
I have the following problem.

I have one gridpanel and one formpanel, when I insert/update a new record, the record will be inserted in the gridpanel and then I call the store load function to refresh the gridpanel.

when I click the button "btnAddSave" i see the new record in the gridpanel, BUT after the #{st_BadgeReaders}.load(); is executed the new record disappear! If I reload the page I see the new record.

I think that the problem could be on the autoload mode of the store..

Thank you for your help.

Here above the code.

Code:

---

<script type="text/javascript" language="javascript">
            var addRecord = function (form, grid) {
                if (!form.getForm().isValid()) {
                    Ext.net.Notification.show({
                        iconCls  : "icon-exclamation",
                        html    : "Form is invalid",
                        title    : "Error"
                    });
           
                return false;
                }
           
                grid.store.insert(0, new BadgeReader(form.getForm().getFieldValues()));
                form.getForm().reset();
            };

            var updateRecord = function (form) {
            if (form.getForm()._record == null) {
                return;
            }
           
            if (!form.getForm().isValid()) {
                Ext.net.Notification.show({
                    iconCls  : "icon-exclamation",
                    html    : "Form is invalid",
                    title    : "Error"
                });
                return false;
            }
           
            form.getForm().updateRecord(form.getForm()._record[0]);
           
      };

           
    </script>
   
    <ext:Store ID="st_BadgeReaders" runat="server" AutoLoad="true" AutoSync="true">
        <Proxy>
            <ext:AjaxProxy>
                <ActionMethods Read="GET">
               
                </ActionMethods>
                <API
                    Read="../WCF_DataAccess/GetBadgeReaders"
                    Create="../WCF_DataAccess/AddBadgeReader"
                    Update="../WCF_DataAccess/UpdateBadgeReader" />
                   
                <Reader>
               
                    <ext:JsonReader Root="d">
                   
                    </ext:JsonReader>
                </Reader>
                <Writer>
                    <ext:JsonWriter Root="d" Encode="true" />
                </Writer>
            </ext:AjaxProxy>
        </Proxy>
        <Model>
            <ext:Model ID="mdlBadgeReader" runat="server" IDProperty="ID_BADGE_READER" Name="BadgeReader">
                <Fields>
                    <ext:ModelField Name="ID_BADGE_READER" Type="Int" />
                    <ext:ModelField Name="Name" Type="String" />
                    <ext:ModelField Name="Description" Type="String" />
                    <ext:ModelField Name="IPADDRESS" Type="String" Mapping="IPADDRESS" />
                    <ext:ModelField Name="Enabled" Type="Boolean" Mapping="Enabled"  />
                   
                </Fields>
            </ext:Model>
        </Model>
        <Listeners>
            <Exception Handler="
                    var error = operation.getError(),
                        message = Ext.isString(error) ? error : ('(' + error.status + ')' + error.statusText);
                    Ext.net.Notification.show({
                        iconCls    : 'icon-exclamation',
                        html      : message,
                        title      : 'EXCEPTION',
                        autoScroll : true,
                        hideDelay  : 10000,
                        width      : 300,
                        height    : 200
                    });" />
        </Listeners>
    </ext:Store>
    <ext:GridPanel ID="gp_BadgeReaders" runat="server" StoreID="st_BadgeReaders" Title=""
        Height="600" Flex="1" Region="Center" MultiSelect="false" AllowDeselect="false">
        <ColumnModel ID="ColumnModel1" runat="server">
            <Columns>
                <ext:Column runat="server" ColumnID="ID_BADGE_READER" DataIndex="ID_BADGE_READER" Hidden="true" />
                <ext:Column runat="server" ColumnID="Name" Header="name"
                    Locked="true" DataIndex="Name" />
                <ext:Column runat="server" ColumnID="Description" Header="description"
                    Align="Left" DataIndex="Description" />
<ext:Column  runat="server"  ColumnID="IPADDRESS" Header="ipaddress"
                    Align="Left" DataIndex="IPADDRESS" />
                <ext:CheckColumn runat="server" Width="60" ColumnID="Enabled" Header="enabled"
                    DataIndex="Enabled" />
               
               
            </Columns>
        </ColumnModel>
        <SelectionModel>
            <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Single">
                <Listeners>
                    <Select Handler="
                                        #{frmBadgeReader}.getForm().loadRecord(record);
                                        #{btnEdit}.show();

                                    " />
                    <Deselect Handler="
                                        #{btnEdit}.hide();
                                      " />
                </Listeners>
            </ext:RowSelectionModel>
        </SelectionModel>
        <Buttons>
            <ext:Button ID="btnAdd" Icon="ApplicationAdd" Text="add new"
                runat="server" OnClientClick="
                                                #{frmBadgeReader}.getForm().reset();
                                                #{btnAddSave}.setVisible(true);
                                                #{btnUpdateSave}.setVisible(false);
                                                #{wndAddNew}.show();">
            </ext:Button>
            <ext:Button ID="btnEdit" Icon="ApplicationEdit" Hidden="true" Text="edit selected"
                runat="server" OnClientClick="
                                               
                                                #{frmBadgeReader}.loadRecord(#{gp_BadgeReaders}.getSelectionModel().getSelection());
                                                #{btnAddSave}.setVisible(false);
                                                #{btnUpdateSave}.setVisible(true);
                                                #{wndAddNew}.show();">
            </ext:Button>
        </Buttons>
    </ext:GridPanel>
    <ext:Window ID="wndAddNew" runat="server" Icon="Application" Height="500"
        Width="600" BodyPadding="5" Modal="true" Hidden="true" AutoScroll="true" BodyStyle="background-color: #fff;" >
        <Content>
            <ext:FormPanel ID="frmBadgeReader" runat="server" Header="false" Padding="5" ButtonAlign="Right">
                <Items>
                    <ext:FieldSet ID="fsBadgeReaderDescription" runat="server" ColumnWidth="0.4" Title="description"
                        MarginSpec="0 0 0 10" ButtonAlign="Right" Layout="TableLayout">
                        <LayoutConfig>
                            <ext:TableLayoutConfig Columns="1" />
                        </LayoutConfig>
                        <Defaults>
                            <ext:Parameter Name="Width" Value="300" />
                            <ext:Parameter Name="LabelWidth" Value="150" />
                        </Defaults>
                        <Items>
                            <ext:Hidden ID="hidID_BadgeReader" Name="ID_BADGE_READER" runat="server" />
                            <ext:TextField ID="txtName" Name="Name" runat="server" FieldLabel="name"
                                MaxLengthText="100" AllowBlank="false" />
                               
                            <ext:TextField ID="txtDescription" Name="Description" runat="server" FieldLabel="description"
                                MaxLengthText="400" />
                           
                        </Items>
                    </ext:FieldSet>
                   
                    <ext:FieldSet ID="fsAddress" runat="server" ColumnWidth="0.4" Title="address"
                        MarginSpec="0 0 0 10" ButtonAlign="Right" Layout="TableLayout">
                        <LayoutConfig>
                            <ext:TableLayoutConfig Columns="1"></ext:TableLayoutConfig>
                        </LayoutConfig>
                        <Defaults>
                            <ext:Parameter Name="Width" Value="300" />
                            <ext:Parameter Name="LabelWidth" Value="150" />
                        </Defaults>
                        <Items>
                            <ext:TextField ID="txtADDRESS_IP"  Vtype="ip" AllowBlank="false"  Name="IPADDRESS" runat="server" FieldLabel="ip" />
                           
                        </Items>
                    </ext:FieldSet>

                    <ext:FieldSet ID="fsBadgeReaderManagement" runat="server" ColumnWidth="0.4" Title="managent"
                        MarginSpec="0 0 0 10" ButtonAlign="Right" Layout="TableLayout">
                        <LayoutConfig>
                        <ext:TableLayoutConfig Columns="1"></ext:TableLayoutConfig></LayoutConfig>
                        <Defaults>
                            <ext:Parameter Name="Width" Value="300" />
                            <ext:Parameter Name="LabelWidth" Value="150" />
                        </Defaults>
                        <Items>
                            <ext:Checkbox ID="Enabled" Name="Enabled" runat="server" FieldLabel="enabled" />
                           
                        </Items>
                    </ext:FieldSet>
                </Items>
                <Buttons>
                    <ext:Button ID="btnAddSave" runat="server" Text="add save"
                        Icon="Disk">
                        <Listeners>
                            <Click Handler="
                                            addRecord(#{frmBadgeReader}, #{gp_BadgeReaders});
                                            #{wndAddNew}.setVisible(false);
                                            #{st_BadgeReaders}.load();
                                           
                                          " />
                        </Listeners>
                    </ext:Button>
                    <ext:Button ID="btnUpdateSave" runat="server" Text="update save"
                        Icon="Disk">
                        <Listeners>
                            <Click Handler="
                                            updateRecord(#{frmBadgeReader});
                                            #{wndAddNew}.setVisible(false);
                                            #{st_BadgeReaders}.load();
                                          " />
                        </Listeners>
                    </ext:Button>
                </Buttons>
                <Listeners>
                        <ValidityChange Handler="#{btnAddSave}.setDisabled(!valid);#{btnUpdateSave}.setDisabled(!valid);" />
                    </Listeners>
            </ext:FormPanel>
        </Content>
    </ext:Window>

---

Hi John,

I guess a new record is not saved yet, then a Store reloads its data. It is asynchronous things.

Could you clarify why do you call a Store's load method?

Hi,
I call the load method because when I insert a new record, I need to sort the records in the grid.

Thank you!

Please try to remove that load call and add the following before the insert call.

Code:

---

grid.store.on("write", function (store) { store.reload(); }, null, { single: true });
grid.store.insert(0, new BadgeReader(form.getForm().getFieldValues()));

---

Ok!

Now it works!

Thank you for your help.

Bye