[CLOSED] reload store and grid on client side

[ryan.kim]

How can I reload store on client side?

When I submit something, it call ajax to update database.
So store and grid need to be updated right after updating database.

Why following is not working?

<script type="text/javascript">
    function updateChat(msg) {
        $.ajax({
            type: "post",
            url: '<%= Url.Action("UpdateChat", "Mshw")%>',
            data: { msg: msg },
            success: function (ret) {
                Ext.Msg.alert('Submit', ret);
            },
            error: function () {
                Ext.MessageBox.alert('Error', 'Error detected during updating msg.');
            }
        });

        var store = Ext.getCmp("chatStore");
        store.reload();
    }
</script>

I'm mainly using MVC and JQuery.

[Daniil]

Hi,

Why following is not working?

Please always provide more details. How exactly does it not work?

I think a JS error occurs here:

var store = Ext.getCmp("chatStore");store.reload();

.getCmp() doesn't return a store instance. Please use Ext.getCmp() for Ext.Component and its inheritors. A Store is not an Ext.Component inheritor.

Generally speaking, you can access a store (and any widgets as well) by its client id:

chatStore.reload();

[ryan.kim]

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">   

    <div class="content-body">
        <table width="97%" border="0">
            <tr>
                <td style="width: 60%;">
                </td>
                <td>
                    <ext:Panel runat="server" Width="400" Height="275">
                        <Items>
                            <ext:BorderLayout runat="server">
                                <North>
                                    <ext:GridPanel runat="server" ID="chatGrid" ClientIDMode="Static" Width="400" Height="200" Border="false" >
                                        <Store>
                                            <ext:Store runat="server">
                                                <Proxy>
                                                    <ext:HttpProxy Method="POST" Url='<%# Url.Action("GetAllChat", "Mshw") %>' AutoDataBind="true" Json="true" />
                                                </Proxy>
                                                <Reader>
                                                    <ext:JsonReader Root="items" TotalProperty="total">
                                                        <Fields>
                                                            <ext:RecordField Name="name" Type="String" />
                                                            <ext:RecordField Name="msg" Type="String" />
                                                            <ext:RecordField Name="date" Type="String" />
                                                        </Fields>
                                                    </ext:JsonReader>
                                                </Reader>
                                            </ext:Store>
                                        </Store>
                                        <ColumnModel>
                                            <Columns>                            
                                                <ext:Column Header="Name" DataIndex="name" Sortable="false" Width="180" />
                                                <ext:Column Header="Time" DataIndex="date" Sortable="false" Width="190"  />
                                            </Columns>
                                        </ColumnModel>
                                        <View>
                                            <ext:GridView ID="GridView1" runat="server" EnableRowBody="true">
                                                <GetRowClass Handler="rowParams.body = '<p>' + record.data.msg + '</p>'; return 'x-grid3-row-expanded';" />                    
                                            </ext:GridView>        
                                        </View>
                                        <LoadMask ShowMask="true" /> 
                                    </ext:GridPanel>
                                </North>
                                <Center>
                                    <ext:FormPanel ID="formMsg" runat="server" ButtonAlign="Right" Padding="5" Height="75">
                                        <Items>
                                            <ext:TextField ID="txtMsg" runat="server" AnchorHorizontal="95%" FieldLabel="Leave a message" ></ext:TextField>
                                        </Items>
                                        <Buttons>
                                            <ext:Button ID="btnMsgSubmit" runat="server" Text="Submit">
                                                <Listeners>                                                    
                                                    <Click Handler="updateChat(#{txtMsg}.getValue());" />
                                                </Listeners>
                                            </ext:Button>
                                        </Buttons>
                                    </ext:FormPanel>
                                </Center>
                            </ext:BorderLayout>
                        </Items>
                    </ext:Panel>

                    
                </td>
            </tr>
            <tr>
                <td colspan="2">
                </td>
            </tr>
        </table>
    </div>
    
<script type="text/javascript">
    function updateChat(msg) {
        $.ajax({
            type: "post",
            url: '<%= Url.Action("UpdateChat", "Mshw")%>',
            data: { msg: msg },
            success: function (ret) {
                Ext.Msg.alert('Submit', ret);
            },
            error: function () {
                Ext.MessageBox.alert('Error', 'Error detected during updating msg.');
            }
        });
    };
</script>
</asp:Content>

I want to update database and refresh the grid when submit button click.
Any idea?

[Daniil]

Update database? Do you mean saving client side changes?

Please see this example (UpdateHttpProxy) from Ext.Net.MVC.Demo:

[Ext.Net.MVC root]\Ext.Net.MVC.Demo\Views\Customer\CustomerList.aspx

[ryan.kim]

MSSQL Database. I want to ADD something to database then show it on the grid on button click

[Vladimir]

Just call reload method to retrieve data

1.

store.reload({params:{msg:'test'}});

2.

public AjaxStoreResult GetMessages(string msg)
{
     if(msg != null)
     {
        // add message to DB
     }
     
     // retrieve data from DB and return it to the client
     return new AjaxStoreResult(...);
}