Question

This my ExtJS code to show my records in grid.

   var remoteProxy = new Ext.data.ScriptTagProxy({
                url : 'hastanebilgilerinigetir'
            });

            var recordFields = [
                                { name : 'hid',          mapping : 'hid'},
                                { name : 'isim',   mapping : 'isim'},
                                { name : 'adres',    mapping : 'adres'},
                                { name : 'telefon',      mapping : 'telefon'},
                                { name : 'bashekimid',        mapping : 'bashekimid' }
            ];

            var remoteJsonStore = new Ext.data.JsonStore({
                proxy           : remoteProxy,
                storeId         : 'ourRemoteStore',
                root            : 'records',
                autoLoad        : false,
                //totalProperty   : 'totalCount',
                remoteSort      : true,
                fields          : recordFields,
                idProperty      : 'hid'
            });

            var textFieldEditor = new Ext.form.TextField();

            var numberFieldEditor = {
                    xtype     : 'numberfield',
                    minLength : 5,
                    maxLength : 5
            };

            var columnModel = [
                               {
                                   header    : 'Hastane Adı',
                                   dataIndex : 'isim',
                                   sortable  : true,
                                   editor    : textFieldEditor
                               },
                               {
                                   header    : 'Telefon',
                                   dataIndex : 'telefon',
                                   sortable  : true,
                                   editor    : textFieldEditor
                               },
                               {
                                   header    : 'Adres',
                                   dataIndex : 'adres',
                                   sortable  : true,
                                   editor    : textFieldEditor
                               },
                               {
                                   header    : 'Baş Hekim ID',
                                   dataIndex : 'bashekimid',
                                   sortable  : true,
                                   editor    : numberFieldEditor
                               },
                               {
                                   header    : 'Hastane ID',
                                   dataIndex : 'hid',
                                   sortable  : true,
                                   editor    : numberFieldEditor
                               }
                               ];
    var grid = {
            xtype      : 'editorgrid',
            columns    : columnModel,
            id         : 'myEditorGrid',
            store      : remoteJsonStore,
            loadMask   : true,
            bbar       : pagingToolbar,
            stripeRows : true,
            viewConfig : {
                forceFit : true
            },
            listeners        : {
                cellcontextmenu : doCellCtxMenu,
                destroy         : function(thisGrid) {
                    if (thisGrid.rowCtxMenu) {
                        thisGrid.rowCtxMenu.destroy();
                    }
                }
            }
    };

    var hastanegridi = new Ext.Panel({
        title: 'Hastaneler',
        height  : 700,
        width   : 950,
        border  : false,
        layout  : 'fit',
        items   : grid
    });


    remoteJsonStore.load({
        params : {
            start : 0,
            limit : 50
        }
    });

I have the following java code to create JSONObject

    @Override
    public JSONObject listHastanesAsJson() {
        List<Hastane> lst = hastaneDao.listHastane();

        JSONArray arr = new JSONArray();

//      int i=lst.size();
//      JSONObject counter = new JSONObject();
//      counter.put("totalCount", i);
//      arr.add(counter);


        for(Hastane kan:lst){

            JSONObject obj = new JSONObject();

            obj.put("hid", kan.getHid());
            obj.put("isim", kan.getIsim());
            obj.put("adres", kan.getAdres());
            obj.put("telefon", kan.getTelefon());
            obj.put("bashekimid", kan.getBahekimid());
            arr.add(obj);
        }


        JSONObject o = new JSONObject();
        o.put("records", arr);
        return o;
    }

My Json data look like :

{"records":[{"hid":1,"isim":"Zeynep Kamil","adres":"Istanbul","telefon":"056765434567","bashekimid":1},{"hid":2,"isim":"Ankara Hastanesi","adres":"Ankara","telefon":"345678987658","bashekimid":2},{"hid":3,"isim":"Baskent Hastanesi","adres":"Ankara","telefon":"567898765697","bashekimid":3}]}

But when I try to show my data in browser I get error below “İnvalid label”

Is there a mistake when I create JSONObject in server side?

My json data must be something like in this link but I don’t know how to construct my data like this: http://extjsinaction.com/dataQuery.php

Answer 1

You are using Ext.data.ScriptTagProxy witch is for JSONP (cross domain requests)

your request url should be something like this:

http://extjsinaction.com/dataQuery.php?callback=callbackFunction

your response should be like this:

callbackFunction({
    "records": [
        {
            "hid": 1,
            "isim": "Zeynep Kamil",
            "adres": "Istanbul",
            "telefon": "056765434567",
            "bashekimid": 1
        },
        {
            "hid": 2,
            "isim": "Ankara Hastanesi",
            "adres": "Ankara",
            "telefon": "345678987658",
            "bashekimid": 2
        },
        {
            "hid": 3,
            "isim": "Baskent Hastanesi",
            "adres": "Ankara",
            "telefon": "567898765697",
            "bashekimid": 3
        }
    ]
})

If you need more info about JSONP google is your friend.

Some good examples in documentation