extjs ajax call store not loading

Question

I apologize ahead if very similar to other posts but I cannot get this to work after working on it for over a week now. Finally got the webservice to return data, I can see the data returned but the store will not load it. Except in one case: when I create an ArrayStore and set the store to loadRawData i see whole response incorrectly in the grid all displayed down one column; but just happy to see the data. Can someone please take a look at this and see why my store is not loading the data and populating the grid:

   Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
         { name: 'connTime', type: 'string' },
         { name: 'userName', type: 'string' },
         { name: 'clientName', type: 'string' },
         { name: 'feedUrl', type: 'string' },
         { name: 'dconnTime', type: 'string' },
         { name: 'errMessage', type: 'string' },
         { name: 'ip', type: 'string' }
  ]
});

var myStore = Ext.create('Ext.data.Store', {
    model: 'User'
 });


 Ext.Ajax.request({
    url: 'http://dfsdfsfsfs/WCFService/WebService1.asmx/getValue',
    method: 'GET',
    success: function (response, options) {
        var s = response.responseText;
        Ext.MessageBox.alert(s, 'WOO WOO');
        myStore.loadData(s);
    },
    failure: function (response, options) {
        Ext.MessageBox.alert('FAILED MF', 'Unable to GET');
    }
});



  var grid = Ext.create('Ext.grid.Panel', {
    store: myStore,
    stateful: true,
    stateId: 'stateGrid',
    columns: [
        {
            text: 'Query',
            width: 25,
            sortable: false,
            dataIndex: 'userName'
        },
        {
            text: 'Count',
            width: 5,
            sortable: true,
            renderer: change,
            dataIndex: 'ip'
        },
        {
            text: 'Last Updated',
            width: 76,
            sortable: true,
            dataIndex: 'connTime'
        },
        {
            text: 'Disconnect Time',
            width: 10,
            sortable: true,
            renderer: change,
            dataIndex: 'dconnTime'
        },
        {
            text: 'Client',
            width: 10,
            sortable: true,
            renderer: change,
            dataIndex: 'clientName'
        }

    ],
    height: 350,
    width: 800,
    title: 'Active Queries',
    renderTo: 'grid-example',
    viewConfig: {
        stripeRows: true
    }
});

.....

I even tried a different way of doing this and with this one i don't even see the ajax response returned:

 var newStore = Ext.create('Ext.data.ArrayStore', {
    model: 'User',
    proxy: {
        type: 'ajax',
        url: 'http://dfsdfsfsfs/WCFService/WebService1.asmx/getValue',
        reader: {
            type: 'json',
            root: 'd',
            successProperty: 'success'
        },
        success: function (response, options) {
            var s = response.responseText;
            Ext.MessageBox.alert(s, 'LA LA LA');
            newStore.loadData(s);
        },
        failure: function (response, options) {
            Ext.MessageBox.alert('FAILED AGAIN', 'SUCKS');
        }
    }
});

EDIT:

Server Response:

{"d":{"connTime":null,"userName":"101591196589145","clientName":null,
   "feedUrl":null,"dconnTime":null,"errMessage":null,"ip":null}}

"d" root was manually added by me and is not there in original webresponse. I capture it and add the root:

{"connTime":null,"userName":"101591196589145","clientName":null,"feedUrl":null,
"dconnTime":null,"errMessage":null,"ip":null}}

EDIT 2:

  Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [
         { name: 'value', type: 'string' },
         { name: 'tag', type: 'string' }
    ]
});


var newStore = new Ext.data.JsonStore({
    model: 'User',
    proxy: {
        type: 'ajax',
        url: 'http://localhost:52856/WCFService/WebService1.asmx/getRules',
        reader: {
            type: 'json',
            root: 'rules',
            idProperty: 'value'                
        },
        success: function (response, options) {
            var s = response.responseText;
            Ext.MessageBox.alert(s, 'LA LA LA');
            newStore.loadData(s);
        },
        failure: function (response, options) {
            Ext.MessageBox.alert('FAILED AGAIN', 'SUCKS');
        }
    }
 });

  var grid = Ext.create('Ext.grid.Panel', {
    store: newStore,
    stateful: true,
    columns: [

Here is the new json I am trying:

{"rules":[{"value":"101591196589145","tag":"16"},
 {"value":"102890809752267","tag":"16"},    
 {"value":"107821192690513","tag":"16"},    {"value":"111517428886211","tag":"16"},
{"value":"117389718398171","tag":"16"},{"value":"12099149051","tag":"16"},

OK I found what could be the issue with the ext.ajax.request call. At the time the request is made the store is not even defined and thus the data is not loading. How can I get past this?

Answer 1

Here, I will give you an example, just compare with your code.

// defining a model
Ext.define('SampleModel', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'YOUR_ID', type: 'int'},
        {name: 'YOUR_NAME', type: 'string'}
    ]
});

// defining a store
var storeDefinition = new Ext.data.JsonStore({
    model: 'SampleModel',
    proxy: {
        type: 'ajax',
        url: '/your/url/path/data.php',
        reader: {
            // you MUST define root and idProperty
            type: 'json',
            root: 'rootList',
            idProperty: 'YOUR_ID'
        }
    }
});

Here is the important parts are root and idProperty. As you specified, root is the root node of the json object. idProperty is the unique id in the json object.

To catch success and failure response, you should return success or failure data inside the json object. It doesn't necessary to specify success property in reader section. For instance;

public function dnr_info()
{
    $dnr    = $this->input->get('dnr', TRUE);
    $subsys = $this->input->get('subsys', TRUE);
    $data['success'] = TRUE;
    $data['data'] = $this->dnr->get_dnr_info($dnr, $subsys);
    echo json_encode($data);
}

Above function will return success property of the json object.

And, here is the returning json object from the server.

{"success":true,"data":{"SUBSYS_ART_NR":"136451","ART_NR":"459993","ACTION_DESC":"BAKKAL AKT\u0130V\u0130TES\u0130 (176)","ACTIONS_NR":"130012676","START_DATE":"19.12.2013","STOP_DATE":"16.01.2014","DISCOUNT_TYPE":"SPECIAL PRICE","LEVEL_TYPE":"QUANTITY","LEVEL_IMPACT":"MULTIPLE","BASIS":"ARTICLE","LEVEL_1":"1 ADET","VALUE_1":"5,92","NWW_VK_PREIS":"6.69","KOLLI_VK_PREIS":"6.69"}}

// here is the another sample for root which is articleList, idProperty which is ARTICLE_ID 
{"articleList":[{"ARTICLE_ID":"193","ART_NR":"225","ART_DESC":"27*1\/5LT.M.NEK.TAMEK.","SORTEN_TEXT":"ELMA","VAR":"1","GEBI":"1","SUBSYS_ART_NR":"225","NWW_VK_PREIS":"14.49","KOLLI_VK_PREIS":"14.49","DNR_ID":null,"STATUS":"0"},

Answer 2

Not really sure how you got yourself in such a state. There are plenty of examples of loading a grid in the SDK download. Proxy has no failure/success method.

Fiddle here. Working code:

Ext.onReady(function() {

    Ext.define('User', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'value',
            type: 'string'
        }, {
            name: 'tag',
            type: 'string'
        }]
    });


    var store = new Ext.data.Store({
        model: 'User',
        proxy: {
            type: 'ajax',
            url: 'data.json',
            reader: {
                type: 'json',
                root: 'rules'
            }
        }
    });
    store.load();

    var grid = new Ext.grid.Panel({
        renderTo: Ext.getBody(),
        width: 400,
        height: 400,
        store: store,
        columns: [{
            text: 'Value',
            dataIndex: 'value',
            flex: 1
        }, {
            text: 'Tag',
            dataIndex: 'tag'
        }]
    });
});