[CLOSED] Loading data from server to store by javascript

  1. #1

    [CLOSED] Loading data from server to store by javascript

    Hello:

    I am a newbie for Ext.Net. Right now I got a situation that when I click a button, I need to fill the data from server(controller) into the store on the page by javascript but before I click the button, I don't want to fill in the store because it's too costly for server. Is there any comment or thought to implement that?

    Thanks in advance

    Tom
    Last edited by Daniil; Apr 21, 2011 at 7:46 PM. Reason: [CLOSED]
  2. #2
    Hi,

    You could use the Ext.net.DirectMethod.request() + Store's .loadData() methods.
    https://examples1.ext.net/#/Events/D...hods/Overview/
    http://dev.sencha.com/deploy/dev/doc...ember=loadData

    Here is an MVC example.

    View
    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!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.MVC Example</title>
        
        <script type="text/javascript">
            var load = function (store) {
                Ext.net.DirectMethod.request({
                    url : "/Data/GetData",
                    cleanRequest : true,
                    success : function (data) {
                        store.loadData(data);
                    }
                });
            }    
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" Theme="Gray" />
        <ext:GridPanel runat="server" AutoHeight="true">
            <Store>
                <ext:Store  ID="Store1" runat="server" AutoLoad="false">
                    <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:Button runat="server" Text="Load">
            <Listeners>
                <Click Handler="load(#{Store1})" />
            </Listeners>
        </ext:Button>
    </body>
    </html>
    Controller action
    public AjaxResult GetData()
    {
        AjaxResult asr = new AjaxResult();
    
        asr.Result = new object[] 
        { 
            new object[] { "test11", "test12", "test13" },
            new object[] { "test12", "test22", "test23" },
            new object[] { "test13", "test32", "test33" }
        };
        return asr;
    }
  3. #3
    Thank you Daniil. It is working however after I load the data to store and try to do something, I found the store is empty until current method exist.
    like
    <script type="text/javascript">
            var load = function (store) {
                Ext.net.DirectMethod.request({
                    url : "/Data/GetData",
                    cleanRequest : true,
                    success : function (data) {
                        store.loadData(data);
                    }
                });
            var firstRecord=store.getAt(0);
            }    
        </script>
    When you first time click the button, the firstRecord is always null, unless you click again.
    do you know what's going on for it? thank you



    Quote Originally Posted by Daniil View Post
    Hi,

    You could use the Ext.net.DirectMethod.request() + Store's .loadData() methods.
    https://examples1.ext.net/#/Events/D...hods/Overview/
    http://dev.sencha.com/deploy/dev/doc...ember=loadData

    Here is an MVC example.

    View
    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <!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.MVC Example</title>
        
        <script type="text/javascript">
            var load = function (store) {
                Ext.net.DirectMethod.request({
                    url : "/Data/GetData",
                    cleanRequest : true,
                    success : function (data) {
                        store.loadData(data);
                    }
                });
            }    
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" Theme="Gray" />
        <ext:GridPanel runat="server" AutoHeight="true">
            <Store>
                <ext:Store  ID="Store1" runat="server" AutoLoad="false">
                    <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:Button runat="server" Text="Load">
            <Listeners>
                <Click Handler="load(#{Store1})" />
            </Listeners>
        </ext:Button>
    </body>
    </html>
    Controller action
    public AjaxResult GetData()
    {
        AjaxResult asr = new AjaxResult();
    
        asr.Result = new object[] 
        { 
            new object[] { "test11", "test12", "test13" },
            new object[] { "test12", "test22", "test23" },
            new object[] { "test13", "test32", "test33" }
        };
        return asr;
    }
  4. #4
    Well, when you click on the button at the first time, the store is empty.

    Ext.net.DirectMethod.request(...)
    This code causes an ajax request to a server.

    So, ajax is asynchronous, and JavaScript engine immediately executes the next code line:
     var firstRecord=store.getAt(0);
    But the 'success' handler is not executed yet.

    Well, I guess you need to access the record within the 'success' handler.
  5. #5
    Quote Originally Posted by Daniil View Post
    Well, when you click on the button at the first time, the store is empty.

    Ext.net.DirectMethod.request(...)
    This code causes an ajax request to a server.

    So, ajax is asynchronous, and JavaScript engine immediately executes the next code line:
     var firstRecord=store.getAt(0);
    But the 'success' handler is not executed yet.

    Well, I guess you need to access the record within the 'success' handler.
    I see, Thank you for the comment and the demo code.

Similar Threads

  1. [CLOSED] Store: Passing JSON data directly to Server-Side
    By nhg_itd in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Feb 09, 2012, 2:08 AM
  2. [CLOSED] Loading data in store take too long. browser hangs.
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 21
    Last Post: Nov 22, 2011, 8:42 AM
  3. Replies: 4
    Last Post: May 31, 2011, 3:53 PM
  4. Sending Store Data To Server
    By kumarxlnt in forum 1.x Help
    Replies: 0
    Last Post: Oct 27, 2009, 2:02 AM
  5. Replies: 10
    Last Post: Nov 20, 2008, 3:17 PM

Tags for this Thread

Posting Permissions