custom webapi function binding to store extjs grid

Question

I need help to bind data returned by a custom webapi function. Say my webapi function calling syntax is like below:

var filter = {<some conditions here>};

Myapp.systemcontroller.Getdata(filter).then(function(result){
   --- this result contain my data and total record 
   });

How can I bind this function to the store proxy and then bind it to a grid?

Any help would be greatly appreciated.

score 0 · Answer 1 · answered Jul 29 '13 at 04:59

You can use different way to add the data to store. Its depend on your data structure(array or object).

grid.getStore.add(model) -ref: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Store
grid.getStore.loadData(data,[append]) - ref: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Store-method-loadData
grid.getStore.loadRawData(data,[append]) - ref: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Store-method-loadRawData
grid.getStore.loadRecords(records,options) - ref: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Store-method-loadRecords

In your case, you can use loadRecords() or add()

Dear Hari , thanks I can bind it to the store by using add or loaddata it was working ...but i need to bind this function via proxy because i have paging toolbar assocated with the grid .. if i use this way to show data, when we click on the paging toolbar refresh it will throw error that you are using a server proxy with no url — Sebastian Louis, Jul 29 '13 at 07:20

score 0 · Answer 2 · answered Aug 02 '13 at 09:12

The problem has been fixed. I m not using any proxy in my store.. I m using the above api to retrieve the data and bind it to store using loadData method. Then I will set the totalProperty of my toolbar as well

-- on load

 Myapp.systemcontroller.Getdata(f).then(function (data) { 
            gridstore.loadData(data.Items);
            gridstore.totalCount = data.TotalNumber;
            var pgTb = Ext.getCmp('DataListPgTb');
            pgTb.onLoad();
            me.getLogList().setLoading(false);
        });

Then in the toolbarchange event

toolBarChange: function (tbar, pageData, eOpts) {   
        var pageSize = PrIns.getApplication().Configuration.PageSize;
        var me = this;
        me.getLogList().setLoading(true);
        var f = Ext.create(MyApp.webapi.filter.LogFilter', { pageIndex: pageData, pageSize: pageSize, orderBy: 'Ascending' });
        var gridstore = this.getLogList().getStore();
         Myapp.systemcontroller.Getdata(f).then(function (data) { 
            gridstore.loadData(data.Items);
            gridstore.totalCount = data.TotalNumber;
            gridstore.currentPage = pageData;       
            var pgTb = Ext.getCmp('DataListPgTb');
            pgTb.onLoad();
            me.getLogList().setLoading(false);
        });
        return false;
    },

return false will prevent us from calling the proxy

custom webapi function binding to store extjs grid

2 Answers2