[CLOSED] GridPanel Refresh grid problem

  1. #1

    [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.

    <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>
    Last edited by Daniil; May 23, 2013 at 1:37 PM. Reason: [CLOSED]
  2. #2
    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?
  3. #3
    Hi,
    I call the load method because when I insert a new record, I need to sort the records in the grid.

    Thank you!
  4. #4
    Please try to remove that load call and add the following before the insert call.
    grid.store.on("write", function (store) { store.reload(); }, null, { single: true });
    grid.store.insert(0, new BadgeReader(form.getForm().getFieldValues()));
  5. #5
    Ok!

    Now it works!

    Thank you for your help.

    Bye

Similar Threads

  1. [CLOSED] TreePanel refresh problem
    By bayoglu in forum 2.x Legacy Premium Help
    Replies: 7
    Last Post: Sep 16, 2013, 4:51 PM
  2. Replies: 7
    Last Post: Mar 27, 2013, 7:07 AM
  3. Replies: 2
    Last Post: Mar 27, 2013, 7:04 AM
  4. How to refresh grid row
    By myaso in forum 2.x Help
    Replies: 4
    Last Post: Dec 30, 2012, 1:10 AM
  5. Problem in Refresh button Of Grid Panel
    By Rakeshkumar.a in forum 1.x Help
    Replies: 1
    Last Post: Dec 14, 2010, 7:13 AM

Posting Permissions