[CLOSED] Asynchronous server call to load store data from using custom proxy

[RCM]

hi,

Please let me know how would i go about making a remote call to the server when using the dynamic proxy below to load my data for the store.

Ext.define('Ext.data.proxy.MyProxy', {
    extend: 'Ext.data.proxy.Memory',
    alias: 'proxy.myproxy',
    alternateClassName: 'Ext.data.MyProxy',

    read: function (operation, callback, scope) {
        var me = this;

        // I have overrode just this line:
        // operation.resultSet = me.getReader().read(me.data);
        operation.resultSet = me.getReader().read(me.onReadData.call(me, operation));

        operation.setCompleted();
        operation.setSuccessful();
        Ext.callback(callback, scope || me, [operation]);
    }
});

var getData = function (operation) {
            var start = operation.start,
                limit = operation.limit,
                date = new Date(),
                i,
                data = [];

             jQuery.ajax(    {    url: "/controller/getdata", ....
                     success: function (result) {

                return {
                data: result.data,
                total: 8
                  };
                               }

            
        };

I need to be able to load the data from the server for the store when the get data method is triggered during paging.

var myProxyConfig = {
            type: 'myproxy',
            onReadData: getData,
            reader: {
                type: 'json',
                root: 'data',
                totalProperty: 'total'
            }
        };

please advise...

[Daniil]

Hi,

The getData method should return a data synchronously.

The Ext.data.proxy.Memory class is an inheritor of the Ext.data.proxy.Client one.
http://docs.sencha.com/ext-js/4-1/#!...a.proxy.Client

So, the MyProxy class should deal with client only.

For remote loading, please use server proxies. In your case, it would be best to use an AjaxProxy specifying a respective URL.

[RCM]

Hi,

Could you provide me with a sample that fits my requirements. I need to get each page of data from the server when the user scrolls(buffered paging) in the gridpanel. Is it possible to have custom ajax proxy similar to the one above that allows me control over how the data gets access from the server.

Just to clarify my requirements, the data I am loading is dynamic, I have no idea of the fields in the data and need to be able to reconfigure the gridpanel. I would also like to have control over the remote calls to the server. I am not 100% sure how to achieve this using ext.

[Daniil]

Well, we already have some example of buffering with remote data.
https://examples2.ext.net/#/GridPane...ling/Overview/

You can use an AjaxProxy as well.

Does it not suite your needs?

[RCM]

Hi,

I think this should be good enough... Do you have an MVC (aspx) sample which also includes dynamically creating the gridpanel and passing the paging parameters. This would be of great help to get started. thanks.

[Daniil]

We have a Razor example.
http://forums.ext.net/showthread.php...ll=1#post72510

It should be helpful for you!

Please note that AjaxStoreResult has been renamed to StoreResult.

Also you can use the Store extension method of the Controller.

return this.Store(/* arguments */);

[RCM]

Hi,

I have implemented using the example you provided as a guide. However after reconfigure the Gridpanel when the proxy makes the call to the server and returns the data, the data is not being displayed. see code below. Please let me know if you have any idea why the data may not be displaying.


Javascript that get calls when my Viewport that contains the grid view is rendered.

 var ReconfigureGrid = function () {

var grid = Ext.getCmp("GridPanel1"),
                store,
                columns;

            store = Ext.create('Ext.data.JsonStore', {
            remoteSort: true,
            buffered: true,
            fields: [{ name: "test1" }, { name: "test2"}],
            showWarningOnFailure: true,
            proxy: {
                type: "ajax",
                url: "/getData/",
                reader: {
                    root: "data",
                    type: "array"
                },
                listeners: {
                    exception: { fn: function (el, response, operation, eOpts) {

                        alert(response.text);

                    }
                    }//end exception
                }
            }
        });

            columns = [{
                dataIndex: "test1",
                text: "Test1",
                xtype: "checkcolumn",
            }, {
                dataIndex: "test2",
                text: "Test2"
            }];

            grid.reconfigure(store, columns);

            grid.filters.clearFilters();
            grid.filters.addFilter({ type: 'string', dataIndex: 'test1' });
            grid.filters.addFilter({ type: 'string', dataIndex: 'test2' });

            store.loadPage(1);

}

<form runat="server">
    <ext:ResourceManager runat="server" />
<ext:Viewport ID="viewportResultView" runat="server" Layout="FitLayout" IDMode="Explicit">
<Items>
    <ext:GridPanel ID="GridPanel1" runat="server" Width="500" Height="500" DisableSelection="true"
        Title="Stock Price">
            <TopBar>
                <ext:Toolbar runat ="server">
                    <Items>
                        <ext:Button runat ="server" Text = "reconfgure">
                            <Listeners>
                                <Click Handler="reconfigureGrid();" />
                            </Listeners>
                        </ext:Button>
                    </Items>
                </ext:Toolbar>
            </TopBar>
        <Store>
            <ext:Store runat="server" Buffered="true" PageSize="100">
                <Model>
                    <ext:Model runat="server">
                        <Fields>
                             <ext:ModelField Name="dummy" />
                        </Fields>
                    </ext:Model>
                </Model>
            </ext:Store>
        </Store>
        <ColumnModel runat="server">
            <Columns>
                <ext:RowNumbererColumn runat="server" Width="50" Sortable="false" />
            </Columns>
            <Listeners>
                <HeaderClick Fn="onHeaderClick" />
            </Listeners>
        </ColumnModel>
        <Features>
            <ext:GridFilters runat="server" ID="gridFiltersGridView" 
                AutoDataBind="true">
                <Filters>
                </Filters>
            </ext:GridFilters>
        </Features>
        <View>
            <ext:GridView runat="server" TrackOver="false" />
        </View>
    </ext:GridPanel>
<Items>
 <Listeners>
            <Render Handler="ReconfigureGrid();" />            
        </Listeners>
    </ext:Viewport>
    </form>

DataContoller

 class testdata
    {
        public string test1 { get; set; }
        public String test2 { get; set; }
    }

    public class DataController : System.Web.Mvc.Controller
    {
        public StoreResult GetData(int start, int limit, int page)
        {
       

            List<testdata> data = new List<testdata>();

            Random randow = new Random();
            DateTime now = DateTime.Now;

            for (int i = start + 1; i <= start + limit; i++)
            {
                testdata qoute = new testdata()
                {
                    test1 = "Company " + i,
                    test2 = randow.Next(0, 200).ToString(),
                };

                data.Add(qoute);
            }

            return this.Store(data);
        }
    }

[Daniil]

I think you should replace

type: "array"

with

type: "json"

for the reader of Proxy.

An array reader expects a collection of arrays, but you bind a list of objects. A JSON reader should deal with it.

Hope this helps.

[RCM]

hi,

Which reader would i use to correctly parse an object

 List<Dictionary<string, object>> data

Each dictionary item in the list contains key-value pair of records i read from a datatable. Is this the best way to pass the data to be handled by the store. The reason i am doing this is because the datatable is dynamic and i don't know its contents to build a typed object.

[RCM]

Hi,

I got it to work now. The json reader did the trick. please ignore my last post.