CODEWITHSUNDEEP
extjssencha-touch-2
Ravi Shekhar
Ravi Shekhar

Reputation: 2905

How to create Grid in sencha touch 2.3.0 populate data from a REST webservice

I need to display report in Grid / Table in Sencha Touch 2.3.0. Is there any build in function to do so. The store needs to populate data from a REST webservice call.

Upvotes: 1

Views: 2827

Answers (2)

jakeforaker
jakeforaker

Reputation: 1657

I do this all the time with something like this:

(Though I haven't worked with the Grid, I'm quite sure the same principles apply...)

Ext.define('App.controller.GridController', {
extend : 'Ext.app.Controller',
config: {
    refs: {
        getApiButton: 'button[action=getApiData]'
    },
    control: {
        'getApiButton' : {
            tap : 'onButtonTap'
        }
    }
},

onButtonTap : function(field, value) {

    var that = this;

    Ext.Ajax.request({
        url : someWebServiceUrl,
        method: 'GET',
        success: function (result, request) {

            var res = Ext.decode(result.responseText);

            if (res.success === true && res.data != false) {

                var recipient = {
                    name:   res.data[0].displayname,
                    picId:  res.data[0].pictureid,
                    gender: res.data[0].gender
                };

                var mod = Ext.define('App.model.GradingPopModel', {
                    extend: 'Ext.data.Model',
                    config: {
                        fields: [
                            'name',
                            'picId',
                            'gender'
                        ]
                    }
                });

                /* == this is probably where you want to make your changes to apply the model to the grid template
                      the sencha website has this:

                data: {'items': [
                    { 'name': 'Lisa',  "email":"[email protected]",  "phone":"555-111-1224"  },
                    { 'name': 'Bart',  "email":"[email protected]",  "phone":"555-222-1234" },
                    { 'name': 'Homer', "email":"[email protected]",  "phone":"555-222-1244"  },
                    { 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254"  }
                ]}

                */

                var store = Ext.create('Ext.data.Store', {
                    model: mod,
                    storeId:'recipStore'
                });

                store.add(recipient);
                store.setData(recipient);
                store.load();

                var gridView = Ext.ComponentQuery.query('#gridViewId')[0];

                gridView.setStore(store);

            }
        },
        failure: function (result, request) {
            console.log('api call was a failure');
        },
        scope: this
    });
}
});

Now of course your data won't have "displayname, gender" etc.. but you should get the point.

I also found a working example here (I find it very sad that Sencha allows broken demos on their own website): http://demo.rasc.ch/eds/touch23/grid/grid/index.html

Upvotes: 1

Akatum
Akatum

Reputation: 4016

For loading data you can use Ext.data.Store configured with REST proxy Ext.data.proxy.Rest

For displaying data from store you can use Ext.grid.Grid of Ext.dataview.DataView

Upvotes: 1

Related Questions